在新行现有的项目显示在表格的行值 [英] Displaying values in row of table from existing item in new row

问题描述

我有一个表：

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

和脚本调用这个方法在控制器

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);
}

当我点击添加按钮我打电话控制器此方法：

When I click the add button I'm calling this method in 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); //
}

和问题总结从nondeleting项目，当我删除了第一个项目显示在文本框中新行数据，之后我增加新项目。虽然，在模型中加入项目包含文本框空值

and problem concludes displaying data in new row in textboxes from nondeleting item, when I deleted the first item, and after I added new item. Although, in model adding item contains null values for textboxes

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

In input hidden field Model.NorthOrderDetails[i].Quantity = 0 in new item, as in debug as in markup, but in UI in textbox new item in textbox contains values from existing item

例如，在表中的两行

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

当我删除第一行，然后我加入新行
我得到表

When I delete first row, and then I add new row I get table

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

什么是它的原因是什么？

What is reason of it?

推荐答案

您首先需要删除有关存储和检索会话您的收藏一切。工作流程应

You first need to remove everything relating to storing and retrieving your collection in session. The workflow should be

1. 在GET方法，得到收集并呈现在视图中。


2. 在删除（）方法，调用数据库和删除对象
   基于该ID值。如果成功的话，返回JSON（真）; ，如果不
   返回JSON（NULL）; 。在阿贾克斯成功的功能，测试，如果数据是
   返回，如果是这样，删除该行，如果没有，显示错误消息（参照
   我的回答你的previous问题<一href=\"http://stackoverflow.com/questions/28849296/set-value-submit-from-collection-submit-mvc\">here和<一个href=\"http://stackoverflow.com/questions/28886230/jquery-script-delete-all-items-in-forms-collection\">here).


3. 的视图2（）方法应收集保存到数据库
   （删除弦钮参数），并应无
   关系到添加方法。

1. In the GET method, get the collection and render it in the view.
2. In the Delete() method, call the database and delete the object based on the ID value. If successful, return Json(true);, if not return Json(null);. In the ajax success function, test if data was returned, if so, delete the row, if not, display error message (refer my answer to your previous questions here and here).
3. The View2() method should save the collection to the database (remove the string button parameter) and should have no relationship to an Add method.

在为新项目动态添加到可以绑定到您的收藏DOM中，有两个选项：

In order to dynamically add a new item to the DOM which can be bound to your collection, two options are:

1. 调用返回的部分，使用的方法
   BeginCollectionItem（），使新项目包括一个索引
   （以同样的方式，你的电流为循环正在做）。如果你使用
   这种方法，那么你可以用一个简单的更换你的为循环
   的foreach 循环调用该部分的每一个项目。


2. 在视图中包括（一个隐藏的元素中），一个HTML模板
   克隆和更新索引，并将其添加到DOM。

1. Call a method that returns a partial that uses BeginCollectionItem() so that the new item includes an indexer (in the same way that your current for loop is doing). If you use this method, then you could replace your for loop with a simple foreach loop that calls the partial for each item.
2. Include a html template in the view (inside a hidden element) that you clone and update the Indexer and add it to the DOM.

这两个选项在<一个讨论href=\"http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308\">this回答。也请注意，需要每次添加新项目时重新解析验证。

Both options are discussed in this answer. Note also the need to re-parse the validator each time a new item is added.

这篇关于在新行现有的项目显示在表格的行值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！