ASP.NET MVC + Получение отношения один ко многим с помощью вкладки jQuery

Question

У меня есть форма, в которой есть раздел, где она использует вкладку jQuery, созданную BeginCollectionItem. Это делается отношениями один-ко-многим. Я могу создать несколько вкладок в форме и отправить ее (newForm.cshtml). Однако, когда дело доходит до редактирования, особенно когда мне нужно получить форму (с несколькими вкладками, заполненными информацией), я как бы застрял здесь.

Так что сценарий прост. У меня есть таблица, которая показывает список отправленных форм и могу щелкнуть ссылку редактирования строки, чтобы отредактировать эту извлеченную форму. На данный момент я могу получить только имя в NewForm, но другие имена, связанные с вкладками семейства, не извлекаются.

Модель:

public class NewForm
{
    public int NewFormId { get; set; }
    public string Name { get; set; }

    public ICollection<Family> Families{ get; set; }
}

public class Family
{
    public int FamilyId { get; set; }
    public string Name { get; set; }   

    public int NewFormId { get; set; }
    public virtual NewForm NewForm{ get; set; }
}

Edit.cshtml:

@model Test.Models.NewForm

@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
    <p>Your Name</p>
    @Html.EditorFor(m => m.Name)

    <button type="button" id="addFamily" name="addFamily">Add Family</button>

    <div id="tabs">
        <ul>
            <li><a href="#tabs-family">Family 1</a></li>
        </ul>
        <div id="tabs-family">             
            @Html.Action("AddNewFamily", "NewForm")
        </div>         
    </div>

    <button type="submit">Save</button>
}

<script>
$(function () {
    var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
        familyTabCounter = 2,        

    var tabs = $("#tabs").tabs();     

    $('#addFamily').on('click', function (event) {
        $.ajax({
            url: '/NewForm/AddNewFamily',
        }).success(function (partialView) {
            addTab(partialView, this.url);
        });
        event.preventDefault();
    });       

    // Actual addTab function: adds new tab using the input from the form above
    function addTab(partialView, url) {
        if (url == "/NewForm/AddNewFamily") {
            var label = "Family " + familyTabCounter,
                id = "tabs-family" + familyTabCounter,
                li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label));

            tabs.find(".ui-tabs-nav").append(li);
            tabs.append("<div id='" + id + "'><p>" + partialView + "</p></div>");
            tabs.tabs("refresh");
            familyTabCounter++;
        }
    } 
});   
</script>

Family.cshtml:

@model Test.Models.Family

<div class="editorRow">
    @using (Html.BeginCollectionItem("families"))
    {
        @Html.EditorFor(m => m.Name)     
    }
</div>

контроллер:

public PartialViewResult AddNewFamily()
    {
        return PartialView("~/Views/NewForm/PartialView/Family.cshtml");
    }

public ActionResult Edit(int? id)
    {           
        NewForm form = db.NewForms
           .Include(i => i.Families) 
           .Where(x => x.NewFormId == id)
           .Single();         

        return View(form);
    }

Как я могу получить информацию для семейств (вкладок), связанных с newForm?

редактировать

@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
<p>Your Name</p>
@Html.EditorFor(m => m.Name)

<button type="button" id="addFamily" name="addFamily">Add Family</button>

@{int number = 1;}
    @foreach (var family in Model.Families)
    {
    <div id="tabs">
        <ul>
            <li><a href="#tabs-family">Family @number</a></li>
        </ul>
        <div id="tabs-family">    
            @Html.Partial("../NewForm/Family", family)   
        </div>        
    </div>
        number++;
    }

<button type="submit">Save</button>
}

Я размышлял над советом Стивена, и поиск нескольких семей работает, но теперь я столкнулся с другой проблемой, заключающейся в том, что я не могу создать каждую вкладку для каждой семьи. Я пытался с моим кодом, но он создает вкладку, но она находится в странном месте. Какие-либо предложения?

Answer 1

Вам нужно создать вкладки для каждого Family в вашей коллекции, используя 2 цикла, один для создания заголовков (<li><a> элементы), и один для содержания (<div> элементы.

Обратите внимание, что ваша текущая реализация генерирует дубликат id атрибуты, и вы должны убедиться, что каждый контент <div> имеет уникальный id атрибут, и что связанный заголовок <a> элемент имеет соответствие href значение.

@model Test.Models.NewForm
@{
    // Initialize values for loops
    int index = 1;
    int count = Model.Families.Count() + 1;
}
@using (Html.BeginForm("Edit", "NewForm", FormMethod.Post))
{
    <p>Your Name</p>
    @Html.EditorFor(m => m.Name)

    <button type="button" id="addFamily" name="addFamily">Add Family</button>

    <div id="tabs">
        <ul>
            // Create the tab header for each Family
            @for(int i = index; i < count; i++)
            {
                // Generate unique fragment identifier
                string id = String.Format("#family-{0}", i);
                <li><a href="@id">Family @i</a></li>
            }
        </ul>
        // Create the content (partial view) for each Family
        @foreach(var family in Model.Families)
        {
            // Generate unique ID
            string id = String.Format("family-{0}", index);
            <div id="@id">             
                @Html.Partial("Family", family)
            </div>
            index++;
        }    
    </div>
    <button type="submit">Save</button>
}

Примечание: в вашем текущем скрипте вам нужно установить familyTabCounter с помощью

var familyTabCounter = @index

так что нажатие на кнопку "Добавить" будет генерировать правильный id атрибут и связанный идентификатор фрагмента на основе количества существующих Family в коллекции.