ASP.NET 核心 MVC 中的 TreeView（来自 SQL 的数据）

Question

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

预期结果：

1个
- 1.1AA
  - 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

Answer 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 核心 MVC 中的 TreeView（来自 SQL 的数据）

TreeView in ASP.NET Core MVC (data from SQL)

c#

sql

asp.net-mvc

jstree