jquery - 从视图发送对象

Question

我有一个从产品列表中填充的表，使用 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; }
    }

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

<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 或转到操作链接？

Answer 1

我找到了解决方案：

这个想法是将行内的隐藏字段附加到表中。

    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>
        }

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

Answer 2

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