Javascript 如何将多个简单参数从AngularJS传递到Web API（使用$resource）

我试图将整数和字符串参数从AngularJS客户端传递到ASP.NET Web API服务器，而不使用POCO类来封装参数。我尝试了以下方法：

var vm = this;

vm.testFunction = function (Id, Name) {
        myResource.testFunction.get({ id: Id, name: Name },
            function(response) {
                // Do something
            },

            // Handles errors
            function(error) {
                // Process error
            });
    }

我要传递的参数是“id”（一个整数）和“name”（一个字符串）

我的AngularJS服务如下所示：

function myResource($resource, myServerUrl) {

    return {
        testFunction: $resource(myServerUrl + "/api/testing/:id/:name/MethodB", null,
        {
            'get': { method: 'GET' }
        })
    };
}

AngularJS控制器中的代码如下所示：

var vm = this;

vm.testFunction = function (Id, Name) {
        myResource.testFunction.get({ id: Id, name: Name },
            function(response) {
                // Do something
            },

            // Handles errors
            function(error) {
                // Process error
            });
    }

最后，Web API控制器：

[RoutePrefix("api/testing")]
public class MyController : ApiController
{
    // This is NOT the method I am using for hit example.
    // It's a different one with a similar signature
    // so I am showing it here just in case it has
    // impact on what I am trying to do.
    [Authorize]
    [Route("{name}/{id:int}/MethodA")]
    public IHttpActionResult GetData(string name, int id)
    {
        // Do something
    }

    // This is the method I am using for this example
    [Authorize]
    [Route("{id:int}/{name}/MethodB")]
    public IHttpActionResult MyTestMethod(int id, string name)
    {
        // Do something
    } 

}

当我尝试运行上述代码时，出现以下错误：

{“message”：“请求的资源不支持http方法'GET'。”

如果我将代码更改为使用POST而不是GET，即：

testFunction: $resource(myServerUrl + "/api/testing/:id/:name/MethodB", null,
        {
            'get': { method: 'POST' }
        })

及

我明白了：

{“message”：“请求的资源不支持http方法'POST'。”

如果我修改AngularJS服务，使其在参数前面不使用冒号，即：

testFunction: $resource(myServerUrl + "/api/testing/id/name/MethodB", null,
        {
            'get': { method: 'POST' }
        })

我得到了这个错误：

{“message”：“请求无效。”，“messageDetail”：“参数字典包含方法”System.Web.Http.IHttpActionResult MyTestMethod（Int32，System.String）的非null类型“System.Int32”的参数“id”的null条目”'在'MyController'中。可选参数必须是引用类型、可为null的类型或声明为可选参数。“}

这里有什么问题？如何在不使用POCO类的情况下将整数和字符串从AngularJS传递到Web API控制器？我知道我可以将这两个参数包装在一个值对象中，并以这种方式将其传递给Web API，但这对我来说是不必要的复杂性。应该有一个简单的方法来做到这一点

我已经用两个或三个整数参数完成了这项工作，但由于某种原因，一个整数和一个字符串不起作用。如果您对此有任何建议，我们将不胜感激。这是一件应该很简单的事情，但显然不是。

我就是这样做的

服务器

[HttpGet]
        [Route("Api/Account/GetPasswordReset")]
        public dynamic GetPasswordReset(string UserName, string OldPassword, string NewPassword)
        {}

客户

$http({
            method: "GET",           
            url: CTHelper.ApiUrl() + '/Api/Account/GetPasswordReset?UserName=' + CTHelper.UserName()
                + '&OldPassword=' + $scope.CurrentPassword + '&NewPassword=' + $scope.NewPassword,
        }).then(function mySuccess(response) {

        }, function myError(response) {
             });

嗯，我是这样做的

服务器

[HttpGet]
        [Route("Api/Account/GetPasswordReset")]
        public dynamic GetPasswordReset(string UserName, string OldPassword, string NewPassword)
        {}

客户

$http({
            method: "GET",           
            url: CTHelper.ApiUrl() + '/Api/Account/GetPasswordReset?UserName=' + CTHelper.UserName()
                + '&OldPassword=' + $scope.CurrentPassword + '&NewPassword=' + $scope.NewPassword,
        }).then(function mySuccess(response) {

        }, function myError(response) {
             });

---

好的，这里有一个例子，我将一个对象从控制器传递到服务，服务使用$resource

var navApp = angular.module('navApp', [
    'ngResource',
    'ui.bootstrap',
    'ngAnimate'    
]);


navApp.controller('menuController', [
    '$scope',
    'navSectionList',
    'navGetCategories',

    function ($scope, navSectionList, navGetCategories) {
        $scope.navSectionList = navSectionList.query();
        $scope.getSectionID = function (event) {
            $scope.navGetCategories = navGetCategories
                .getResource([event])
                .query();
        };
    }
]);

navApp.factory('navSectionList', [
    '$resource',
    function ($resource) {
        return $resource('/api/navigation/section/list', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    }
]);

navApp.factory('navGetCategories', [
    '$resource',
    function ($resource) {
        var service = {
            getResource: function (sectionID) {
                return $resource('/api/navigation/category/' + sectionID, {}, {
                    query: { method: 'GET', params: {}, isArray: true }
                });
            }
        };
    return service; 
    }
]);

getSectionID

一直将

undefined

传递给

navGetCategories.getResource（）

，直到我将

event

放入一个框

[event]

---

我仍然不知道为什么没有方括号它就不能工作，也许其他人可以解释为什么

好的，下面是一个例子，我将一个对象从控制器传递到服务，服务使用$resource

var navApp = angular.module('navApp', [
    'ngResource',
    'ui.bootstrap',
    'ngAnimate'    
]);


navApp.controller('menuController', [
    '$scope',
    'navSectionList',
    'navGetCategories',

    function ($scope, navSectionList, navGetCategories) {
        $scope.navSectionList = navSectionList.query();
        $scope.getSectionID = function (event) {
            $scope.navGetCategories = navGetCategories
                .getResource([event])
                .query();
        };
    }
]);

navApp.factory('navSectionList', [
    '$resource',
    function ($resource) {
        return $resource('/api/navigation/section/list', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    }
]);

navApp.factory('navGetCategories', [
    '$resource',
    function ($resource) {
        var service = {
            getResource: function (sectionID) {
                return $resource('/api/navigation/category/' + sectionID, {}, {
                    query: { method: 'GET', params: {}, isArray: true }
                });
            }
        };
    return service; 
    }
]);

getSectionID

一直将

undefined

传递给

navGetCategories.getResource（）

，直到我将

event

放入一个框

[event]

---

我仍然不知道为什么没有方括号它就不能工作，也许其他人可以解释为什么

测试与Postman隔离的API，以确保后端工作良好这是一个已投入生产多年的API。我刚刚为我的特定场景添加了这个新方法MyTestMethod。我认为API不是问题所在。它必须与我调用它的方式有关，或者可能与我在方法MyTestMethod上定义路由的方式有关。另外，更一般的问题是，如何将整数和字符串从AngularJS传递到Web API？对于Post，我非常喜欢这个公共IHttpActionResult MyTestMethod（[FromBody]int-id）@CryingFreeman我试过了，但这对我不起作用。您能给出一个代码示例（由AngularJS控制器、AngularJS资源和Web API控制器组成）吗？测试与Postman隔离的API，以确保后端工作正常这是一个已经生产多年的API。我刚刚为我的特定场景添加了这个新方法MyTestMethod。我认为API不是问题所在。它必须与我调用它的方式有关，或者可能与我在方法MyTestMethod上定义路由的方式有关。另外，更一般的问题是，如何将整数和字符串从AngularJS传递到Web API？对于Post，我非常喜欢这个公共IHttpActionResult MyTestMethod（[FromBody]int-id）@CryingFreeman我试过了，但这对我不起作用。您能否给出一个代码示例（由AngularJS控制器、AngularJS资源和一个Web API控制器组成）？您的示例使用$http指令。我想使用$resource。您的示例使用$http指令。我想使用$resource.interest，这样您就可以在$resource服务中传递参数值。这正是我一直在寻找的，尽管昨天我确实用另一种方式解决了我的问题。我发现我的Web API方法（“上面的MyTestMethod”）找不到，因为同一类中的另一个方法具有类似的签名。一旦我将它移动到自己的新Web API控制器中，并将路由更改为独特的方式，事情就开始工作了。有趣的是，您实际上可以在$resource服务中传递参数值。这正是我一直在寻找的，尽管昨天我确实用另一种方式解决了我的问题。我发现我的Web API方法（“上面的MyTestMethod”）找不到，因为同一类中的另一个方法具有类似的签名。一旦我将它移动到自己的新WebAPI控制器中，并将路径更改为独特的方式，事情就开始起作用了。