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

Displaying values in row of table from existing item in new row

本文关键字：项目 新行中 显示      更新时间：2023-09-26

我有一个表：。

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

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

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

当我单击添加按钮时，我在控制器中调用此方法：

[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

它的原因是什么？

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

  1. 在 GET 方法中，获取集合并将其呈现在视图中。
  2. 在Delete()方法中，调用数据库并删除对象基于 ID 值。如果成功，则return Json(true); ，如果不成功 return Json(null); .在 ajax 成功函数中，测试数据是否返回，如果是，请删除该行，如果没有，则显示错误消息（请参阅我在这里和这里回答你之前的问题）。
  3. View2()方法应将集合保存到数据库（删除 string button 参数）并且不应有与Add方法的关系。

为了将新项动态添加到可以绑定到集合的 DOM 中，有两个选项：

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

本答案中讨论了这两个选项。另请注意，每次添加新项目时都需要重新解析验证器。

相关文章：