Show hierarchical data in MVC

Partial views are very handy concept in the MVC. We can use it in different ways according to our requirement. Once I was working on one of my project I got requirement to show data in hierarchal fashion, so I start thinking how I can do this in MVC. I got solution that using recursive partial view I can achieve this. In this article i will explain you to create tree control using partial view.

Data Model

Create a class TreeItem in the model folder that contains the Text and its child items.

 public class TreeItem
 {

        public TreeItem()
        {
            ChildNodes = new List<TreeItem>();
        }

        public int Id { get; set; }

        public string Text { get; set; }

        public List<TreeItem> ChildNodes { get; set; }

 }

    

Create Partial view

For adding partial view right-click on the shared folder then clicks on ‘Add’ and then ‘View’. In the popup window assign the view name “_TreeView”. You must select a checkbox “Create as a partial view” for creating partial view. Select the check box “Create a strongly-typed view” and select the TreeItem class from dropdown.

In the Partial View the binding model will be a “List<TreeItem>” because there can be more than one parent items.

 @model List<MvcRecursivePartialView.Models.TreeItem>


 <div>
    @foreach (var item in Model)
    {
        <div style="padding-left: 4px;">
            @Html.DisplayFor(x => item.Text)
            <div>
                 @Html.Partial("_TreeView", item.ChildNodes) 
            </div>
        </div>
    }
 </div>

    

You will notice that in the partial view we are recursively calling the same view for making hierarchal tree using @Html.Partial("_TreeView", item.ChildNodes) statement.

Pass Model from controller

In this example we will pass all the hierarchal data to the main view from controller. So in this example we are building hierarchal data with dummy data and controller is returning the List<TreeItem> to the view.

 public ActionResult Index()
 {

   List<TreeItem> itemList = GetTreeItems("Parent", 5);

   foreach (var parent in itemList)
   {

      parent.ChildNodes = GetTreeItems("Child", 2);

      foreach (var child in parent.ChildNodes)
      {
         child.ChildNodes = GetTreeItems("Subchild", 1);

      }
   }

   return View(itemList);

 }


 private List<TreeItem> GetTreeItems(string prefix, int totalItems)
 {
        List<TreeItem> itemList = new List<TreeItem>();

        for (int i = 1; i <= totalItems; i++)
        {
            var item = new TreeItem();

            item.Id = i;
            item.Text = prefix + " " + i;


            itemList.Add(item);
         }


         return itemList;
 }

    

Add Main View

Create a view for the Index() method in the controller and add the partial view using in it @Html.Partial().

 @model List<MvcRecursivePartialView.Models.TreeItem>

 @{
    ViewBag.Title = "Index";
 }

 <h2>Index</h2>

 @Html.Partial("../Shared/_TreeView", Model)