使用AngularJS $http get方法将对象作为参数传递给ASP.NET Web Api

Question

我正在尝试使用传递给服务器端的过滤对象从服务器获取筛选数据。我已经成功地通过post实现了这一点。

angular:

var filter: { includeDeleted: true, foo: bar };
$http({ method: 'post', url: 'api/stuff', data: filter });

web api:

public IEnumerable<StuffResponse> Post([FromBody]Filter filter)
{
    return GetData(filter);
}

但我不想使用POST，我想使用GET。但是这样做不起作用：

angular

$http({ method: 'get', url: 'api/stuff', params: filter });

web api

public IEnumerable<StuffResponse> Get([FromUri]Filter filter)
{
    return GetData(filter);
}

尝试指定参数：{filter：filter}。 如果我尝试 [FromBody] 或不用任何修饰符，filter 将为 null。使用 FromUri 至少可以获得一个对象-但是没有数据。有什么解决方法吗？而不需要为所有 filter 属性创建输入参数？

- Trylling

---

我认为你不能将数据传递给 GET 方法。 - Ramesh Rajendran

只需删除[FromUrl]属性，并确保在Filter类中，includeDeleted作为公共属性存在，它就可以工作了。 - Prashant Lakhlani

标准媒体类型格式化程序无法实现此操作。需要使用自定义媒体类型格式化程序。请参见http://www.codeproject.com/Articles/701182/A-Custom-Model-Binder-for-Passing-Complex-Objects - Chandermani

Answer 1

您可以通过使用 Get 方法并使用 params 选项来发送数据。

var data ={
  property1:value1,
  property2:value2,
  property3:value3
};

$http({ method: 'GET', url: 'api/controller/method', params: data });

通过在您的API控制器方法中使用[FromUri]，您将收到这个。

public IEnumerable<StuffResponse> Get([FromUri]Filter filter)
{
    return GetData(filter);
}

请求的URL将会像这样

http://localhost/api/controller/method?property1=value1&property2=value2&property3=value3

- Ibrahim Kais Ibrahim

Answer 2

Solved it this way:

Angular:

$http({
       url: '/myApiUrl',
       method: 'GET',
       params: { param1: angular.toJson(myComplexObject, false) }
      })

C#：

[HttpGet]
public string Get(string param1)
{
     Type1 obj = new JavaScriptSerializer().Deserialize<Type1>(param1);
     ...
}

- Vildan

Answer 3

一份 HTTP GET 请求不能包含要发送到服务器的数据。您需要将查询字符串添加到请求中。幸运的是，angular.http 提供了一个名为 params 的选项来实现这一点。

请参见：http://docs.angularjs.org/api/ng/service/$http#get。

- Ramesh Rajendran

---

正如您在“get”示例中看到的那样，我正在使用“params”。我可以看到过滤器对象被转换为请求中的URL参数 - 但服务器无法将其反序列化为筛选器对象。 - Trylling

Filter是一个类名，所以你不能这样做，不能在查询字符串中传递类，因此你需要将类更改为字符串、整数、浮点数等。 - Ramesh Rajendran

Vil的答案在我看来提供了更清晰的解决方案。 - testpattern

Answer 4

你可以使用Get或Post方法发送对象。

脚本

//1.
var order = {
     CustomerName: 'MS' };
//2.
var itemDetails = [
     { ItemName: 'Desktop', Quantity: 10, UnitPrice: 45000 },
     { ItemName: 'Laptop', Quantity: 30, UnitPrice: 80000 },
     { ItemName: 'Router', Quantity: 50, UnitPrice: 5000 }
];
//3.
$.ajax({
     url: 'http://localhost:32261/api/HotelBooking/List',
     type: 'POST',
     data: {order: order,itemDetails: itemDetails},
     ContentType: 'application/json;utf-8',
     datatype: 'json'
    }).done(function (resp) {
        alert("Successful " + resp);
    }).error(function (err) {
        alert("Error " + err.status);});

API 代码

[Route("api/HotelBooking/List")]
[HttpPost]
public IHttpActionResult PostList(JObject objData)
{  List<ItemDetails > lstItemDetails = new List<ItemDetails >();
   dynamic jsonData = objData;
   JObject orderJson = jsonData.itemDetails;
   return Ok();}

- sanjeewa

---

那是一个POST请求。它能用GET请求吗？而且它不是Angular JS。 - Norbert Norbertson