带有 ASP.NET MVC 的 Angular JS Put 方法

Question

我为 Put 和 Get 方法定义了这样的角度控制器。我是角度 JS 的新手。 get 方法按预期工作，但未调用 Put 方法。我遵循了其中一个教程并实施了。尽管在教程中，他们使用的是 REST 服务 URL 而不是控制器方法。我在这里使用 MVC 控制器而不是 webAPI 控制器。

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);
        }

这是我的角度工厂和控制器方法

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

您在 MVC 控制器中在哪里提到该方法是 PUT，除非您提到方法类型 HttpPut 或 HttpPost 等，否则它们将被视为 HttpGet，在您的 MVC 控制器中将该方法称为 PUT 方法，然后重试。

像这样装饰你的 MVC PUT 方法：

[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);
    }

工厂和控制器应该是这样的：

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

您想以一种非常好的方式做到这一点，但为此您应该使用 WEB Api 控制器。

Web Api 控制器应该是这样的：

    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);
    }
}

考虑以下资源，它可以执行四个操作。它们是获取、发布、放置和删除。 ：

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

       });

}
return resource;

在这样的控制器中使用你的资源，获取：

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

发帖：

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

};

删除：

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

};

更新：

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

};

Answer 3

这是我的服务，包含多个资源语句。它也接近你最初分享的内容

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;

现在我有另一个问题，我的 Angular js 视图没有更新，我将它发布在 stackoverflow 中。如果你能帮上忙就好了

Angular JS CRUD update not refreshing