Populate Multi-Level TreeView from Database in ASP.Net MVC

Hi Ah1970,

Check this example. Now please take its reference and correct your code.

Model

C#

public class Node
{
    public Node()
    {
        children = new List<Node>();
    }

    public string id { get; set; }
    public string text { get; set; }
    public List<Node> children { get; set; }
}

VB.Net

Public Class Node
    Public Sub New()
        children = New List(Of Node)()
    End Sub

    Public Property id As String
    Public Property text As String
    Public Property children As List(Of Node)
End Class

Controller

C#

public class TreeController : Controller
{
    // GET: /Tree/
    public ActionResult Index()
    {
        return View();
    }
}

VB.Net

Public Class TreeController
    Inherits System.Web.Mvc.Controller
    ' GET: /Home
    Function Index() As ActionResult
        Return View()
    End Function
End Class

Handler

C#

using System.Data;
using System.Web;
using System.Web.Script.Serialization;

namespace TreeViewMVC.Models
{
    public class TreeData : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string json = GetTreedata();
            context.Response.ContentType = "text/json";
            context.Response.Write(json);
        }

        private string GetTreedata()
        {
            TestEntities entities = new TestEntities();
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] {
                                new DataColumn("Id"),
                                new DataColumn("Text"),
                                new DataColumn("ParentId")});

            dt.Rows.Add(1, "Cars", 0);
            dt.Rows.Add(2, "Bikes", 0);
            dt.Rows.Add(3, "Alto", 1);
            dt.Rows.Add(4, "WagonR", 1);
            dt.Rows.Add(5, "Scorpio", 1);
            dt.Rows.Add(6, "Duster", 1);
            dt.Rows.Add(7, "Discover", 2);
            dt.Rows.Add(8, "Avenger", 2);
            dt.Rows.Add(9, "Unicorn", 2);
            dt.Rows.Add(10, "Karizma", 2);
            dt.Rows.Add(11, "kia1", 4);
            dt.Rows.Add(12, "kia2", 4);

            Node root = new Node { id = "root", children = { }, text = "root" };
            DataView view = new DataView(dt);
            view.RowFilter = "ParentId=0";
            foreach (DataRowView kvp in view)
            {
                string parentId = kvp["Id"].ToString();
                Node node = new Node { id = kvp["Id"].ToString(), text = kvp["text"].ToString() };
                root.children.Add(node);
                AddChildItems(dt, node, parentId);
            }
            return (new JavaScriptSerializer().Serialize(root));
        }

        private void AddChildItems(DataTable dt, Node parentNode, string ParentId)
        {
            DataView viewItem = new DataView(dt);
            viewItem.RowFilter = "ParentId=" + ParentId;
            foreach (System.Data.DataRowView childView in viewItem)
            {
                Node node = new Node { id = childView["Id"].ToString(), text = childView["text"].ToString() };
                parentNode.children.Add(node);
                string pId = childView["Id"].ToString();
                AddChildItems(dt, node, pId);
            }
        }
        public bool IsReusable { get { return false; } }
    }
}

VB.Net

Imports System.Web
Imports System.Web.Services
Imports System.Web.Script.Serialization

Public Class TreeData
    Implements System.Web.IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim json As String = GetTreedata()
        context.Response.ContentType = "text/json"
        context.Response.Write(json)
    End Sub

    Private Function GetTreedata() As String
        Dim entities As TestEntities = New TestEntities()
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Text"), New DataColumn("ParentId")})
        dt.Rows.Add(1, "Cars", 0)
        dt.Rows.Add(2, "Bikes", 0)
        dt.Rows.Add(3, "Alto", 1)
        dt.Rows.Add(4, "WagonR", 1)
        dt.Rows.Add(5, "Scorpio", 1)
        dt.Rows.Add(6, "Duster", 1)
        dt.Rows.Add(7, "Discover", 2)
        dt.Rows.Add(8, "Avenger", 2)
        dt.Rows.Add(9, "Unicorn", 2)
        dt.Rows.Add(10, "Karizma", 2)
        dt.Rows.Add(11, "kia1", 4)
        dt.Rows.Add(12, "kia2", 4)
        Dim root As Node = New Node With {
            .id = "root",
            .children = New List(Of Node),
            .text = "root"
        }
        Dim view As DataView = New DataView(dt)
        view.RowFilter = "ParentId=0"

        For Each kvp As DataRowView In view
            Dim parentId As String = kvp("Id").ToString()
            Dim node As Node = New Node With {
                .id = kvp("Id").ToString(),
                .text = kvp("text").ToString()
            }
            root.children.Add(node)
            AddChildItems(dt, node, parentId)
        Next

        Return (New JavaScriptSerializer().Serialize(root))
    End Function

    Private Sub AddChildItems(ByVal dt As DataTable, ByVal parentNode As Node, ByVal ParentId As String)
        Dim viewItem As DataView = New DataView(dt)
        viewItem.RowFilter = "ParentId=" & ParentId
        For Each childView As System.Data.DataRowView In viewItem
            Dim node As Node = New Node With {
                .id = childView("Id").ToString(),
                .text = childView("text").ToString()
            }
            parentNode.children.Add(node)
            Dim pId As String = childView("Id").ToString()
            AddChildItems(dt, node, pId)
        Next
    End Sub

    Public ReadOnly Property IsReusable As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>
        <style type="text/css">
            html
            {
                margin: 0;
                padding: 0;
                font-size: 62.5%;
            }
            body
            {
                max-width: 800px;
                min-width: 300px;
                margin: 0 auto;
                padding: 20px 10px;
                font-size: 14px;
                font-size: 1.4em;
            }
            h1
            {
                font-size: 1.8em;
            }
            .demo
            {
                overflow: auto;
                border: 1px solid silver;
                min-height: 100px;
            }
        </style>
        <link rel="stylesheet" href="themes/default/style.min.css" />
        <div id="ajax" class="demo">
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/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">
            $('#ajax').jstree({
                'plugins': ["defaults", "checkbox"],
                'core': {
                    'data': {
                        "themes": {
                            "responsive": true
                        },
                        "url": "Models/TreeData.ashx",
                        "dataType": "json"
                    }
                }
            });      
        </script>
    </div>
</body>
</html>

Screenshot