在 table 中添加与 MVC 中的模型相关的 jquery 行

Question

我有这个 table 并显示来自服务器的值。如果我想将值从 table 发送到服务器

，我如何使用 jquery 在此 table 中添加一个新行

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

Answer 1

您可以使用 BeginCollectionItem html 助手为您的模型生成局部视图，以生成具有唯一索引器的集合项，并允许绑定到 post 后面的集合。请注意，您没有指明属性 NorthOrderDetails 的类型，但根据您之前的问题，我假设它是 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>
}

旁注：

不包括 Index
<input> 不是 <tr> 元素的有效子元素（将隐藏输入放入 <td> 元素
String.Format("{0}", Model.NorthOrderDetails[i].UnitPrice 确实绝对没有（如果你想将其格式化为（比如说）货币，那么它将是 @Html.TextBoxFor(m => m.UnitPrice. "{0:C}"))

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

<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），但这意味着您只有一个地方需要维护你的代码。

然后在主视图中，为您的 'Add' 按钮添加以下脚本

<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() 与您的属性一起使用，那么您每次都需要重新解析验证器您按照 this answer.

中的说明向 DOM 添加新元素

在 table 中添加与 MVC 中的模型相关的 jquery 行

Add row in table with jquery which is connected with model in MVC

asp.net-mvc

jquery

razor