angular JS Put method with ASP.NET MVC

Question

I have my angular controller defined like this for Put and Get method. I m new to angular JS. The get method works as expected but the Put method is not getting called. I followed one of the tutorial and implemented. though in the tutorial, they used REST service URL rather than controller method. I m using MVC controller here not the webAPI one.

public JsonResult GetEmployee(int id)
        {
            Employee empDetail = emp.GetEmployees().FirstOrDefault(i => i.EmpID == id);
            return Json(empDetail, JsonRequestBehavior.AllowGet);
        }


        public JsonResult PutEmployee(int id, Employee updtEmp)
        {
            updtEmp.EmpID=id;
            int index = emp.GetEmployees().FindIndex(i => i.EmpID == updtEmp.EmpID);
            emp.GetEmployees().RemoveAt(index);
            emp.GetEmployees().Add(updtEmp);
            return Json(emp.GetEmployees(), JsonRequestBehavior.AllowGet);
        }

Here is my angular Factory and controller method

myservice.factory('empFactory', function ($resource) {

    return $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
        {
            show: { method: 'GET' },
            update: { method: 'PUT', params: {  Employee: '@employee' } }
        });
});

myApp.controller('empDetailController', function ($scope, empFactory, $routeParams) {

    $scope.Employee = empFactory.show({ EmpID: $routeParams.EmpID });

    $scope.UpdateEmp = function () {
       // alert($scope.Employee.FirstName);
        var employee=$scope.Employee;
        empFactory.update({ EmpID: $routeParams.EmpID, Employee: employee })
    };
});

Answer 1

Where did you mention in the MVC controller the method is PUT, Until and unless you mention the method type HttpPut or HttpPost etc., they are treated as HttpGet, Mention the method as PUT method in your MVC controller and try again.

Decorate your MVC PUT method like this :

[HttpPut]
public JsonResult PutEmployee(int id, Employee updtEmp)
    {
        updtEmp.EmpID=id;
        int index = emp.GetEmployees().FindIndex(i => i.EmpID == updtEmp.EmpID);
        emp.GetEmployees().RemoveAt(index);
        emp.GetEmployees().Add(updtEmp);
        return Json(emp.GetEmployees(), JsonRequestBehavior.AllowGet);
    }

and factory and controller shouldbe like this :

myservice.factory('empFactory', function ($resource) {
var resource = {
employees:$resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' }),
empUpdateService:$resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID' },{            
        update: { method: 'PUT', params: {  Employee: '@employee' } }
    })
};

 return resource;
});

myApp.controller('empDetailController', function ($scope, empFactory, $routeParams) {

$scope.Employee = empFactory.employees.get({ EmpID: $routeParams.EmpID });

$scope.UpdateEmp = function () {
   // alert($scope.Employee.FirstName);
    var employee=$scope.Employee;
    empFactory.empUpdateService.update({ EmpID: $routeParams.EmpID, Employee: employee })
};

Answer 2

You wanted to do it in a very good way, but for that you should use WEB Api controllers.

Web Api controller should be like this :

    public class Employee : ApiController
    {
    public EmpModel GetEmployee(int id)
    {
        Employee empDetail = emp.GetEmployees().FirstOrDefault(i => i.EmpID == id);
        return empDetail;
    }

    public bool PutEmployee(int id, Employee updtEmp)
    {
        updtEmp.EmpID=id;
        int index = emp.GetEmployees().FindIndex(i => i.EmpID == updtEmp.EmpID);
        emp.GetEmployees().RemoveAt(index);
        emp.GetEmployees().Add(updtEmp);
        return emp.PutEmployees(updtEmp);
    }

    public bool PostEmployee(Employee empModel)
    {
        // do something
        return emp.SaveEmployees(empModel);
    }

    public bool DeleteEmployee(int id)
    {
        // do something
        return emp.DeleteEmployees(id);
    }
}

consider the below resource, that can do four operations. they are get, post, put and delete. :

var resource = {
    employee: $resource('../../Employee/:EmpID', { EmpID: '@EmpID' },
       {
           update: { method: 'PUT' },

       });

}
return resource;

use your resource in controllers like this, for get :

$scope.Employee = empFactory.employee.get({ EmpID: $routeParams.EmpID }).$promise;

for post :

 $scope.SaveEmp = function (employee) {
empFactory.employee.save({
    EmpID: $routeParams.EmpID,
    Employee: employee
}, function (response) {
    // do something with your success response
})

};

for Delete :

 $scope.UpdateEmp = function () {
 empFactory.employee.delete({
     EmpID: $routeParams.EmpID
 }, function (response) {
     // do something with your success response
 })

};

for update :

  $scope.UpdateEmp = function (employee) {
  empFactory.employee.update({
      EmpID: $routeParams.EmpID,
      Employee: employee
  }, function (response) {
      // do something with your success response
  })

};

Answer 3

This is my service with multiple resource statements. Its close what you have initially shared as well

var resource = {
        employee:
            $resource('../../Employee/GetEmployee/:EmpID', { EmpID: '@EmpID' },
           {
               show: { method: 'GET' }

           }),
        empUpdate:
            $resource('../../Employee/PutEmployee/:EmpID', { EmpID: '@EmpID', empval: '@empl' }, { update: { method: 'PUT', isArray: true } }),
        empDelete:
            $resource('../../Employee/DeleteEmployee/:EmpID', { EmpID: '@EmpID' }, { del: { method: 'DELETE', isArray: true } }),

        empCreate:
            $resource('../../Employee/CreateEmployee', { empval: '@empl' }, { create: { method: 'POST', isArray: true } })
    }

    return resource;

Now i have another problem that my angular js views are not updating and i posted it in stackoverflow. if you help it would be great

Angular JS CRUD update not refreshing