使用jquery在表中添加与MVC中的模型相关的行

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

为创建一个局部 NorthOrderDetails.cs

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

旁注：

1. 不包括 Index
2. An<input>不是<tr>元素的有效子元素（将隐藏的输入放置在<td>元素内
3. 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（现有项的索引器是aGuid而不是a 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时都需要重新解析验证器，如本答案所述。