In this article I will explain with an example, how to implement TreeView in ASP.Net MVC Razor.
ASP.Net MVC Razor does not have any TreeView class and hence the TreeView will be implemented using the jQuery jsTree plugin.
The TreeView will be populated from Database using Entity Framework in ASP.Net MVC Razor.
 
 
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 MVC
 
Implement TreeView in ASP.Net MVC
 
VehicleSubTypes
Implement TreeView in ASP.Net MVC
 
Implement TreeView in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 

Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Model of the VehicleTypes and the VehicleSubTypes tables which will be used later in this project.
Implement TreeView in ASP.Net MVC
 
 
Namespaces
You will need to import the following namespace.
using System.Web.Script.Serialization;
 
 
Model
Following class is used as the Model class. It has the following three properties.
public class TreeViewNode
{
    public string id { get; set; }
    public string parent { get; set; }
    public string text { get; set; }
}
 
 
Controller
The Controller consists of two 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
{
    // GET: Home
    public ActionResult Index()
    {
        List<TreeViewNode> nodes = new List<TreeViewNode>();
        VehiclesEntities entities = new VehiclesEntities();
 
        //Loop and add the Parent Nodes.
        foreach (VehicleType type in entities.VehicleTypes)
        {
            nodes.Add(new TreeViewNode { id = type.Id.ToString() , parent = "#", text = type.Name });
        }
 
        //Loop and add the Child Nodes.
        foreach (VehicleSubType subType in entities.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 = (new JavaScriptSerializer()).Serialize(nodes);
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string selectedItems)
    {
        List<TreeViewNode> items = (new JavaScriptSerializer()).Deserialize<List<TreeViewNode>>(selectedItems);
        return RedirectToAction("Index");
    }
}
 
 
View
HTML Markup
The View consists of an HTML DIV which will be used for generating the jQuery TreeView. 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 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.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <div id="jstree">
    </div>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="hidden" name="selectedItems" id="selectedItems"/>
        <input type="submit" value="Submit"/>
    }
    <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>
 
 
Screenshots
The jQuery TreeView
Implement TreeView in ASP.Net MVC
 
TreeView selected Nodes
Implement TreeView in ASP.Net MVC
 
 
Downloads