顯示父子關係查看MVC 4

Question

我有一個示範課程，組件和子組件：

public class Course 
    { 
     public virtual int CourseId { get; set; } 
     public virtual string Name { get; set; } 
     public virtual List<Component> Components { get; set; } 
} 

public class Component 
    { 
     public virtual int ComponentId { get; set; } 
     public virtual int CourseId { get; set; } 

     public virtual string Type { get; set; } 
     public virtual string Name { get; set; } 

     public virtual Course Course { get; set; } 

     public virtual List<Subcomponent> Subcomponents { get; set; } 

} 

public class Subcomponent 
    { 
     public virtual int SubcomponentId { get; set; } 
     public virtual int ComponentId { get; set; } 

     public virtual string TypeSub { get; set; } 
     public virtual string NameSub { get; set; } 

     public virtual int ParentId { get; set; } 
     public virtual Subcomponent Parent { get; set; } 
     public virtual List<Subcomponent> Childs { get; set; } 

     public virtual Component Component { get; set; } 

} 

子組件具有父子關係，從而每個子可以有多個subsubcomponents等。我有一個表格來顯示所有組件及其子組件，但是當我到達子組件時，如果我爲該子組件創建子組件，它將獲得相同的級別。當我們如何創建空間或其他子組件的子組件時，可以區分層次結構？我已經搜索並嘗試了很多方法，但沒有爲我工作。我應該爲子組件創建一個局部視圖，然後在主視圖的視圖中調用它？ 在視圖中，我有這樣的：

@model SGP.Models.Course 

<div> 
    <table> 
     <tr> 
      ... 
     @foreach (var item in Model.Components) 
     { 
      <td> 
       @Html.DisplayFor(modelItem => item.Name) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Type) 
      </td> 
      ... 
@if (item.Subcomponents.Count != 0) 
     { 
     <table> 
      ... 
       @foreach (var x in item.Subcomponents) 
         { 
          if (x.ParentId == 0) { 
           <td> 
            >> 
           </td> 
           ... 


    @foreach (var y in x.Childs) { 
            <td> 
(subsubcomponents and subsubsubcomponents and so on stay in this level always) 
             >>>> 
            </td> 
            ... 

編輯： 控制器：

public ActionResult Planificacao(int id = 0) 
     { 
      Course course = db.Courses.Find(id); 
      if (course == null) 
      { 
       return HttpNotFound(); 
      } 

      return View(course); 
     } 

Answer 1

你絕對可以使用此部分景色，我可能會推薦它。我們的想法是創建一個遞歸遍歷Component.Subcomponent採集和輸出迭代一些HTML每個子組件和它的子組件（童車）

我寫了一個@helper，您可以添加到一個視圖，向您展示它如何做完了。

@helper BuildSubTree(List<HelloWorldMvcApp.Subcomponent> subcomps) { 
    if (subcomps != null && subcomps.Any()) { 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <td>Subcomponent Id</td> 
        <td>Type Sub</td> 
        <td>Name Sub</td> 
       <tr> 
      </thead> 
      <tbody> 
      @foreach (var sub in subcomps) 
      { 
       <tr> 
        <td>@sub.SubcomponentId</td> 
        <td>@sub.TypeSub</td> 
        <td>@sub.NameSub</td> 
       </tr> 
       if (sub.Childs != null && sub.Childs.Any()) 
       { 
        <tr> 
         <td colspan="3">@BuildSubTree(sub.Childs)</td> 
        </tr> 
       } 
      } 
      </tbody> 
     </table> 
    }   
} 

然後在您的視圖中，您可以像這樣調用此幫助器。

<table class="table"> 
    <thead> 
     <tr> 
      <th>Course ID</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>@Model.CourseId</td> 
      <td>@Model.Name</td> 
     </tr> 
     @foreach (var comp in Model.Components) { 
      <tr> 
       <table class="table table-bordered"> 
        <thead> 
         <tr> 
          <th>Component Id</th> 
          <th>Type</th> 
          <th>Name</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>@comp.ComponentId</td> 
          <td>@comp.Type</td> 
          <td>@comp.Name</td> 
         </tr> 
         @if (comp.Subcomponents.Any()) 
         { 
          <tr> 
           <td colspan="3"> 
            @BuildSubTree(comp.Subcomponents) 
           </td> 
          </tr> 
         } 
        </tbody> 
       </table> 
      </tr> 
     } 
    </tbody> 
</table> 

我創建了一個DotNetFiddle向你展示它如何能夠協同工作。