Bind (Populate) Multi Level jsTree TreeView from Database using ADO.Net in ASP.Net Core MVC

Hi pshresthaa08,

Refer below code.

Model

public class VehicleType
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class VehicleSubType
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int VehicleTypeId { get; set; }
}

public class VehicleLevelType
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int VehicleTypeId { get; set; }
    public int VehicleSubTypeId { get; set; }
}

public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}

Namespaces

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Data.SqlClient;
using Newtonsoft.Json;

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        List<TreeViewNode> nodes = new List<TreeViewNode>();
        foreach (VehicleType type in GetVehicleTypes())
        {
            nodes.Add(new TreeViewNode
            {
                id = type.Id.ToString(),
                parent = "#",
                text = type.Name
            });
        }
        foreach (VehicleSubType subType in GetVehicleSubTypes())
        {
            nodes.Add(new TreeViewNode
            {
                id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(),
                parent = subType.VehicleTypeId.ToString(),
                text = subType.Name
            });
        }

        int i = 0;
        foreach (VehicleLevelType levelType in GetVehicleLevelTypes())
        {
            nodes.Add(new TreeViewNode
            {
                id = levelType.VehicleSubTypeId.ToString() + "-" + levelType.VehicleTypeId.ToString() + "-" + levelType.Id.ToString(),
                parent = levelType.VehicleTypeId.ToString() + "-" + levelType.VehicleSubTypeId.ToString(),
                text = levelType.Name
            });
        }

        ViewBag.Json = JsonConvert.SerializeObject(nodes);
        return View();
    }

    [HttpPost]
    public IActionResult Index(string selectedItems)
    {
        List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
        return RedirectToAction("Index");
    }

    private List<VehicleType> GetVehicleTypes()
    {
        List<VehicleType> vehicleTypes = new List<VehicleType>();
        string conString = "Server=.\\SQL2014;DataBase=AjaxSamples;UID=sa;PWD=pass@123";
        string query = "SELECT Id,Name FROM VehicleType";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                vehicleTypes.Add(new VehicleType
                {
                    Id = Convert.ToInt32(sdr["Id"]),
                    Name = sdr["Name"].ToString()
                });
            }
            con.Close();
        }
        return vehicleTypes;
    }

    private List<VehicleSubType> GetVehicleSubTypes()
    {
        List<VehicleSubType> vehicleSubTypes = new List<VehicleSubType>();
        string conString = "Server=.\\SQL2014;DataBase=AjaxSamples;UID=sa;PWD=pass@123";
        string query = "SELECT Id,Name,VehicleTypeId FROM VehicleSubType";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                vehicleSubTypes.Add(new VehicleSubType
                {
                    Id = Convert.ToInt32(sdr["Id"]),
                    Name = sdr["Name"].ToString(),
                    VehicleTypeId = Convert.ToInt32(sdr["VehicleTypeId"])
                });
            }
            con.Close();
        }
        return vehicleSubTypes;
    }

    private List<VehicleLevelType> GetVehicleLevelTypes()
    {
        List<VehicleLevelType> vehicleLevelTypes = new List<VehicleLevelType>();
        string conString = "Server=.\\SQL2014;DataBase=AjaxSamples;UID=sa;PWD=pass@123";
        string query = "SELECT Id,Name,VehicleTypeId,VehicleSubTypeId FROM VehicleLevelType";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                vehicleLevelTypes.Add(new VehicleLevelType
                {
                    Id = Convert.ToInt32(sdr["Id"]),
                    Name = sdr["Name"].ToString(),
                    VehicleTypeId = Convert.ToInt32(sdr["VehicleTypeId"]),
                    VehicleSubTypeId = Convert.ToInt32(sdr["VehicleSubTypeId"])
                });
            }
            con.Close();
        }
        return vehicleLevelTypes;
    }
}

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" />
        <input type="submit" value="Submit" />
    </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').on('changed.jstree', function (e, data) {
                var i, j;
                var selectedItems = [];
                for(i = 0, j = data.selected.length; i < j; i++) {

                    //Fetch the Id.
                    var id = data.selected[i];

                    //Remove the ParentId.
                    if(id.indexOf('-') != -1){
                        id = id.split("-")[1];
                    }

                    //Add the Node to the JSON Array.
                    selectedItems.push({
                        text: data.instance.get_node(data.selected[i]).text,
                        id: id,
                        parent: data.node.parents[0]
                    });
                }

                //Serialize the JSON Array and save in HiddenField.
                $('#selectedItems').val(JSON.stringify(selectedItems));
            }).jstree({
                "core": {
                    "themes": {
                        "variant": "large"
                    },
                    "data": @Html.Raw(ViewBag.Json)
                    },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ["wholerow", "checkbox"],
            });
        });
    </script>
</body>
</html>

Screenshot