Jquery脚本删除表单中的所有项目'；的收藏

本文关键字：项目 收藏 脚本 删除 表单 Jquery | 更新日期: 2024-10-19 08:48:45

我有一个表：

<% 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" /> 
<% } %>

当我点击删除按钮时，我调用这个脚本：

<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>

脚本在控制器中调用此方法

[HttpPost]
public JsonResult Delete(int ID)
{
    NorthOrder forOrderDetail = (NorthOrder)Session["Order"];
    forOrderDetail.NorthOrderDetails.RemoveAll(z => z.ProductID == ID);
    Session["Order"] = forOrderDetail;
    return Json(null);
}

在UI中，当我单击提交按钮时，该行将正确删除。但是在控制器方法中，当我删除第一行时，集合的计数等于null，而当我删除最后一行时，它等于1例如，当页面加载时，表包含两行

public ActionResult View2(NorthOrder q,  string button)
{
}

为什么？

Jquery脚本删除表单中的所有项目'；的收藏

因为您删除了一些行，但在Save提交操作中返回了整个集合，所以索引器要么不是从零开始，要么是不连续的。在删除第一行的情况下，公布的值为

NorthOrderDetails[1].Quantity=SomeValue&NorthOrderDetails[1].UnitPrice=SomeOtherValue

NorthOrderDetails[0]...没有值，因此绑定失败，集合为空。

默认情况下，DefaultModelBinder要求集合索引器从零开始并且是非连续的。当您删除一个项并从DOM中删除其控件时，无法正确绑定集合。为了实现这一点，您需要添加一个额外的隐藏输入，DefaultModelBinder使用该输入来匹配集合属性。将视图代码更改为

% 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>
<% } %>

注意：我早就忘记了aspx，但隐藏输入的剃刀代码是<input type="hidden" name="NorthOrderDetails.Index" value="@i" />，所以你可能想检查一下我的语法。

旁注：

  1. 你在这里使用会话似乎不合适。在Delete中方法，您正在删除该项。当您最终保存集合，您需要从数据库，并对它们进行比较以确定要在数据库相反，Delete()方法应该调用数据库以删除项目（请参阅我对您以前的回答问题）
  2. 您的Add按钮不应该是提交并发布到CCD_ 9方法
相关文章：