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

【问题标题】：ASP.NET MVC Partial view not loading within same view pageASP.NET MVC 部分视图未在同一视图页面中加载
【发布时间】：2014-01-29 23:03:47
【问题描述】：

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

要添加我关注的第一个表： 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。单击添加计划链接时，表格中的计划编辑器行会正确地动态添加到表单内的同一主视图中。

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

我猜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 的意思？

【问题讨论】：

标签： jquery html asp.net-mvc razor partial-views

【解决方案1】：

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

【讨论】：

好的，我已经添加了显示我认为你的意思的 JS...请让我知道否则

【解决方案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
});

希望对你有所帮助。

【讨论】：