ASP.NET Core MVC 中的 TreeView（来自 SQL 的数据）
Posted
技术标签:
【中文标题】ASP.NET Core MVC 中的 TreeView（来自 SQL 的数据）【英文标题】：TreeView in ASP.NET Core MVC (data from SQL) 【发布时间】：2021-12-26 10:44:02 【问题描述】：我正在尝试使用多个级别的 TreeView 创建一个列表，该列表由课程和模块组成，每个课程包含几个模块，每个模块包含子级别等，数据取自 MSSQL 数据库
预期结果：
1 个 1.1 AA 1.1.1 AAA提前谢谢你
型号
using System;
using System.Collections.Generic;
namespace Courses.Models
public class ErrorViewModel
public string RequestId get; set;
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
public class Courses
public int Id get; set;
public string Title get; set;
public class Modules
public int Id get; set;
public int CourseId get; set;
public int ParentId get; set;
public int Order get; set;
public string Title get; set;
public string Num get; set;
public class TreeViewNode
public string id get; set;
public string parent get; set;
public string text get; set;
控制器
using Courses.Models;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
namespace Courses.Controllers
public class HomeController : Controller
private DBCtx Context get;
public HomeController(DBCtx _context)
this.Context = _context;
public IActionResult Index()
List<TreeViewNode> nodes = new List<TreeViewNode>();
//Loop and add the Parent Nodes.
foreach (Models.Courses type in this.Context.Courses)
nodes.Add(new TreeViewNode
id = type.Id.ToString(),
parent = "#",
text = type.Title
);
//////Loop and add the Child Nodes.
foreach (Modules subType in this.Context.Modules)//Here I took advantage of the design feature of my DB
if (subType.ParentId == 0)
nodes.Add(new TreeViewNode
id = subType.Id.ToString(),
parent = subType.CourseId.ToString(),
text = subType.Num + " " + subType.Title
);
else
nodes.Add(new TreeViewNode
id = subType.Id.ToString(),
parent = subType.ParentId.ToString(),
text = subType.Num + " " + subType.Title
);
//Serialize to JSON string.
ViewBag.Json = JsonConvert.SerializeObject(nodes);
return View();
查看
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@
Layout = null;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="jstree">
</div>
<form method="post" asp-controller="Home" asp-action="Index">
<input type="hidden" name="selectedItems" id="selectedItems" />
</form>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
$(function ()
$('#jstree').jstree(
"core":
"themes":
"variant": "large"
,
"data": @Html.Raw(ViewBag.Json)
,
"plugins": ["sort","wholerow"],
);
);
</script>
</body>
</html>
我的结果：My Result
我的 Sql：My Sql
【问题讨论】：
【参考方案1】：结果一切都比我想象的要简单得多，代码中有很多不必要的垃圾，正如他们在俄罗斯所说的“这是一个手鼓跳舞”，所要做的就是转移正常JSON。下面是一个普通 JSON 的例子：
var arrayCollection = [
"id": "animal", "parent": "#", "text": "Animals",
"id": "device", "parent": "#", "text": "Devices",
"id": "dog", "parent": "animal", "text": "Dogs",
"id": "lion", "parent": "animal", "text": "Lions",
"id": "mobile", "parent": "device", "text": "Mobile Phones",
"id": "lappy", "parent": "device", "text": "Laptops",
"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/",
"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/",
"id": "african", "parent": "lion", "text": "African Lion", "icon": "/",
"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/",
"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/",
"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/",
"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/",
"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"
];
更正问题中的代码，可以使用了。
【讨论】：
以上是关于ASP.NET Core MVC 中的 TreeView（来自 SQL 的数据）的主要内容，如果未能解决你的问题，请参考以下文章
Asp.Net Core MVC 中的 IViewLocationExpander.PopulateValues() 是啥
数据存储到 ASP.NET Core 5 MVC 中的关联表