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

Question

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

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

视图：

@inherits ViewBase<MyApp.MobileOrderOrderViewModel>
<!DOCTYPE html>
<html>
<body>
    @using (Html.BeginForm())
    {
        <table>
            @for (int i = 0; i < Model.Products.Count; i++)
            {
                <tr>
                    <td>@Model.Products[i].Id</td>
                    <td>
                        @Html.HiddenFor(m => Model.Products[i].Id)
                        @Html.TextBoxFor(m => Model.Products[i].Quantity, new { @class="quantity", type = "number", min = 0 })
                    </td>
                </tr>
            }
        </table>
        <input type="submit" value="Send order">
        @Html.HiddenFor(m => Model.CustomerId)
    }


<script>
    $(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);
        });
    })
</script>

ViewModel：

public class MobileOrderOrderViewModel : ViewModelBase
{
    public string CustomerId { get; set; }

    public List<OrderedItems> 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<OrderedItems> products) {
   // Why  products.Count() is 0 here ?
  ...
   }
}

更新资料

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

chrome显示请求类型为

内容类型：application / x-www-form-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);
 });

比使用JSON.stringify(products)代替serializeArray() JSON.stringify(products)

更新

尝试使用以下方法将其发布到服务器：

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-30 20:53:01

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-30 20:53:01

解决方案1
0 已采纳 2014-12-30 20:53:01