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 - 得到一个空的控件集，这非常浪费。

由于您没有回发整个表格，我假设一次只有一行，您根本不需要字段上的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将它们作为data属性发布。这使用委托的事件处理程序，附加到不变的祖先元素。

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

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

注意：请不要将内联事件处理程序与jQuery混合使用。只做事件＆＃34; JQuery方式＆＃34;相反，以便事件注册不与事件处理程序分开：

 $('#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

2 个答案: