In this article I will explain with an example, how to implement TreeView in ASP.Net Core Razor Pages.
The TreeView will contain CheckBoxes and it will be populated from Database using Entity Framework and the jQuery jsTree plugin in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Database
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.
VehicleTypes
Implement TreeView in ASP.Net Core Razor Pages
 
Implement TreeView in ASP.Net Core Razor Pages
 
VehicleSubTypes
Implement TreeView in ASP.Net Core Razor Pages
 
Implement TreeView in ASP.Net Core Razor Pages
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Model
Following classes are used as the Model class.
VehicleType
public class VehicleType
{
    public int Id { get; set; }
    public string Name { get; set; }
}
 
VehicleSubType
public class VehicleSubType
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int VehicleTypeId { get; set; }
}
 
TreeViewNode
public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}
 
 
Database Context
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_Razor.Models;
using Microsoft.EntityFrameworkCore;
 
namespace jsTree_Core_Razor
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<VehicleType> VehicleTypes { get; set; }
        public DbSet<VehicleSubType> VehicleSubTypes { get; set; }
    }
}
 
 
Namespaces
You will need to import the following namespaces.
using Microsoft.AspNetCore.Mvc.RazorPages;
using Newtonsoft.Json;
 
 
Razor PageModel (Code-Behind)
The PageModel consists of two Action Handler methods.
Handler method for handling GET operation
Inside this Handler 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 the public property TreeViewJSON.
 
Handler method for handling Button Click and POST operation
This Handler method gets called when the Submit button is clicked. It accepts a serialized JSON string from the Hidden Field.
The serialized JSON string is de-serialized into Generic List of TreeViewNode Model class.
public class IndexModel : PageModel
{
    public string TreeViewJSON { get; set; }
 
    private DBCtx Context { get; }
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public void OnGet()
    {
        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.
        this.TreeViewJSON = JsonConvert.SerializeObject(nodes);
    }
 
    public void OnPostSubmit(string selectedItems)
    {
        List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
    }
}
 
 
Razor Page (HTML)
HTML Markup
The HTML of Razor Page consists of an HTML DIV which will be used for generating the jQuery jsTree. It also consists of an HTML Form within which a Hidden Field and a Submit Button has been placed.
 
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 property TreeViewJSON.
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.
@page
@model jsTree_Core_Razor.Pages.IndexModel
@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">
        <input type="hidden" name="selectedItems" id="selectedItems" />
        <input type="submit" value="Submit" asp-page-handler="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(Model.TreeViewJSON)
                },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ["wholerow", "checkbox"],
            });
        });
    </script>
</body>
</html>
 
 
Screenshots
The jQuery TreeView
Implement TreeView in ASP.Net Core Razor Pages
 
TreeView selected Nodes
Implement TreeView in ASP.Net Core Razor Pages
 
 
Downloads
Download Code