如何使用 mvc 中的部分视图将唯一 ID 分配给动态添加的行

Question

过去也有人问过类似的问题，但我发现很难找到这个问题的解决方案。

我有一个简单的局部视图如下

@model MemberSiteAddressModel
<tr>
    <td>@Html.EditorFor(x => x.Site) </td>
    <td>@Html.EditorFor(x => x.AddressLine1)</td>
    <td>@Html.EditorFor(x => x.AddressLine2)</td>
    <td>@Html.EditorFor(x => x.City)</td>
    <td>@Html.EditorFor(x => x.PostCode)</td>
</tr>

我的主视图通过 ajax 调用加载局部视图，如下所示。我需要为任何新添加的行（因为我需要在任何选定的行上添加更多详细信息）和字段提供唯一 ID，以便我可以使用模型活页夹

<table id="businessSitesTable" class="table table-responsive">
   <tr>
    <th>Site Name</th>
    <th>Address Line 1</th>
    <th>Address Line 2</th>
    <th>City</th>
    <th>PostCode</th>
  </tr>
 </table>

<script>
function LoadPartial() {
        $.ajax({
            type: "GET",
            url: "/Home/AddNewRow",
            content: "application/html; charset=utf-8",
            success: function(data) {                   
                $("#sitesTable").append(data);
            },
            error: function(xhr, textStatus, errorThrown) {

            }
        });
}

<input id="addBtn" type="button" value="Add Row" onclick="LoadPartial(); return false;" />

Answer 1

您不妨从客户端模板开始（您克隆的隐藏行）。您正在 Ajax- 获得一组 空控件 ，这非常浪费。

由于您没有 post 返回整个 table，我假设一次只返回一行，您根本不需要字段上的 ID，只需要名称。

使用 @Html.Partial 内联呈现单个模板虚拟记录，或者直接将您想要的 HTML 插入模板：

<table id="template" style="display:none">
    <tr>
        <td><input name="Site"/></td>
        <td><input name="AddressLine1"/></td>
        <td><input name="AddressLine2"/></td>
        <td><input name="City"/></td>
        <td><input name="PostCode"/>)</td>
        <td><input type="button" class="saverow" value="Save"/></td>
    </tr>
</table>

注意：如果您决定通过 @Html.Partial 注入，因为它使用 EditorFor，您将需要从克隆中完全删除 ID。

然后在添加按钮按下时像这样使用：

function LoadPartial() {
    $("#sitesTable").append($('#template').html());
}

save 选项（您未显示）然后应将行中的所有输入和 Ajax post 作为 data 属性.这使用了一个委托事件处理程序，附加到一个不变的祖先元素。

$(document).on('click', '.saverow', function(){
     vare $tr = $(this).closest('tr');
     // $ajax put call of the current row's fields here
});

选择器在 事件时间 运行，因此它将与动态元素一起使用。

注意：请不要将内联事件处理程序与 jQuery 混合使用。只需执行事件 "the JQuery way"，这样 事件注册 就不会与 事件处理程序 :

分开

 $('#addBtn').click(function(){
     $("#sitesTable").append($('#template').html());
 });

这比内联处理程序更容易维护，并且支持多个处理程序和其他很酷的 jQuery 事件功能 :)

Answer 2

你在这里使用 "id" 令人困惑，因为我真的认为你在谈论列表的索引。如果您希望能够实际接收为这些动态添加的项目发布的值，则必须正确索引输入名称。我没有你的视图模型可以使用，但一般来说生成的 HTML 必须看起来像：

<input type="text" name="BusinessSites[0].Site" />

您将遇到的主要问题是在从页面中添加/删除项目时保持此索引更新。要尽可能轻松高效地执行此操作，您应该使用一些可以处理模型绑定的客户端库 HTML（Knockout、Angular 等），或者您可以使用非顺序索引作为Phil Haack's post Model Binding to a List.

中描述

如何使用 mvc 中的部分视图将唯一 ID 分配给动态添加的行

how to assign unique id's to dynamically added row using partial views in mvc

asp.net-mvc

jquery

asp.net-mvc-4