ASP.NET Core MVC中的TreeView(数据来自SQL)

我正试图使用多个级别的TreeView创建一个列表，该列表由课程和模块组成，每个课程包含多个模块，每个模块包含子级别等等，数据取自MSSQL数据库

预期结果：

1 A
- 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>

我的结果：
我的结果

我的Sql:
我的Sql

一切都比我想象的要简单得多，代码中有很多不必要的垃圾，正如他们在俄罗斯所说的那样"这是一支手鼓舞"；，所要做的就是传输正常的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": "/"}
];

更正了问题中的代码，你可以使用它。

相关内容

最新更新

热门标签：