ASP.NET MVC + jQuery 탭을 사용하여 일대 다 관계 가져 오기

Question

jQuery tab을 사용하는 섹션이있는 양식이 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); 
    } 

,174,

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

는 각, 하나는, 헤더합니다 (<li><a> 요소)을 생성하는 2 개 루프를 사용하여 컬렉션에 Family 한 내용에 대한합니다 (<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> 
} 

사이드 참고 : 현재 스크립트에서는 '추가'버튼을 클릭하면 Family 기존의 수에 따라 올바른 id 속성과 관련된 단편 식별자를 생성합니다 너무

var familyTabCounter = @index 

를 사용하여 familyTabCounter를 설정해야 컬렉션에.