asp.net-mvc - ASP.NET MVC 4 生成具有递归部分 View 的 TreeView

Question

我在一个强类型的 MVC 4 项目中有一个部分 View 。它采用数据库表的 IEnumerable 集合。在该表中，有 ID、名称和 ParentID，用于存储记录之间的层次结构连接。调用分部 View 的 View 也是强类型的，它以整个数据库为模型，将Categories表传递给分部 View ，作为一个可枚举集合:

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

在部分 View 中，我想首先获取根节点，这样我就可以以递归方式扩展整个树。在数据库表中，所有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>
    }
}

所以我检查模型的第一个元素的 ParentID 是否为空，如果是，那么它应该创建一个 id 为“navigation”的

标签，这样 jquery 插件就可以识别出它是 TreeView 控件。然后它创建一个列表标签，其中包含递归调用。递归调用的局部 View 以节点的子节点作为模型。最后，如果我们到达部分 View 渲染的末尾，并且我们处于“根级别”，它应该编写一个结束 < ul> 标记
然而，也存在一些问题。首先，最后，关闭无序列表标记是错误的，VS找不到与之匹配的开始标记。其次，我不知道为什么，但是在顶部，我可以将 starter < ul> 标签放在标签之间，而我不能在下面的结束标签处这样做。但我也不确定这些
标签，我觉得它们也是错误的。

请帮助我，我已经被这个问题困扰好几天了。

Answer 1

伙计，你这里有些 Nerd 。我感受到你被卡住时的痛苦。

看看这是否能让你的船漂浮。

当您在同一列表上进行递归时，您需要一个种子值来跟踪您在列表中查找的内容。最好在类中进行父子映射，但是鉴于您的结构，这样做很有趣并且应该可以解决问题。

型号

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

Controller (注意:您可以通过将 Seed 属性设置为 null 来启动递归链，这将拾取所有 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>
}