javascript - 显示新行中现有项目的表行中的值

Question

我有一张 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++)
    {%>
      <%: Html.HiddenFor(m => m.NorthOrderDetails[i].ProductID) %>
      <%: Html.HiddenFor(m => m.NorthOrderDetails[i].ProductName) %>
      <tr>
        <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 %>" />
          <%: 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="<%: Model.NorthOrderDetails[i].Quantity %>" /></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 when I click the delete button I'm calling this script:
    });
  });
</script>

并且脚本在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);
}

当我单击添加按钮时，我在 Controller 中调用此方法:

[HttpPost]
public ActionResult View2(NorthOrder q,  string button)
{
  string strDDLValue = Request.Form["sda"].ToString();
  int drop = Convert.ToInt32(strDDLValue);
  NorthOrder forOrderDetail = (NorthOrder)Session["Order"];
  if (button == "Add")
  {
    NorthwindEntities n = new NorthwindEntities();
    string strDDLValuse = n.Products.FirstOrDefault(_ => _.ProductID == drop).ProductName;
    NorthOrderDetailscs orddetailForSession = new NorthOrderDetailscs();
    orddetailForSession.ProductName = strDDLValuse;
    orddetailForSession.Quantity = 0;
    orddetailForSession.UnitPrice = 0;
    orddetailForSession.ProductID = drop;
    forOrderDetail.NorthOrderDetails.Add(orddetailForSession);
    Session["Order"] = forOrderDetail;
  }
  return View(forOrderDetail); //
}

当我删除第一个项目时以及添加新项目后，问题的结论是在非删除项目的文本框中的新行中显示数据。虽然，在模型中添加项目包含文本框的空值

在新项目中的输入隐藏字段 Model.NorthOrderDetails[i].Quantity = 0 中，与在标记中的调试一样，但在文本框中的 UI 中，文本框中的新项目包含现有项目的值

例如，在表中两行

ProductID | ProductName| Quantity| UnitPrice
_____________________________________________
17       |   Chang      |       1       |  12
_____________________________________________
12      |   Chai     |       2      |  24

当我删除第一行，然后添加新行时 我得到 table

ProductID | ProductName| Quantity| UnitPrice
_____________________________________________
12    |   Chai   |    2    |  24
_____________________________________________
15   |   Allice Mutton    |       2      |  24

这是什么原因？

Answer 1

您首先需要删除与在 session 中存储和检索集合相关的所有内容。工作流程应该是

1. 在 GET 方法中，获取集合并将其呈现在 View 中。
2. 在Delete()方法中，调用数据库并删除对象 基于 ID 值。如果成功，返回Json(true);，如果不成功 返回 Json(null);。在ajax成功函数中，测试数据是否 返回，如果有，则删除该行，如果没有，则显示错误信息(引用 我对您之前问题的回答here和 here )。
3. View2() 方法应将集合保存到数据库 (删除字符串按钮参数)并且应该没有 与 Add 方法的关系。

为了动态地将新项目添加到可以绑定(bind)到您的集合的 DOM 中，有两个选项:

1. 调用一个返回部分的方法，该方法使用 BeginCollectionItem()以便新项目包含索引器 (与当前的 for 循环的方式相同)。如果你使用 这个方法，那么你可以用一个简单的替换你的 for 循环 foreach 循环，调用每个项目的部分内容。
2. 在 View 中(隐藏元素内)包含一个 html 模板 您克隆并更新索引器并将其添加到 DOM。

这两个选项均在 this answer 中讨论。 。另请注意，每次添加新项目时都需要重新解析验证器。