如何將多個簡單的參數從AngularJS傳遞到Web API（使用$ resource）

Question

我想將一個整數和字符串參數從AngularJS客戶端傳遞到ASP.NET Web API服務器，而不使用POCO類來包裝參數英寸我試過以下內容：

我想傳遞的參數是「ID」，這是一個整數，「名稱」，一個字符串。

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

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

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控制器？我知道我可以將這兩個參數包裝在一個值對象中，並將其以這種方式傳遞給Web API，但這對我來說在這一點上是不必要的複雜性。應該有一個簡單的方法來做到這一點。

我已經完成了這兩個或三個整數參數沒有問題，但由於某種原因一個整數和字符串不起作用。任何意見，將不勝感激。這是應該很簡單的事情之一，但顯然不是。

Answer 1

確定這裏就是我傳遞的對象從控制器到服務的例子，和服務使用$資源

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]。

我仍然不知道爲什麼沒有方括號不起作用，也許別人可以解釋爲什麼。

Answer 2

好，我做這種方式

服務器

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