如何从表单提交将产品和数量传递给ASP.NET MVC4 Web API

ASP.NET MVC4应用程序允许输入订购的产品数量并将它们传递给Web API控制器。

控制器接收空产品列表作为产品参数。 调试器显示数据已发布。 如何重构视图以便产品可以传递给Web API？

视图：

@inherits ViewBase    @using (Html.BeginForm()) {  @for (int i = 0; i < Model.Products.Count; i++) {  } 
 
@Model.Products[i].Id
 
 @Html.HiddenFor(m => Model.Products[i].Id) @Html.TextBoxFor(m => Model.Products[i].Quantity, new { @class="quantity", type = "number", min = 0 }) 
 
  @Html.HiddenFor(m => Model.CustomerId) }  $(function () { "use strict"; var BASE_URL = '@Url.Content("~/")'; $("form").submit(function (ev) { var elementsToSend = []; ev.preventDefault(); var quantityElements = $("input.quantity").filter(function (index, element) { if ($(this).val() != 0) { return true; } else { return false; } }); $.each(quantityElements, function (index, element) { var productIdElement = $(element).prevAll()[0]; elementsToSend.push(productIdElement); elementsToSend.push(element); }); var dataToPost = $(elementsToSend).serializeArray(); $.post(BASE_URL + "api/Order?" + $.param({ klient: $("#CustomerId").val() }), dataToPost); }); })  

视图模型：

 public class MobileOrderOrderViewModel : ViewModelBase { public string CustomerId { get; set; } public List Products { get; set; } public MobileOrderOrderViewModel( string customer ) { CustomerId = customer; ... populate Products property from database } } 

模型：

  public class OrderedItems { public string Id; public decimal Quantity; } 

WebAPI控制器：

  public class OrderController :ApiController { public HttpResponseMessage Post(string customerid, [FromBody]List products) { // Why products.Count() is 0 here ? ... } } 

更新

我根据答案更改了代码。 alert（）显示字符串采用answer中描述的格式，但products参数仍为空。

chrome显示请求类型是

内容类型：应用/ X WWW的窗体-urlencoded;

但缓冲区包含json字符串。 也许这会混淆Web API。 怎么修 ？

  $.each(quantityElements, function (index, element) { var productIdElement = $(element).prevAll()[0]; var product = { id: $(productIdElement).val(), quantity: $(element).val() }; elementsToSend.push(product); }); var dataToPost = JSON.stringify(elementsToSend); $.post(BASE_URL + "api/Order?" + $.param({ customerid: $("#CustomerId").val() }), dataToPost); 

Answer 1

问题出在数据序列化上。

为了正确绑定，必须采用以下格式：

 "products" : [ {"id":1, "quantity":20}, {"id":5, "quantity":100}, ... ] 

在您的情况下，以下代码产生错误的输出：

  $.each(quantityElements, function (index, element) { var productIdElement = $(element).prevAll()[0]; elementsToSend.push(productIdElement); elementsToSend.push(element); }); 

如果我没有错，它会产生如下：

 [ {name:"id[1]", value:1}, {name:"quantity[1]", value:20} {name:"id[2]", value:5}, {name:"quantity[2]", value:100} ... ] 

您可以通过以下方式解决此问题：

 $.each(quantityElements, function (index, element) { var productIdElement = $(element).prevAll()[0]; var product = { id : $(productIdElement).val(), quantity : $(element).val() }; products.push(product); }); 

而不是serializeArray()使用JSON.stringify(products)

UPDATE

尝试将其发布到服务器：

 $.post(BASE_URL + "api/Order?" + $("#CustomerId").val(), products); 

PS在这种情况下，您不必对stringify产品对象，因为.$post支持普通对象