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

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

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

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

从视图发送对象

2 个答案: