javascript - 如何将多个简单参数从 AngularJS 传递到 Web API(使用 $resource)

Question

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

我要传递的参数是“id”，它是一个整数，“name”是一个字符串。

我的 AngularJS 服务如下所示:

function myResource($resource, myServerUrl) {

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

AngularJS Controller 中的代码如下:

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 Controller :

[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":"The requested resource does not support http method 'GET'."}

如果我更改代码以使用 POST 而不是 GET，即:

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

和

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

我明白了:

{"message":"The requested resource does not support http method 'POST'."}

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

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

我收到此错误:

{"message":"The request is invalid.","messageDetail":"The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Http.IHttpActionResult MyTestMethod(Int32, System.String)' in 'MyController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter."}

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

我已经使用两个或三个整数参数完成了此操作，没有出现任何问题，但由于某种原因，整数和字符串不起作用。任何对此的建议将不胜感激。这是应该很容易做的事情之一，但显然事实并非如此。

Answer 1

好的，这是一个示例，其中我将一个对象从 Controller 传递到服务，并且该服务使用 $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 放入框中 [事件]。

我仍然不知道为什么如果没有方括号它就不起作用，也许其他人可以解释原因。