在表格行中顯示新行中現有項目的值

Question

我有一張桌子：

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

當我刪除第一行，然后添加新行時，我得到表

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

是什么原因呢？

Answer 1

您首先需要刪除與在會話中存儲和檢索集合有關的所有內容。 工作流程應為

1. 在GET方法中，獲取集合並將其呈現在視圖中。
2. 在Delete()方法中，調用數據庫並根據ID值刪除對象。 如果成功，則return Json(true); ，如果不return Json(null); 。 在ajax成功函數中，測試是否返回了數據，如果是，則刪除該行，如果沒有返回，則顯示錯誤消息（請在此處和此處將我對先前問題的回答）。
3. View2()方法應該將集合保存到數據庫中（刪除string button參數），並且應該與Add方法沒有關系。

為了將新項目動態添加到可以綁定到您的集合的DOM，兩個選項是：

1. 調用一個方法，該方法返回使用BeginCollectionItem（）的局部函數，以便新項包含索引器（與您當前的for循環所用的方法相同）。 如果使用此方法，則可以用一個簡單的foreach循環替換for循環，該循環調用每個項目的partial。
2. 在視圖中（隱藏元素內部）包含一個html模板，您可以克隆它並更新Indexer並將其添加到DOM。

在此答案中討論了這兩種選擇。 還要注意，每次添加新項時都需要重新解析驗證器。