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

I am trying to create a list using a TreeView of several levels, the list consists of courses and modules, each course contains several modules, each module contains child levels and so on, the data is taken from the MSSQL database

Expected Result:

1 A
- 1.1 AA
  - 1.1.1 AAA

Thank you in advance

Model

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; }
    }
}

Controller

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

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:
My Result

My Sql:
My Sql

CodePudding user response：

Everything turned out to be much simpler than I thought, there was a lot of unnecessary garbage in the code and as they say in Russia "it was a dance with a tambourine", all that had to be done was to transfer normal JSON. Here's an example of normal 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": "/"}
];

Corrected the codes in the question, you can use it.