我有这个表并显示来自服务器的值。 如果我想将表中的值发送到服务器,如何使用 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 帮助器是模型的部分 View ,用于生成具有唯一索引器的集合项,并允许在回发时绑定(bind)到集合。请注意,您尚未指明属性 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>
}
旁注:
- 请勿包含
Index
的隐藏输入 - 安
<input>
不是<tr>
的有效子级元素(将隐藏输入放置在<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>
以及 Controller 方法
public PartialViewResult Add()
{
var model = new NorthOrderDetailscs();
return PartialView("_NorthOrderDetails");
}
最后,如果您使用客户端验证 (jquery-validate-unobtrusive.js),并且 @Html.ValidationMessageFor()
有了你的属性,那么每次向 DOM 添加新元素时都需要重新解析验证器,如 this answer 中所述。 .
关于jquery - 使用 jquery 在表中添加与 MVC 中的模型连接的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29028298/