ASP.NET MVC Частичный вид не загружая в одной странице просмотра

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.

Я думаю, что идентификатор HTML-элемента не может быть одинаковым, если да, то как я могу его решить?

Как я могу убедиться, что любое количество похожих таблиц в форме функционирует правильно, как с первой таблицей в терминах добавления динамической строки?

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; 
}); 

Не уверен, если это то, что вы имеете в виду с добавлением HTML с помощью AJAX при запросе частичной?

Answer 1

Вы можете решить это, используя JavaScript для этого. Вы просто привязываетесь к действию, и это действие возвращает только частичное изображение, поэтому вы теряете все остальное. Вы должны запросить частичное через AJAX, а затем добавить HTML на страницу.

Answer 2

Не используйте идентификаторы, но классы, чтобы идентифицировать объекты. Вы можете использовать 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 
}); 

Я надеюсь, что это поможет вам.