从视图发送对象答案

【问题标题】：Send an Object from the View从视图发送对象
【发布时间】：2013-07-25 14:23:47
【问题描述】：

我有一个从产品列表中填充的表，我使用 jquery 在表中添加了一个新行，我想要从这个新行创建一个新产品并将其添加到列表中。

这是产品型号：

    public class Product
    {
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public decimal Price { get; set; }
    public int ProductState { get; set; }
    }

显示产品列表的索引模型视图：

    public class BillViewModel
    {
    public SelectList ClientList { get; set; }
    public int SelectedClient { get; set; }
    public SelectList ProductList { get; set; }
    public int ProductSelected { get; set; }
    public List<Product> ListProducts { get; set; }
    public List<Client> ListClients { get; set; }
    }

这是视图，隐藏字段是我点击post时发送产品列表：

<table id="tabla">


    @for (int i = 0; i < Model.ListProducts.Count(); i++)
    {
        <tr>
            <td>
                @Html.DisplayFor(model => model.ListProducts[i].ProductName)
                @Html.HiddenFor(model => model.ListProducts[i].ProductName)
            </td>

        </tr>
    }       

</table>

从下拉列表中选择一个新产品并将名称附加到表中：

<script type="text/javascript">
$('#submit').click(function() {
    $('#tabla').append('<tr><td>' + $('#select option:selected').text() + '</tr>');
});

问题是如何将此行（产品名称）添加到产品列表中。

我在考虑使用 ajax 或单击添加后执行操作并再次呈现视图。有没有办法通过 jquery 添加它而不使用 ajax 或转到操作链接？

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

唯一的方法是POST 表单，然后在ActionResult 中添加新项目。

【讨论】：

我使用一个部分视图来添加新项目，我可以向部分视图添加一个表单来执行将新项目添加到列表中的操作。
这不是使用jquery将新项目添加到属性ListProducts的方法吗？
我不知道通过客户端脚本更改模型的简单方法。

【解决方案2】：

我找到了解决办法：

这个想法是在表格的一行中附加一个隐藏字段。

    var rowCount = $('table tr').length;
    $('#tabla').append('<tr><td> <input type="hidden" value=' + $("#select    option:selected").text() + ' name="ListProducts['+ rowCount +'].ProductName"> </td></tr>');

这样做，模型会获取隐藏字段的值。隐藏字段有索引列表，就像 mvc 发送对象列表：

        @for (int i = 0; i < Model.ListProducts.Count(); i++)
        {
        <tr>
            <td>
                @Html.DisplayFor(model => model.ListProducts[i].ProductName)

                @Html.HiddenFor(model => model.ListProducts[i].ProductName)
            </td>
        </tr>
        }

通过隐藏我将对象添加到模型的列表中。

【讨论】：