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

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

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

视图：

WebAPI控制器：

    public class OrderController :ApiController
    {

        public HttpResponseMessage Post(string customerid, [FromBody]List<OrderedItems> products) {
   // Why  products.Count() is 0 here ?
  ...
   }
}

---

问题在于数据序列化

为了正确装订，必须采用以下格式：

"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);
 });

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

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

而不是使用JSON.stringifyproducts

更新

尝试通过以下方式将其发布到服务器：

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

---

在这种情况下，您不必字符串化产品对象，因为.$post也支持普通对象

谢谢。我根据答案更改了代码，但问题仍然存在。缓冲区包含json，但请求类型是www URLENCODED，这可能会混淆web API I更新的问题。@Andrus尝试使用$.ajax和pass application/json作为内容类型。@Alex Art。我试图将普通对象作为.post第二个参数传递。在这种情况下，未定义：如果在post缓冲区中过账，但未过账任何数据。@ImranRashid，谢谢。$。ajax与application/json一起工作。在视图中用foreach替换for循环可以吗？这使得代码更简单一些。在这种情况下，可能名称没有索引，可以简化表单数据解析吗？如何在请求期间在屏幕中央显示进度指示器？@Andrus是的，现在不再需要索引，您可以安全地使用foreach循环。您可以在执行ajax请求时显示微调器。请参阅

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

       products.push(product);
 });

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