Question

在我的视图中，我必须放置几个渲染部分页面以动态地在表格中添加行（例如发票中的产品线）

要添加我遵循的第一个表： http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

我已按照链接中的说明操作，但我的主视图如下所示：

<table id="editorRows" style="width: 100%;">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </tr>

  @foreach (var item in Model.Entity.ListPlans)
  {
  Html.RenderPartial("PlanEditorRow", item);
  }

</table> 
<b><i>@Html.ActionLink("Add another plan...", "BlankPlanEditorRow", null, new { id = "addItem" })</i></b>

部分视图（PlanEditorRow）是：

@model Project.Models.Plan
@using Project.Helpers

<tr class="editorRow">
@using (Html.BeginCollectionItem("assignedPlans"))
{

    <td>
        @Html.EditorFor(x => x.Data1)
    </td>
    <td>
        @Html.EditorFor(x => x.Data2)
    </td>

    <td>
        @Html.EditorFor(x => x.Data3)
    </td>
    <td>
        <a href="#" class="deleteRow">delete</a>
    </td>
}
</tr>

我使用与上面链接相同的JavaScript。单击“添加计划”链接时，表格中的计划编辑器行将在表单中的同一主视图中正确添加。

但是当我为例如添加类似的第二个表时。如果产品具有更改的渲染部分配置并单击添加链接，则编辑器行将加载到新页面上（即仅部分视图，主视图已消失）。我使用第一个表和相同JS的相同ID和类。

我猜HTML元素ID不能相同，如果是这样我该如何解决呢？

如何确保表单中任意数量的类似表，在动态行添加方面与第一个表一样正常运行？

@Chris Pratt，我已经用过这个：

$("#addItem").click(function () {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
});
return false;
});

$("a.deleteRow").live("click", function () {
$(this).parents("tr.editorRow:first").remove();
return false;
});

在请求部分时，不确定这是否是通过AJAX添加html的意思？

Answer 1

您可以通过实际使用JavaScript来解决此问题。你只是链接到一个动作而该动作只返回渲染的部分，这就是你失去其他一切的原因。您必须通过AJAX请求部分，然后将HTML添加到页面。

Answer 2

不要使用id，而是使用类来识别对象。您可以使用包装表和链接的div：

<div class="wrapper">
    <table class="editorRows">
    ...
    </table>
    <b><i><a href="" class="addItem"></a></i></b>
</div>



$(".wrapper").on("click", ".addItem", function(evt){
    var $myTable = $(this).closest(".wrapper").find(".editorRows");
    $myTable.find("tbody").append(...); //or whatever you want to do
});

我希望这会对你有所帮助。

ASP.NET MVC部分视图未加载到同一视图页面中

2 个答案: