使用jquery在表中添加与MVC中的模型相关的行 [英] Add row in table with jquery which is connected with model in MVC

问题描述

我有此表，并显示服务器中的值. 如果我要将表中的值发送到服务器，如何使用jquery在该表中添加新行

I have this table and shows values from the server. How I can with jquery add a new row in this table if I want to send values from the table to the Server

<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>
            @Html.HiddenFor(m => m.NorthOrderDetails[i].ProductID)
            @Html.HiddenFor(m => m.NorthOrderDetails[i].ProductName)
            <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" /> </td>

            <td> @Html.TextBoxFor(m => m.NorthOrderDetails[i].Quantity) </td>

            <td> @Html.TextBoxFor(m => m.NorthOrderDetails[i].UnitPrice, String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice))</td>
            <td>
                <button type="button" class="delete" data-id="@Model.NorthOrderDetails[i].ProductID">Delete</button></td>
        </tr>
    }
</table>    

推荐答案

您可以使用 BeginCollectionItem html帮助模型的局部视图生成具有唯一索引器的集合项，并允许在回发时绑定到集合.请注意，您没有指出属性NorthOrderDetails的类型，但是在您之前的问题中，我假设其为NorthOrderDetails.cs

You can use the BeginCollectionItem html helper a partial view for your model to generate collection items with unique indexers and allow binding to the collection on post back. Note you have not indicate the type of property NorthOrderDetails, but form your previous questions, I assume its NorthOrderDetails.cs

为NorthOrderDetails.cs

Views/YourController/_NorthOrderDetails.cshtml

@model NorthOrderDetailscs
@using(Html.BeginCollectionItem()) 
{
  <tr>
    @Html.HiddenFor(m => m.ProductName)
    <td>@Html.DisplayFor(m => m.ProductID)</td>
    <td>@Html.DisplayFor(m => m.ProductName)</td>
    <td>@Html.TextBoxFor(m => m.Quantity)</td>
    <td>@Html.TextBoxFor(m => m.UnitPrice)</td>
    <td>
      <button type="button" class="delete" data-id="@Model.ProductID">Delete</button>
      @Html.HiddenFor(m => m.ProductID)
      @Html.HiddenFor(m => m.ProductName)
    </td>
  </tr>
}

旁注:

1. 不包括Index
的隐藏输入
2. <input>不是<tr>元素的有效子元素(将隐藏的输入放置在<td>元素内
3. String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice确实 绝对没有(如果您想将其格式化为(例如)货币，那么 应该是@Html.TextBoxFor(m => m.UnitPrice. "{0:C}"))

1. Do not include the hidden input for the Index
2. An <input> is not a valid child of a <tr> element (place the hidden inputs inside a <td> element
3. String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice does absolutely nothing (If you wanted to to format it as (say) currency, then it would be @Html.TextBoxFor(m => m.UnitPrice. "{0:C}"))

您现在可以在主视图中删除for循环并替换为

You can now remove the for loop in the main view and replace with

<table id="Products" class="Products">
  <thead>
    <tr>
      <th>ProductId</th>
      <th>Productname</th>
      <th>Quantity</th>
      <th>UnitPrice</th>
    </tr>
  </thead>
  <tbody>
    @foreach(var item in Model.NorthOrderDetails)
    {
      @Html.Partial("_NorthOrderDetails", item)
    }
  </tbody>
</table>

这会产生一些额外的html(现有项目的索引器是Guid而不是int)，但这意味着您只有一个位置来维护代码.

This will generate a bit of extra html (the indexers for the existing items are a Guid rather than an int) but it means you only have one place to maintain your code.

然后在主视图中，为添加"按钮添加以下脚本

Then in the main view, add the following script for your 'Add' button

<button type="button" id="add">Add</button>

<script>
  var tableBody = $('#Products tbody');
  var url = '@Url.Action("Add", "YourControllerName")'; // adjust to suit
  $('#add').click(function() {
    $.get('url, function(response) {
      tableBody.append(response);
    });
  });
</script>

和控制器方法

public PartialViewResult Add()
{
  var model = new NorthOrderDetailscs();
  return PartialView("_NorthOrderDetails");
}

最后，如果您正在使用客户端验证(jquery-validate-unobtrusive.js)，并且将@Html.ValidationMessageFor()与属性一起使用，则每次将新元素添加到DOM时，都需要重新解析验证器，如此答案.

Finally, if you are using client side validation (jquery-validate-unobtrusive.js), and @Html.ValidationMessageFor() with your properties, then you need re-parse the validator each time you add new elements to the DOM as explained in this answer.

这篇关于使用jquery在表中添加与MVC中的模型相关的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！