在使用jQuery表中添加一行whic在MVC模式连接 [英] Add row in table with jquery whic connected with model in mvc
问题描述
我有这样的表，显示了从服务器值。
我怎样才能用jQuery在这个表中添加新行，如果我要发送的值从表服务器
＆LT;表ID =产品类=产品＆GT;
＆所述; TR＆GT;
＆LT;第i和产品编号LT; /第i
＆LT;第i产品名称和LT; /第i
＆LT;第i个数量＆LT; /第i
＆LT;第i个单价和LT; /第i
＆LT; / TR＆GT; @for（INT I = 0; I＆LT; Model.NorthOrderDetails.Count;我++）
{
＆所述; TR＆GT;
@ Html.HiddenFor（M = GT; m.NorthOrderDetails [I] .ProductID）
@ Html.HiddenFor（M = GT; m.NorthOrderDetails [I] .ProductName）
＆LT; TD＆GT; @ Html.DisplayFor（M = GT; m.NorthOrderDetails [I] .ProductID）LT; / TD＆GT; ＆LT; TD＆GT; @ Html.DisplayFor（M = GT; m.NorthOrderDetails [I] .ProductName）LT; / TD＆GT; ＆LT; TD＆GT;＆LT;输入类型=隐藏的名字=NorthOrderDetails.IndexVALUE =@我/＆GT; ＆LT; / TD＆GT; ＆所述; TD＆GT; @ Html.TextBoxFor（M = GT; m.NorthOrderDetails [I] .Quantity）LT; / TD＆GT; ＆所述; TD＆GT; @ Html.TextBoxFor（M =＆GT; m.NorthOrderDetails [Ⅰ] .UnitPrice，的String.Format（{0}，Model.NorthOrderDetails [I] .UnitPrice））≤; / TD＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮级=删除数据ID =@ Model.NorthOrderDetails [I] .ProductID＆GT;删除＆LT; /按钮＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
}
＆LT; /表＆gt;
您可以使用 BeginCollectionItem HTML帮手你的模型来生成具有独特的索引藏品并且允许后回绑定到集合的局部视图。注意：你有没有注明物业 NorthOrderDetails 类型，但形成你的previous的问题，我认为它的 NorthOrderDetails.cs
为 NorthOrderDetails.cs
查看/ YourController / _NorthOrderDetails.cshtml
@model NorthOrderDetailscs
@using（Html.BeginCollectionItem（））
{
＆所述; TR＆GT;
@ Html.HiddenFor（M = GT; m.ProductName）
＆LT; TD＆GT; @ Html.DisplayFor（M = GT; m.ProductID）LT; / TD＆GT;
＆LT; TD＆GT; @ Html.DisplayFor（M = GT; m.ProductName）LT; / TD＆GT;
＆LT; TD＆GT; @ Html.TextBoxFor（M = GT; m.Quantity）LT; / TD＆GT;
＆LT; TD＆GT; @ Html.TextBoxFor（M = GT; m.UnitPrice）LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮级=删除数据ID =@ Model.ProductID＆GT;删除＆LT; /按钮＆GT;
@ Html.HiddenFor（M = GT; m.ProductID）
@ Html.HiddenFor（M = GT; m.ProductName）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
}
旁注：
- 不得包含隐藏的输入
首页 - 的
＆LT;输入＆GT;不是一个有效的孩子＆LT; TR＆GT;元素（放置隐藏内输入的＆LT; TD＆GT;元素 -
的String.Format（{0}，Model.NorthOrderDetails [I] .UnitPrice做
绝对没有（如果你想格式化为（比方说）货币，那么
这将是@ Html.TextBoxFor（M = GT; m.UnitPrice。{0：C}））
您现在可以删除为循环在主视图，以
＆LT;表ID =产品类=产品＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i和产品编号LT; /第i
＆LT;第i产品名称和LT; /第i
＆LT;第i个数量＆LT; /第i
＆LT;第i个单价和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
@foreach（在Model.NorthOrderDetails VAR项）
{
@ Html.Partial（_ NorthOrderDetails项）
}
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
这会产生一些额外的HTML（用于现有项目的索引是一个的Guid 而非 INT ），但它意味着你只需要一个地方来维护code。
然后在主视图中，添加下面的脚本为您的添加按钮
＆LT;按钮式=按钮ID =添加＆gt;添加＆LT; /按钮＆GT;
＆LT;脚本＆GT;
VAR tableBody = $（'＃产品TBODY'）;
VAR URL ='@ Url.Action（添加，YourControllerName）'; //调整，以适应
$（'＃加'）。点击（函数（）{
$获得（'URL，函数（响应）{
tableBody.append（响应）;
}）;
}）;
＆LT; / SCRIPT＆GT;
和控制器方法
公共PartialViewResult添加（）
{
VAR模型=新NorthOrderDetailscs（）;
返回PartialView（_ NorthOrderDetails）;
}
最后，如果您使用的是客户端验证（jQuery的 - 验证 - unobtrusive.js）和 @ Html.ValidationMessageFor（）与你的财产，那么你需要重新每次添加新的元素到DOM -parse验证器作为<一个解释href=\"http://stackoverflow.com/questions/26542509/validate-dynamically-added-fields/26542591#26542591\">this回答。
I have this table and shows values from server. How I can with jquery add new row in this table if I want to sent values from table to Server
<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>
You can use the BeginCollectionItem html helper a partial view for your model to generate collection items with unique indexers and allow binding to the collection on post back. Note you have not indicate the type of property NorthOrderDetails, but form your previous questions, I assume its NorthOrderDetails.cs
Create a partial for 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>
}
Side notes:
- Do not include the hidden input for the
Index - An
<input>is not a valid child of a<tr>element (place the hidden inputs inside a<td>element String.Format("{0}", Model.NorthOrderDetails[i].UnitPricedoes absolutely nothing (If you wanted to to format it as (say) currency, then it would be@Html.TextBoxFor(m => m.UnitPrice. "{0:C}"))
You can now remove the for loop in the main view and replace with
<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>
This will generate a bit of extra html (the indexers for the existing items are a Guid rather than an int) but it means you only have one place to maintain your code.
Then in the main view, add the following script for your 'Add' button
<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>
And the controller method
public PartialViewResult Add()
{
var model = new NorthOrderDetailscs();
return PartialView("_NorthOrderDetails");
}
Finally, if you are using client side validation (jquery-validate-unobtrusive.js), and @Html.ValidationMessageFor() with your properties, then you need re-parse the validator each time you add new elements to the DOM as explained in this answer.
这篇关于在使用jQuery表中添加一行whic在MVC模式连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
