jQuery脚本删除表的集合中的所有项目 [英] Jquery script delete all items in form's collection
问题描述
我有一个表：
＆LT;使用（Html.BeginForm（视图2，订单））％
{％GT;
＆LT;表ID =产品类=产品＆GT;
＆所述; TR＆GT;
＆LT;第i和产品编号LT; /第i
＆LT;第i产品名称和LT; /第i
＆LT;第i个数量＆LT; /第i
＆LT;第i个单价和LT; /第i
＆LT; / TR＆GT;
＆LT;％的for（int i = 0; I＆LT; Model.NorthOrderDetails.Count;我++）
{％GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;％：Html.Label（Model.NorthOrderDetails [I] .ProductID.ToString（））％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％：Html.Label（Model.NorthOrderDetails [I] .ProductName）％GT; ＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％：Html.TextBoxFor（M = GT; m.NorthOrderDetails [I] .Quantity）％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％：Html.TextBoxFor（M = GT; m.NorthOrderDetails [I] .UnitPrice）％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;按钮式=按钮级=删除数据-ID =＆LT;％：Model.NorthOrderDetails [I] .ProductID％GT;＆GT;删除＆LT; /按钮＆GT;＆LT; TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=隐藏的名字=＆LT;％：Model.NorthOrderDetails [I] .ProductName％GT;值=＆LT;％：我％GT; /＆GT;＆下; TD＆GT;
＆所述; TR＆GT;
＆LT;％}％GT;＆LT; /表＆gt;
＆LT;输入类型=提交名称=按钮值=添加/＆GT;
＆LT;输入类型=提交名称=按钮值=保存/＆GT;
＆LT;％}％GT;
当我点击删除按钮我打电话此脚本：
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR URL ='＆LT;％：Url.Action（删除，订单）％GT;';
$（'删除'）。点击（函数（）{
VAR ID = $（本）。数据（ID）; //获取产品ID
VAR行= $（本）.closest（'TR'）; //获取表行
$。员额（URL，{ID：ID}，函数（）{
row.remove（）; //从表中删除的行
}）;
}）; ＆LT; / SCRIPT＆GT;
和脚本调用这个方法在控制器
[HttpPost]
公共JsonResult删除（INT ID）
{
NorthOrder forOrderDetail =（NorthOrder）会议[订单];
forOrderDetail.NorthOrderDetails.RemoveAll（Z =＆GT; z.ProductID == ID）;
会话[订单] = forOrderDetail; 返回JSON（NULL）;
}
在UI行正确删除当我点击提交按钮。但在控制器方法收集等于空的计数，当我删除第一行，它等于1，当我删除最后一行
例如，表中包含的两行加载页面时
公众的ActionResult视图2（NorthOrder Q，弦钮）
{
}
为什么？
由于您要删除一些行，但回发在整个集合保存提交操作，你的索引可能是没有启动一个零，或者是不连续的。在删除第1行的情况下，帐值
有没有值 NorthOrderDetails [0] ... 这样的绑定失败，集合为空。
默认情况下， DefaultModelBinder 需要收集索引来从零开始，并是不连续的。当你删除一个项目，从DOM删除其控制，集合无法正确绑定。为了使这项工作，你需要添加一个额外的隐藏输入该 DefaultModelBinder 用来匹配集合属性。更改视图code到
％的for（int i = 0; I＆LT; Model.NorthOrderDetails.Count;我++）
{％GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;％：Html.DisplayFor（M = GT; m.NorthOrderDetails [I] .ProductID）％GT;＆LT; / TD＆GT; //删除的ToString（）
＆LT; TD＆GT;＆LT;％：Html.DisplayFor（M = GT; m.NorthOrderDetails [I] .ProductName）％GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;输入类型=隐藏的名字=NorthOrderDetails.IndexVALUE =＆LT;％：我％GT; /＆GT; //添加此
＆LT;％：Html.TextBoxFor（M = GT; m.NorthOrderDetails [I] .Quantity）％GT;
＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;％：Html.TextBoxFor（M = GT; m.NorthOrderDetails [I] .UnitPrice）％GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;按钮式=按钮级=删除数据-ID =＆LT;％：Model.NorthOrderDetails [I] .ProductID％GT;＆GT;删除＆LT; /按钮＆GT;＆LT; TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=隐藏的名字=＆LT;％：Model.NorthOrderDetails [I] .ProductName％GT;值=＆LT;％：我％GT; /＆GT;＆下; TD＆GT;
＆所述; TR＆GT;
＆LT;％}％GT;
注：我早已忘记ASPX，但剃刀code为隐藏输入＆LT;输入类型=隐藏的名字=NorthOrderDetails.IndexVALUE =@我 /方式＆gt; ，所以你可能要检查我的语法
旁注：
- 您使用session似乎不妥这里。在
删除
方法，要删除的项目。当你终于救
收集，你需要从一开始的原始集合
数据库并加以比较，以确定在要删除的项
数据库。相反，你删除（）方法应该调用
数据库删除的项目（见我的回答你的<一个href=\"http://stackoverflow.com/questions/28849296/set-value-submit-from-collection-submit-mvc\">$p$pvious
问题） - 您
添加按钮不应该是，一个提交并发布到视图2（）方法。
I have a table:
<% using(Html.BeginForm("View2","Order"))
{ %>
<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>
<td><%: Html.Label(Model.NorthOrderDetails[i].ProductID.ToString()) %></td>
<td><%: Html.Label(Model.NorthOrderDetails[i].ProductName) %> </td>
<td><%: Html.TextBoxFor(m => m.NorthOrderDetails[i].Quantity) %></td>
<td><%: Html.TextBoxFor(m => m.NorthOrderDetails[i].UnitPrice) %></td>
<td><button type="button" class="delete" data-id="<%:Model.NorthOrderDetails[i].ProductID %>">Delete</button><td>
<td><input type="hidden" name="<%:Model.NorthOrderDetails[i].ProductName %>" value="<%:i %>" /><td>
<tr>
<% } %>
</table>
<input type="submit" name="button" value="Add" />
<input type="submit" name="button" value="Save" />
<% } %>
When I click the delete button I'm calling this script:
<script type="text/javascript">
var url = '<%:Url.Action("Delete", "Order")%>';
$('.delete').click(function () {
var id = $(this).data('id'); // Get the product ID
var row = $(this).closest('tr');// Get the table row
$.post(url, { ID: id }, function () {
row.remove(); // remove the row from the table
});
});
</script>
And the script call this method in the Controller
[HttpPost]
public JsonResult Delete(int ID)
{
NorthOrder forOrderDetail = (NorthOrder)Session["Order"];
forOrderDetail.NorthOrderDetails.RemoveAll(z => z.ProductID == ID);
Session["Order"] = forOrderDetail;
return Json(null);
}
In the UI the row deletes correctly when I click on the submit button. But In the controller method the count of the collection equal null when I delete the first row, and it's equals to 1 when I delete the last row For example, table contains two rows when page loaded
public ActionResult View2(NorthOrder q, string button)
{
}
Why?
Because you are deleting some rows, but posting back the whole collection in the Save submit action, your indexers are either not starting a zero, or are non consecutive. In the case of deleting the 1st row, the posted values are
NorthOrderDetails[1].Quantity=SomeValue&NorthOrderDetails[1].UnitPrice=SomeOtherValue
There are no values with NorthOrderDetails[0]... so binding fails and the collection is empty.
By default, the DefaultModelBinder require collection indexers to start at zero and be non-consecutive. When you delete an item and remove its controls from the DOM, the collection cannot be bound correctly. To make this work you need to add an extra hidden input which the DefaultModelBinder uses to match up collection properties. Change the view code to
% for(int i=0; i < Model.NorthOrderDetails.Count; i++)
{%>
<tr>
<td><%: Html.DisplayFor(m => m.NorthOrderDetails[i].ProductID) %></td> // Remove the .ToString()
<td><%: Html.DisplayFor(m => m.NorthOrderDetails[i].ProductName) %></td>
<td>
<input type="hidden" name="NorthOrderDetails.Index" value="<%: i %>" /> // add this
<%: Html.TextBoxFor(m => m.NorthOrderDetails[i].Quantity) %>
</td>
<td><%: Html.TextBoxFor(m => m.NorthOrderDetails[i].UnitPrice) %></td>
<td><button type="button" class="delete" data-id="<%:Model.NorthOrderDetails[i].ProductID %>">Delete</button><td>
<td><input type="hidden" name="<%:Model.NorthOrderDetails[i].ProductName %>" value="<%:i %>" /><td>
<tr>
<% } %>
Note: I have long forgotten aspx, but the razor code for the hidden input is <input type="hidden" name="NorthOrderDetails.Index" value="@i" /> so you may want to check my syntax.
Side notes:
- Your use of session seems inappropriate here. In the
Deletemethod, you are removing the item. When your finally save the collection, you would need to get the original collection from the database and compare them to determine which items to delete in the database. Instead, youDelete()method should be calling the database to delete the item (refer my answer to your previous question) - Your
Addbutton should not be, a submit and posting to theView2()method.
这篇关于jQuery脚本删除表的集合中的所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
