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

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

 @for (int i = 0; i < Model.NorthOrderDetails.Count; i++) {  @Html.HiddenFor(m => m.NorthOrderDetails[i].ProductID) @Html.HiddenFor(m => m.NorthOrderDetails[i].ProductName)  } 
 
 
ProductId
 
Productname
 
Quantity
 
UnitPrice
 
@Html.DisplayFor(m => m.NorthOrderDetails[i].ProductID)
 
@Html.DisplayFor(m => m.NorthOrderDetails[i].ProductName)
 
 
 
 @Html.TextBoxFor(m => m.NorthOrderDetails[i].Quantity) 
 
 @Html.TextBoxFor(m => m.NorthOrderDetails[i].UnitPrice, String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice))
 
 Delete
  

Answer 1

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

为NorthOrderDetails.cs创建一个部分

Views/YourController/_NorthOrderDetails.cshtml

 @model NorthOrderDetailscs @using(Html.BeginCollectionItem()) {  @Html.HiddenFor(m => m.ProductName) @Html.DisplayFor(m => m.ProductID) @Html.DisplayFor(m => m.ProductName) @Html.TextBoxFor(m => m.Quantity) @Html.TextBoxFor(m => m.UnitPrice)  Delete @Html.HiddenFor(m => m.ProductID) @Html.HiddenFor(m => m.ProductName)   } 

附注：

1. 不要包含Index的隐藏输入
2. 不是


   元素的有效子元素（将隐藏的输入放在

   元素中

3. String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice什么都不做（如果你想把它格式化为（比方说）货币，那么它就是@Html.TextBoxFor(m => m.UnitPrice. "{0:C}") ）

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

  @foreach(var item in Model.NorthOrderDetails) { @Html.Partial("_NorthOrderDetails", item) } 
 
 
 
ProductId
 
Productname
 
Quantity
 
UnitPrice
 
 
 
  

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

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

 Add 

和控制器方法

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

最后，如果您使用客户端validation（jquery-validate-unobtrusive.js）和@Html.ValidationMessageFor()以及您的属性，那么每次向DOM添加新元素时都需要重新解析validation器，如这个答案 。