ASP.NET MVC 4生成递归局部视图一个TreeView [英] ASP.NET MVC 4 generating a treeview with recursive partial view

问题描述

我在一个MVC 4项目，这是强类型的局部视图。它需要一个数据库的表中的一个IEnumerable集合。在该表有标识，名称，以及用于存储记录之间的分层连接ParentIDs。调用局部视图也强类型的视图，它需要整个数据库作为模型，并通过类别表的局部视图，作为一个枚举集合：

I have a partial view in an MVC 4 project, which is strongly typed. It takes an IEnumerable collection of a table of a database. In that table there are IDs, Names, and ParentIDs for storing hierarchical connection between records. The view that calls the partial view is also strongly typed, it takes the whole database as the model, and passes the Categories table to the partial view, as an enumerable collection:

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

而在局部视图，我想先根节点，这样我就可以在一个递归的方式扩展整个树。在数据库表中，所有记录被认为是根节点与PARENTID == NULL。

因此，总的来说，我的方式做，这看起来像：

And in the partial view, I want to take the root nodes first, so I can extend the whole tree in a recursive way. In the database table, all records are considered as root nodes with a ParentID == null.
So generally, my way to do this would look like:

@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为空，如果是，那么它应该创建一个＆LT; UL>标签的ID导航，所以jQuery插件可以识别它意味着是一个TreeView控件。然后，它会创建一个内部递归调用列表的标签。该递归调用局部视图使用节点作为模型的孩子。最后一点，如果我们到达的局部视图的渲染的结束，我们在根级别，就应该写一结束＆lt; UL>标签

也存在一些问题，但是。首先，在结束时，关闭无序列表标签是错误的，VS无法找到该匹配的开始标记。第二，我不知道为什么，但在最上面，我可以把起动＆LT; UL>在标签之间的标签，我不能在下面的结束标记做。但我不知道这些＆LT; UL>标签要么，我觉得那些是错的了。



请帮助我，我坚持这个好几天了。

So I check if the first element's ParentID of the Model is null, and if it is, then it should create a < ul> tag with the id "navigation", so the jquery plugin can recognise that it is meant to be a treeview control. Then it creates a list tag with a recursive call within. The recursively called partial view takes the children of the node as the model. And lastly if we arrived to the end of the partial view's rendering, and we are at the "root level", it should write a closing < ul> tag
There are some problems, however. First, at the end, that closing unordered list tag is wrong, VS can't find the matching start tag for that. Second, I don't know why, but at the top, I can put the starter < ul> tag in between tags, and I can't do it at the closing tag below. But I'm not sure about these < ul > tags either, I feel those are wrong too.

Please, help me, I'm stuck with this for days now.

推荐答案

男人，你有一些书呆子怎么回事。我觉得你的痛苦上被卡住。

man, you got some wonk going on here. i feel your pain on getting stuck.

看是否你的船浮筒。

您需要一个种子值保持你在上市找什么曲目，当你在同一名单上的递归。最好是不要在类中的单亲家庭子女的映射，但MEH这是有趣的事情给你的结构和应该做的伎俩。

you need a seed value to keep track of what you are looking for in the listing when you do recursion on the same list. it's better to do a parent children mapping in the class, but meh this was fun to do given your structure and should do the trick.

模式

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，这将拿起所有的空父母开始递归链）

Controller (NOTE: you start the recursion chain by setting the Seed property to null which will pick up all the null parents)

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

浏览
指数

Views Index

@model trash.Models.SeededCategories

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

部分（您_TreeCategories注意：设置种子到当前节点ID和volia递归）

Partial (your _TreeCategories. NOTE: set the Seed to the current node ID and volia recursion)

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

这篇关于ASP.NET MVC 4生成递归局部视图一个TreeView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！