如何在ajax调用中传递具有列表类型属性的对象

时间:2018-07-18 12:17:20

标签: javascript c# jquery asp.net-mvc cart

我知道之前曾问过This type of question,但我不知道如何用已经提供的答案解决问题。甚至不知道在哪里写那些ModelBinder代码。所以我只描述我的问题。 我有一个视图,该视图被强类型化为具有列表属性(关联关系)的模型。

public class Sales
{
    public int SalesSl { get; set; }
    public double TotSalAmt { get; set; }
    public double TotCashRec { get; set; }
    public double TotVat { get; set; }
    public double TotDiscnt { get; set; }
    public int CustomerSupplyId { get; set; }
    public int ProductId { get; set; }
    public double SalesRt { get; set; }
    public double SalesQty { get; set; }
    public double PurchaseRt { get; set; }
    public double ProductDisAmt { get; set; }
    public double ProductVat { get; set; }
    public double LaborCost { get; set; }
    public string SalesNote { get; set; }
    public int SalesIndex { get; set; }
    public List<AddedProductView> AddedProductViews { get; set; }

    public Sales()
    {
        AddedProductViews = new List<AddedProductView>();
    }
}
  [Serializable]
public class AddedProductView
{       
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public double Quantity { get; set; }
    public double Unit { get; set; }
    public string UnitDescription { get; set; }
    public double Rate { get; set; }
    public double Vat { get; set; }
    public double Discount { get; set; }
    public double NetAmount { get; set; }
    public double Total { get; set; }
    public int SalesIndex { get; set; }
}

现在,当我将销售模型传递给视图时,我没有问题。它显示了AddedProductViews中已经包含的所有产品。 视图:

<form id="SalesModForm">
    <div>
        <div class="col-md-9 col-md-offset-0 panel panel-success">
            <div class="panel-heading">
                Purchase Product
            </div>
            <div class="panel panel-success">
                @Html.HiddenFor(model => model.IndexSl)
            <table>
                <tr>
                    <td>
                        @Html.TextBoxFor(model => model.SalesSl, null, new { style = "width:120px" })
                    </td>
                    <td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.CustSupplyId)
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.CustSupplyId, null, new { style = "width:120px" })
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(model => model.ProductId) <p class="indent"></p>
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model.ProductId, null, new { style = "width:120px" })
                    </td>
                    <td>
                        @Html.Label("Qty")
                        @Html.TextBoxFor(model => model.SalesQty, null, new { style = "width:60px" })
                    </td>
                    <td>
                        @Html.Label("Rate")
                        @Html.TextBoxFor(model => model.SalesRt, null, new { style = "width:60px" })
                    </td>
                    <td>
                        <input type="button" value="Add" id="btnAddToCartMod" style="width:100px" />
                    </td>
                </tr>
            </table>
            <hr />
            <table border="1">
                <thead>
                    <tr>
                        <th>Product Name</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                        <th>Rate</th>
                        <th>Total</th>
                        <th>Vat</th>
                        <th>Discount</th>
                        <th>Net Amount</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (AddedProductView sIAM in Model.AddedProductViews)
                    {
                        <tr>
                            <td>
                                @sIAM.ProductName
                            </td>
                            <td>
                                @sIAM.Quantity
                            </td>
                            <td>
                                @sIAM.Unit
                            </td>
                            <td>
                                @sIAM.Rate
                            </td>
                            <td>
                                @sIAM.Total
                            </td>
                            <td>
                                @sIAM.Vat
                            </td>
                            <td>
                                @sIAM.Discount
                            </td>
                            <td>
                                @sIAM.NetAmount
                            </td>
                            <td>
                                @Html.ActionLink("Remove", "UpdateProductInfo", new { salesSl = @Model.SalesSl, productId = @sIAM.ProductId, salesDt = @Model.SalesDt })
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>           

<div>
  <input type="submit" value="Sale" class="btn btn-success" id="btnSalesMod" />
</div>

当我单击删除AcionLink 时,模型数据(sales.AddedProductViews)已更改。现在,当我单击 btnSalesMod 时,我希望在以下脚本的帮助下保存修改后的销售数据。

 <script>
    $(document).ready(function () {
        $('#btnAddToCartMod').click(function () {
            var data = $('#SalesModForm').serialize();
            $.ajax({
                type: 'Post',
                url: '/Sales/Index',
                data: data,
                success: function () {
                    window.location = '/Sales/Index';
                }
            });
        });
    });
</script>

但是,当我调试时,除sales的计数外,所有销售数据都已接收到控制器的 ActionResult 参数。AddedProductViews计数为0,这意味着该参数未收到AddedProductViews属性的任何值。 在控制器中:

[HttpPost]
    public ActionResult Index(Sales sales)
    {
        //no data in sales.AddedProductViews
        //sales.AddedProductViews count = 0;
        return View();
    }

所以,现在我的问题是如何获取视图中AddedProductViews中的数据。

或者还有其他方法可以将AddedProductViews数据传递给控制器​​吗? 任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:2)

您需要查看模型绑定在MVC中的工作方式。当您使用任何HTML Helper时,该控件的名称将设置为used model属性。例如

@Html.TextBoxFor(model => model.SalesSl, null, new { style = "width:120px" })

将使用type="text"name="SalesSl"渲染输入元素,当您将表单发布回服务器时,带有name="SalesSl"的控件的值将绑定到名为Model的属性SalesSl

但是当您使用如下所示的内容时:

<td>@sIAM.ProductName</td>

没有创建名称设置为“模型特性”名称的控件。

您需要使用for循环而不是foreach循环,并且在循环中,您需要对要提交回服务器的每个AdditionalProductView属性执行以下操作:

<td>
    @Html.Hidden("AddedProductViews[@index].ProductName", @Model.AddedProductViews[index].ProductName);
    @Model.AddedProductViews[index].ProductName
</td>

这些链接应该会有所帮助: