C# 如何使用ASP.NET MVC实现简单的树视图

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

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

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

请不要告诉我搜索互联网，因为我真的很努力，非常努力。 非常感谢

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

jstree/Telerik/

---

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

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

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

我已经实现了这一点，并且可以从我的数据成功地构建一个或多个层次结构树。您可能希望在树数据结构中看到这一点

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

JSTree的两个好的延迟加载实现如下：

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

---

更新：我能够用很少的代码在我的网页上加载和显示一个层次结构树，使用。我发现我根本不需要树集合。首先，保存每个节点数据的模型：

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

使用System.Text.Json；
[...]
IList节点=新列表（）；
foreach（项目中的var项目）
{
添加（新的JsTreeModel
{
id=item.id.ToString（），
parent=item.ParentId==null？#“：item.ParentId.ToString（），
text=项目名称
});
}
//序列化为JSON字符串。
Json=JsonSerializer.Serialize（节点）；
返回视图（）；

然后在您的视图中，您只需要一个保存树的div：

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

这个javascript将填充它：

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

$（文档）.ready（函数（）{
$（'#jstree'）.jstree（{
“核心”：{
“数据”：@Html.Raw（ViewBag.Json）
}
});
});

---

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

对于cshtml，嵌套数据列表需要递归函数。对于javascript（jstree），您需要返回带有嵌套json对象的json。但请澄清你的问题，因为我不相信你在互联网上找不到树样本。可能重复@daremachine我可以找到很多，但可以使用javascript、jquery或大量第三方插件。我想知道微软有什么东西可以使用，最好不要使用html以外的东西。我的问题可能很愚蠢，因为我在网络开发方面真的很弱。微软制造工具而不是组件。如果您想要完整的组件，您可能需要第三方，如Telerik或Syncfusion。或者你们可以是第一个在nuget中制作开源树组件的人，或者你们也可以是其他人。你有很多选择。@darrmachine非常感谢，我知道过去有一个treeview web控件，我猜它是旧技术，因为它在服务器端运行？现在情况变了。原始html不支持treeview，对吗？所以它必须通过js之类的东西来完成。