Bind (Populate) Bootstrap TreeView from database using jQuery Ajax in ASP.Net

Hi rani,

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

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetTreeData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var nodes = JSON.parse(response.d).nodes;
                $('#dvTree').treeview({
                    data: JSON.stringify(nodes)
                });
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
</script>
<div id="dvTree"></div>

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
public static string GetTreeData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Text"), new DataColumn("ParentId") });
    dt.Rows.Add(1, "IT", 0);
    dt.Rows.Add(2, "HR", 0);
    dt.Rows.Add(3, "Marketing", 0);
    dt.Rows.Add(4, "David", 1);
    dt.Rows.Add(5, "Jhon", 1);
    dt.Rows.Add(6, "Kevin", 2);
    dt.Rows.Add(7, "Marry", 2);
    dt.Rows.Add(8, "Robert", 3);
    dt.Rows.Add(9, "Andrea", 6);
    dt.Rows.Add(10, "Adam", 8);
    dt.Rows.Add(11, "Dharmendra", 4);
    dt.Rows.Add(12, "Ajeet", 5);

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

private static void AddChildItems(DataTable dt, Node parentNode, string ParentId)
{
    DataView viewItem = new DataView(dt);
    viewItem.RowFilter = "ParentId=" + ParentId;
    foreach (DataRowView childView in viewItem)
    {
        Node node = new Node { text = childView["text"].ToString() };
        parentNode.nodes.Add(node);
        string pId = childView["Id"].ToString();
        AddChildItems(dt, node, pId);
    }
}

public class Node
{
    public Node()
    {
        nodes = new List<Node>();
    }
    public string id { get; set; }
    public string text { get; set; }
    public string icon { get; set; }
    public List<Node> nodes { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetTreeData() As String
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Text"), New DataColumn("ParentId")})
    dt.Rows.Add(1, "IT", 0)
    dt.Rows.Add(2, "HR", 0)
    dt.Rows.Add(3, "Marketing", 0)
    dt.Rows.Add(4, "David", 1)
    dt.Rows.Add(5, "Jhon", 1)
    dt.Rows.Add(6, "Kevin", 2)
    dt.Rows.Add(7, "Marry", 2)
    dt.Rows.Add(8, "Robert", 3)
    dt.Rows.Add(9, "Andrea", 6)
    dt.Rows.Add(10, "Adam", 8)
    dt.Rows.Add(11, "Dharmendra", 4)
    dt.Rows.Add(12, "Ajeet", 5)
    Dim nodes As Node = New Node With {.text = "Department"}
    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 {.text = kvp("text").ToString()}
        nodes.nodes.Add(node)
        AddChildItems(dt, node, parentId)
    Next

    Return (New JavaScriptSerializer()).Serialize(nodes).Replace(",""nodes"":[]", "")
End Function

Private Shared 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 DataRowView In viewItem
        Dim node As Node = New Node With {.text = childView("text").ToString()}
        parentNode.nodes.Add(node)
        Dim pId As String = childView("Id").ToString()
        AddChildItems(dt, node, pId)
    Next
End Sub

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

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

Screenshot

For more function on Bootstrap TreeView refer below link.

https://github.com/jonmiles/bootstrap-treeview