ASP.NET MVC 4 재귀 부분 뷰를 사용하여 트리 뷰 생성

Question

강력하게 형식화 된 MVC 4 프로젝트에서 부분 뷰가 있습니다. 데이터베이스 테이블의 IEnumerable 컬렉션을 사용합니다. 이 테이블에는 레코드 간의 계층 적 연결을 저장하기위한 ID, Names 및 ParentID가 있습니다. 또한 강력하게 형식화 된 부분 뷰를 호출하는 뷰가 모델로 전체 데이터베이스를 취하고, 열거 가능한 컬렉션으로, 부분보기로 범주 테이블을 전달합니다,

@Html.Partial("_TreeCategories", @Model.Categories.ToList()) 

그리고 부분보기 내가 먼저 루트 노드를 가져 와서 재귀 적으로 전체 트리를 확장 할 수 있습니다. 데이터베이스 테이블에서 모든 레코드는 ParentID == null 인 루트 노드로 간주됩니다. 모델의 첫 번째 요소의 ParentID가 null의 경우

@model IEnumerable<TreeCollections.OpenAccess.Category> 

@if (Model.ToList().Count >= 0) 
    { 
    @if (Model.ToList()[0].Parent_id == null) 
    { 
     <text><ul id="navigation"></text> 
    } 

    @foreach (var node in @Model) 
    { 
     <li><a href="?@node.Id">@node.Name</a> 
      @foreach (var subNode in @Model.Where(s => s.Parent_id == node.Id)) 
      { 
       @Html.Partial("_TreeCategories", subNode) 
      } 
     </li> 
    } 
    @if (Model.ToList()[0].Parent_id == null) 
    { 
     </ul> 
    } 
} 

그래서 내가 확인하고 있는지, 그것은을 가진 < UL> 태그를 만들어야합니다
그래서 일반적으로이 작업을 수행하는 내 방식은 같을 것이다 id는 "네비게이션"이므로 jquery 플러그인은 트리 뷰 컨트롤이라는 것을 인식 할 수 있습니다. 그런 다음 재귀 호출이 포함 된 목록 태그를 만듭니다. 재귀 적으로 호출 된 부분 뷰는 노드의 자식을 모델로 가져옵니다. 마지막으로 부분 뷰의 렌더링이 끝나고 "루트 수준"에 도달하면 닫기 < ul> 태그
을 작성해야합니다. 그러나 몇 가지 문제가 있습니다. 첫째, 마지막에 정렬되지 않은 목록 태그가 잘못 되었기 때문에 VS는 일치하는 시작 태그를 찾을 수 없습니다. 둘째, 이유는 모르겠지만 맨 위에는 시동기 < ul> 태그를 태그 사이에 넣을 수 있습니다. 아래 닫는 태그에서이를 수행 할 수 없습니다. 그러나이 < ul> 태그 중 하나에 대해 확신 할 수 없지만 그 역시 잘못되었습니다.

제발 도와주세요. 지금은 며칠 동안 붙어 있습니다.

Answer 1

남자, 여기에 무슨 일이 일어나고 있어요. 붙어 다니기가 힘들어.

보트가 뜨는 지 확인하십시오.

같은 목록에서 재귀를 수행 할 때 목록에서 찾고자하는 것을 추적하기 위해 시드 값이 필요합니다. 클래스에서 부모 자식 매핑을 수행하는 것이 좋습니다. 그러나 이것은 구조가 주어지면 재미있는 일 이었으므로 트릭을 수행해야합니다.

모델

namespace trash.Models 
{ 
    public class Category 
    { 
     public int ID { get; set; } 
     public int? Parent_ID { get; set; } 
     public string Name {get; set;} 
    } 

    public class SeededCategories 
    { 
     public int? Seed { get; set; } 
     public IList<Category> Categories { get; set; } 
    } 
} 

컨트롤러 (참고 : 모든 널 부모를 데리러 것이다 null로 당신은 종자 속성을 설정하여 재귀 체인을 시작)

namespace trash.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      IList<trash.Models.Category> categories = new List<trash.Models.Category>(); 
      categories.Add(new trash.Models.Category { ID = 1, Parent_ID = null, Name = "Top1" }); 
      categories.Add(new trash.Models.Category { ID = 2, Parent_ID = null, Name = "Top2" }); 
      categories.Add(new trash.Models.Category { ID = 3, Parent_ID = 1, Name = "Top1Ring1" }); 
      categories.Add(new trash.Models.Category { ID = 4, Parent_ID = 1, Name = "Top1Ring2" }); 

      trash.Models.SeededCategories model = new Models.SeededCategories { Seed = null, Categories = categories }; 
      return View(model); 
     } 
    } 
} 

조회수 지수

@model trash.Models.SeededCategories 

Here's a list 
@Html.Partial("_TreeCategories", Model) 

부분 (사용자의 _TreeCategories. 참고 : 시드를 현재 노드의 ID 및 volia 재귀)

@model trash.Models.SeededCategories 

@if (Model.Categories.Where(s => s.Parent_ID == Model.Seed).Any()) 
{ 
    <ul> 
     @foreach (var node in Model.Categories) 
     { 
      if (node.Parent_ID == Model.Seed) 
      { 
       trash.Models.SeededCategories inner = new trash.Models.SeededCategories { Seed = node.ID, Categories = Model.Categories }; 
      <li><a href="?@node.ID">@node.Name</a> 
       @Html.Partial("_TreeCategories", inner) 
      </li> 
      } 
     } 
    </ul> 
} 

Answer 2

당신은 쉴드 UI의 재귀 TreeView for ASP.NET MVC을 시도 할 수 있습니다.

이 항목을 사용하면 항목을 확장 할 때마다 원격 종점 또는 로컬 소스 "지연"에서 트리 항목의 데이터를 검색하도록 설정할 수있는 RecursiveDataSource 객체를 사용하여 모든 TreeView 항목을 지정할 수 있습니다.

RecursiveDataSource는 일부 JS 코드의 필요성을 소개하고 데이터를 제공 할 서버 코드를 업데이트 할뿐만 아니라 웹 서비스를 구현하거나 JS에 데이터를 배치하는 JavaScript DS 위젯 주위의 래퍼입니다 변수보기).