In this article I will explain with an example, how to bind (populate) jQuery jsTree TreeView plugin from Database in ASP.Net Core MVC.
The records from Database will be fetched using Entity Framework and a JSON string will be generated and assigned to the ViewBag object.
Finally, the JSON string in the ViewBag object will be used as source data for the jsTree TreeView plugin in ASP.Net Core MVC.
Note: For beginners in ASP.Net MVC Core, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.
In order to populate TreeView with Parent Child relationship, I have made use of two tables namely VehicleTypes and VehicleSubTypes. The schema and the data present in both the tables are as follows.
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
Following classes are used as the Model class.
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 TreeViewNode
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Database using Entity Framework.
Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
using jsTree_Core_MVC.Models;
using Microsoft.EntityFrameworkCore;
namespace jsTree_Core_MVC
    public class DBCtx : DbContext
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        public DbSet<VehicleType> VehicleTypes { get; set; }
        public DbSet<VehicleSubType> VehicleSubTypes { get; set; }
You will need to import the following namespaces.
using Newtonsoft.Json;
using System.Collections.Generic;
The Controller consists of the following Action methods.
Action method for handling GET operation
Inside this Action method, first the records from the database are fetched using Entity Framework.
Then a loop is executed over the records VehicleTypes and VehicleSubTypes tables and the details are added to a Generic List of TreeViewNode Model class.
Note: The ID of the VehicleType is appended to the ID of the VehicleSubType while inserting into the Generic List of TreeViewNode Model class. This is done to make the IDs of all nodes unique as otherwise the jQuery jsTree plugin won’t generate the TreeView.
Finally, the Generic List of TreeViewNode Model class is serialized into a JSON string is assigned to a ViewBag object.
Action method for handling POST operation
This Action method gets called when the Submit button is clicked. It accepts a serialized JSON string.
The serialized JSON string is de-serialized into Generic List of TreeViewNode Model class.
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 (VehicleType type in this.Context.VehicleTypes)
            nodes.Add(new TreeViewNode { id = type.Id.ToString(), parent = "#", text = type.Name });
        //Loop and add the Child Nodes.
        foreach (VehicleSubType subType in this.Context.VehicleSubTypes)
            nodes.Add(new TreeViewNode { id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(), parent = subType.VehicleTypeId.ToString(), text = subType.Name });
        //Serialize to JSON string.
        ViewBag.Json = JsonConvert.SerializeObject(nodes);
        return View();
    public IActionResult Index(string selectedItems)
        List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
        return RedirectToAction("Index");
The View consists of an HTML Form which has been created using the following TagHelpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The HTML Form consists of a Hidden Field and a Submit Button.
The View consists of an HTML DIV which will be used for generating the jQuery TreeView.
jQuery TreeView implementation
Inside the jQuery document ready event handler, the jQuery jsTree plugin is applied to the HTML DIV and its source of data is set to the ViewBag object.
Inside the changed event handler of the jQuery jsTree plugin, an array of JSON objects is generated and is serialized and saved in the Hidden Field.
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <div id="jstree">
    <form method="post" asp-controller="Home" asp-action="Index">
        <input type="hidden" name="selectedItems" id="selectedItems" />
        <input type="submit" value="Submit" />
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></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.
                        text: data.instance.get_node(data.selected[i]).text,
                        id: id,
                        parent: data.selected[i].split("-")[0]
                //Serialize the JSON Array and save in HiddenField.
                "core": {
                    "themes": {
                        "variant": "large"
                    "data": @Html.Raw(ViewBag.Json)
                "checkbox": {
                    "keep_selected_style": false
                "plugins": ["wholerow", "checkbox"]
The jQuery TreeView
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database
TreeView selected Nodes
ASP.Net Core MVC: Bind (Populate) jsTree TreeView from Database