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

Question

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

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

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

请不要告诉我去网上搜索，因为我真的很努力地尝试过。十分感谢！

如果微软没有现成的东西可以在cshtml中使用，请确认这一点，我将停止搜索，如果可能的话，请推荐一种最容易学习和使用的TreeView使用方式。

jstree / Telerik / ???

Answer 1

托尼，我也一直在寻找同样的东西。你是对的，ASP.NET Core 有一个 TreeView，但它适用于 Windows 窗体而不是网页：

Microsoft 文档 TreeView 类

我也研究过 Telerik 和 Syncfusion，但我试图避免为解决方案付费。

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

https://github.com/davidwest/TreeCollections

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

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

这里有两个很好的 JSTree 延迟加载实现： Lazy-loading TreeView with JsTree in Asp.Net MVC

根据树的大小和深度，如果您可以在用户导航树时动态提取数据，这可能是最好的解决方案。如果您想首先将数据预加载到树结构中，就像我对 TreeCollections 所做的那样，那么填充结构也许会起作用，但如果您想以交互方式显示/隐藏树上的分支，它仍然需要 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 中。好简单！