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

时间:2017-09-18 19:48:03

标签: javascript c# angularjs asp.net-web-api

我正在尝试将一个整数和字符串参数从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控制器中的代码如下:

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

    // 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":"请求的资源不支持http方法' POST'。"}

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

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

我得到了这个错误:

  

{" message":"请求无效。"," messageDetail":"参数字典包含参数&的空条目#39; ID'非可空类型的System.Int32' for method' System.Web.Http.IHttpActionResult MyTestMethod(Int32,System.String)'在' MyController'。可选参数必须是引用类型,可以为空的类型,或者声明为可选参数。"}

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

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

2 个答案:

答案 0 :(得分:1)

好吧,我就是这样做的

服务器

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

答案 1 :(得分:1)

好的,这是我从控制器向服务传递对象的示例,该服务使用$ 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]

我仍然不知道为什么没有方括号就行不通,也许其他人可以解释原因。