Question

我正在尝试打印一个由<{1}}和ul元素组成的简单 HTML树结构。我希望能够将视图传递给li，其中T具有一些层次结构信息（例如父级）。现在我希望视图输出树控件，就像ASP.NET的Tree一样。有没有办法在使用Razor的MVC3中做到这一点？

Answer 1

我到目前为止最终这样做了：

@PrintCategoryTree(Model.Where(x => !x.ParentCategoryID.HasValue))

@functions{
    public IHtmlString PrintCategoryTree(IEnumerable<Aurora.Models.Category> levelCategories) {
        if (levelCategories.Count() == 0) { return new HtmlString(String.Empty);  }

        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        TagBuilder childBuilder = new TagBuilder("li");

        foreach(var item in levelCategories.OrderBy(x => x.Name)) {
            childBuilder.Attributes.Clear();
            childBuilder.Attributes.Add("id", item.CategoryID.ToString("N"))
            var sub = PrintCategoryTree(Model.Where(x => x.ParentCategoryID == item.CategoryID));

            childBuilder.InnerHtml = item.Name + sub.ToString();
            sb.AppendLine(childBuilder.ToString());
        }

        TagBuilder tagBuilder = new TagBuilder("ul")
        {
            InnerHtml = sb.ToString()
        };

        return Html.Raw(tagBuilder.ToString());
    }
}

原因是，这仍然在Razor View中。我可以在我看来保持我的演示逻辑。这不完全是我所希望的，但我想我无论如何都要和你们分享。

Answer 2

当然有可能。 :)你可以通过几种方式实现这一目标。

使用jsTree之类的内容，只输出树的第一级。当用户扩展节点时，jsTree会发出一个AJAX回调以获得更多，这只是加载它们打开的节点下面的节点。我知道这不完全是你问的，但我想提一下。
如果您可以在将数据传递给剃刀之前修改查询或对数据进行一些预处理，请更改IEnumberable中的每个项目，使其在树中包含它的“级别”（1）对于一个根节点，2为它的孩子，3为一个孩子的孩子，等等）。在那时输出它非常容易。在包含当前级别的视图中创建变量。当您转到下一行时，请检查新级别是否与旧级别相同。如果不是，请打开或关闭足够的<ul>标签，以获得该元素的正确标签。
如果你不能这样做，你需要跟踪剃刀中看到的节点。原因是，当您从一个不是您看到的最后一个节点的节点中找到一个孩子时，您需要返回该节点以确定需要添加多少</ul>个标签才能到达正确的水平。在我的脑海中，您可以通过让视图创建一个Hashtable来实现这一点，该Hashtable包含每行所用行的键和级别。然后，当你点击一个元素并且不知道把它放在哪里时，在哈希表中查找它的父元素（因为你已经看到了父元素，假设这些元素被正确排序）。

正如我所知道的那样，没有“显示这一团作为树的东西”命令，所以你需要编写一些逻辑来获得用于构建正确级别的标签数量。但希望这将有助于您开始。：）

如何使用Razor打印树

2 个答案: