使用与MVC中的模型连接的jquery在表中添加行

我有这个表,并显示来自服务器的值.
如果我想将表中的值发送到服务器,如何使用 jquery在此表中添加新行

<table id="Products" class="Products">
    <tr>
        <th>ProductId</th>
        <th>Productname</th>
        <th>Quantity</th>
        <th>UnitPrice</th>
    </tr>

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

            <td>@Html.DisplayFor(m => m.NorthOrderDetails[i].ProductName)</td>

            <td><input type="hidden" name="NorthOrderDetails.Index" value="@i" /> </td>

            <td> @Html.TextBoxFor(m => m.NorthOrderDetails[i].Quantity) </td>

            <td> @Html.TextBoxFor(m => m.NorthOrderDetails[i].UnitPrice,String.Format("{0}",Model.NorthOrderDetails[i].UnitPrice))</td>
            <td>
                <button type="button" class="delete" data-id="@Model.NorthOrderDetails[i].ProductID">Delete</button></td>
        </tr>
    }
</table>

解决方法

您可以使用 BeginCollectionItem html帮助程序为模型创建部分视图,以生成具有唯一索引器的集合项,并允许在回发时绑定到集合.请注意,您没有指明属性NorthOrderDetails的类型,但是形成您之前的问题,我假设它的NorthOrderDetails.cs

为NorthOrderDetails.cs创建一个部分

查看/ YourController / _NorthOrderDetails.cshtml

@model NorthOrderDetailscs
@using(Html.BeginCollectionItem()) 
{
  <tr>
    @Html.HiddenFor(m => m.ProductName)
    <td>@Html.DisplayFor(m => m.ProductID)</td>
    <td>@Html.DisplayFor(m => m.ProductName)</td>
    <td>@Html.TextBoxFor(m => m.Quantity)</td>
    <td>@Html.TextBoxFor(m => m.UnitPrice)</td>
    <td>
      <button type="button" class="delete" data-id="@Model.ProductID">Delete</button>
      @Html.HiddenFor(m => m.ProductID)
      @Html.HiddenFor(m => m.ProductName)
    </td>
  </tr>
}

附注：

>不要包含索引的隐藏输入
><输入>不是< tr>的有效子项element(将隐藏的输入放在< td>元素中
> String.Format(“{0}”,Model.NorthOrderDetails [i] .UnitPrice
绝对没有(如果你想把它格式化为(比方说)货币,那么
它将是@ Html.TextBoxFor(m => m.UnitPrice.“{0：C}”))

您现在可以在主视图中删除for循环并替换为

<table id="Products" class="Products">
  <thead>
    <tr>
      <th>ProductId</th>
      <th>Productname</th>
      <th>Quantity</th>
      <th>UnitPrice</th>
    </tr>
  </thead>
  <tbody>
    @foreach(var item in Model.NorthOrderDetails)
    {
      @Html.Partial("_NorthOrderDetails",item)
    }
  </tbody>
</table>

这将产生一些额外的html(现有项的索引器是Guid而不是int),但这意味着你只有一个地方来维护你的代码.

然后在主视图中,为“添加”按钮添加以下脚本

<button type="button" id="add">Add</button>

<script>
  var tableBody = $('#Products tbody');
  var url = '@Url.Action("Add","YourControllerName")'; // adjust to suit
  $('#add').click(function() {
    $.get('url,function(response) {
      tableBody.append(response);
    });
  });
</script>

和控制器方法

public PartialViewResult Add()
{
  var model = new NorthOrderDetailscs();
  return PartialView("_NorthOrderDetails");
}

最后,如果您使用客户端验证(jquery-validate-unobtrusive.js)和@Html.ValidationMessageFor()以及您的属性,那么每次向DOM添加新元素时都需要重新解析验证器,如this answer.

使用与MVC中的模型连接的jquery在表中添加行

解决方法

猜你在找的jQuery相关文章