如何使用 ASP.NET MVC 实现简单的 TreeView

Question

本人是web开发新手，想用VS2019搭建一个非常简单的网站，基于MVC架构。我需要在网页中创建一个树视图，具有可选节点，尽可能简单。

加载数据没有问题，填充到任何结构/class。但是，我不知道如何在网页中显示树视图。

我已经找了四个小时了。我看到很多js树插件，很多NuGet里面的TreeView controller。我只想要一棵简单的树，最好来自微软而不是任何其他第 3 方。我看到一个 TreeView WebControl，但它似乎用于 Web 窗体应用程序 (.aspx)。

请不要让我去网上搜索，因为我真的很努力，很努力。非常感谢！

如果在cshtml中使用的不是微软开箱即用的东西，请确认这一点，我将停止搜索，如果可能，请推荐一种最易学易用的TreeView使用方式。

jstree / Telerik / ???

Answer 1

托尼，我也一直在寻找同样的东西。没错，ASP.NET Core 有一个 TreeView，但它是用于 Windows 表单而不是网页：

Microsoft Docs TreeView Class

我也看过 Telerik 和 Syncfusion，但我尽量避免为解决方案付费。

首先，对于数据结构，我确实在这里找到了David West写的一个名为TreeCollections的NuGet包：

https://github.com/davidwest/TreeCollections

我已经实现了，并且可以从我的数据中成功构建一个或多个分层树。你可能想看看你的树数据结构。

现在要在网页上显示数据，我认为微软没有任何工具可以帮助我们。我像你一样搜索过。你提到 JsTree，我认为这是一个可行的选择，但它不是 html-only 正如你指定的那样。我认为我们至少需要使用一些 javascript.

这里有两个很好的 JSTree 延迟加载实现：

根据树的大小和深度，如果您可以在用户浏览树时动态提取数据，这可能是最佳解决方案。如果您想首先将数据预加载到树结构中，就像我对 TreeCollections 所做的那样，那么填充结构可能会起作用，但如果您想以交互方式 [=48]，它仍然需要 javascript 的帮助=]树上的树枝。

更新：我可以使用 jsTree 用很少的代码在我的网页上加载和显示分层树。我发现我根本不需要 TreeCollections。一、保存每个节点数据的模型：

public class JsTreeModel
 {
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
    public string icon { get; set; }
    public string state { get; set; }
    public bool opened { get; set; }
    public bool disabled { get; set; }
    public bool selected { get; set; }
    public string li_attr { get; set; }
    public string a_attr { get; set; }
 }

这是我将数据加载到列表中的代码。我在 ASP.Net Core 3.1 中工作，所以我使用 System.Text.Json 来序列化数据。首先将您的数据从数据库检索到项目列表 <> 中，不需要排序。那么：

  using System.Text.Json;
  [...]
  IList<JsTreeModel> nodes = new List<JsTreeModel>();

  foreach (var item in items)
  {
    nodes.Add(new JsTreeModel
    {
      id = item.Id.ToString(),
      parent = item.ParentId == null ? "#" : item.ParentId.ToString(),
      text = item.Name
    });
  }

  //Serialize to JSON string.
  ViewBag.Json = JsonSerializer.Serialize(nodes);

  return View();

那么在你看来，你只需要一个 div 来支撑这棵树：

<div id="jstree"></div>

和将填充它的 javascript：

<script type="text/javascript">
$(document).ready(function () {
  $('#jstree').jstree({ 
    "core" : {
       "data" : @Html.Raw(ViewBag.Json)
    }
  });
});
</script>

jsTree 将遍历 Json 数据并从中创建一个 ul 结构并将其放入 div。非常简单！

如何使用 ASP.NET MVC 实现简单的 TreeView

How to implement a simple TreeView using ASP.NET MVC

c#

asp.net-mvc

treeview

visual-studio-2019