Bootstrap Tree View in ASP.Net MVC

Introduction

This article introduces how to create a parent / child tree view in ASP.NET MVC using Bootstrap and jQuery. It is a practical approach so we create an example in which we will create a parent object. The parent object will have associated child objects.

Using the Code

We create two classes, one is AuthorViewModel and another is BookViewModel. AuthorViewModel is the main class that has an association with the BookViewModel class. In other words each AuthorViewModel class object has a list of BookViewModel class objects. The following is the code snippet for the BookViewModel class.

namespace TreeView.Models
{
    public class BookViewModel
    {
        public long Id
        {
            get;
            set;
        }
        public string Title
        {
            get;
            set;
        }
        public bool IsWritten
        {
            get;
            set;
        }
    }
}

The following is the code snippet for the AuthorViewModel class.

using System.Collections.Generic;

namespace TreeView.Models {
    public class AuthorViewModel
    {
        public AuthorViewModel()
        {
            BookViewModel = new List < BookViewModel > ();
        }
        public int Id
        {
            get;
            set;
        }
        public string Name
        {
            get;
            set;
        }
        public bool IsAuthor
        {
            get;
            set;
        }
        public IList < BookViewModel > BookViewModel
        {
            get;
            set;
        }
    }
}

Now we create a controller “HomeController” that has two action methods for both GET and POST requests. The action method's name is “Index”. The Get request action method returns a tree view in the UI whereas the POST request method gets the posted data from the UI. The following is the code snippet for HomeController.

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using TreeView.Models;

namespace TreeView.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            List<AuthorViewModel> model = new List<AuthorViewModel>();

            AuthorViewModel firstAuthor = new AuthorViewModel
            {
                Id = 1,
                Name = "John",
                BookViewModel = new List<BookViewModel>{
                    new BookViewModel{
                        Id=1,
                        Title = "JQuery",
                        IsWritten = false
                    }, new BookViewModel{
                        Id=1,
                        Title = "JavaScript",
                        IsWritten = false
                    }
                }
            };

            AuthorViewModel secondAuthor = new AuthorViewModel
            {
                Id = 2,
                Name = "Deo",
                BookViewModel = new List<BookViewModel>{
                    new BookViewModel{
                        Id=3,
                        Title = "C#",
                        IsWritten = false
                    }, new BookViewModel{
                        Id=4,
                        Title = "Entity Framework",
                        IsWritten = false
                    }
                }
            };
            model.Add(firstAuthor);
            model.Add(secondAuthor);
            return View("Index", model);
        }

        [HttpPost]
        public ActionResult Index(List<AuthorViewModel> model)
        {
            List<AuthorViewModel> selectedAuthors = model.Where(a => a.IsAuthor).ToList();
            List<BookViewModel> selectedBooks = model.Where(a => a.IsAuthor)
                                                .SelectMany(a => a.BookViewModel.Where(b => b.IsWritten)).ToList();
            return View();
        }
    }
}

The preceding code shows how books are associated with an author in the GET action method and how to get a selected tree node (authors and books) in the POST request. 

Bootstrap CSS is already added to the application but we write a new custom CSS for the tree view design. The following is the code snippet for the tree CSS.

.tree li {
    margin: 0px 0;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0px 5px;
}

.tree li::before{
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    right: auto;
    left: -20px;
    border-left: 1px solid #ccc;
    bottom: 50px;
}
.tree li::after{
    content: '';
    position: absolute;
    top: 30px;
    width: 25px;
    height: 20px;
    right: auto;
    left: -20px;
    border-top: 1px solid #ccc;
}
.tree li a{
    display: inline-block;
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-family: 'Open Sans',sans-serif;
    font-size: 14px;
    font-weight :600;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

/*Remove connectors before root*/
.tree > ul > li::before, .tree > ul > li::after{
    border: 0;
}
/*Remove connectors after last child*/
.tree li:last-child::before{
      height: 30px;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
    background: #dd4814; color: #ffffff; border: 1px solid #dd4814;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
    border-color:  #dd4814;
}
.tree-checkbox{
    margin :4px !important;
}


.tree:before {
    border-left:  1px solid #ccc;
    bottom: 16px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: -21px;
    width: 1px;
    z-index: 1;
}

.tree ul:after {
    border-top: 1px solid #ccc;
    content: "";
    height: 20px;
    left: -29px;
    position: absolute;
    right: auto;
    top: 37px;
    width: 34px;
}
*:before, *:after {
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
.tree {
    overflow: auto;
    padding-left: 0px;
    position: relative;
}

Now we create an Index view that renders in the browser and shows the tree view for the author and book. The following is the code snippet for the Index view.

@model List
<TreeView.Models.AuthorViewModel>
@section head{
@Styles.Render("~/Content/css/tree.css")
}


    <div class="panel panel-primary">
        <div class="panel-heading panel-head">Author Book Tree View</div>
        <div id="frm-author" class="panel-body">
@using (Html.BeginForm())
{

            <div class="tree">
@for (int i = 0; i < Model.Count(); i++)
{

                <ul>
                    <li>
                        <a href="#">
@Html.CheckBoxFor(model => model[i].IsAuthor, new { @class = "tree-checkbox parent", @id = @Model[i].Id })

                            <label for=@i>
                                <strong>Author:</strong>
@Html.DisplayFor(model => model[i].Name)

                            </label>
                        </a>
                        <ul>
@for (int j = 0; j < Model[i].BookViewModel.Count(); j++)
{
int k = 1 + j;
@Html.HiddenFor(model => model[i].BookViewModel[j].Id)

                            <li>
                                <a href="#">
@Html.CheckBoxFor(model => model[i].BookViewModel[j].IsWritten, new { @class = "tree-checkbox node-item", @iid = i + "" + j })

                                    <label for=@i@j>
                                        <strong>Book @(k):</strong> @Html.DisplayFor(model => model[i].BookViewModel[j].Title)
                                    </label>
                                </a>
                            </li>

}

                        </ul>
                    </li>
                </ul>
}

            </div>
            <div class="form-group">
                <div class="col-lg-9"></div>
                <div class="col-lg-3">
                    <button class="btn btn-success" id="btnSubmit" type="submit">
Submit
</button>
                </div>
            </div>
}

        </div>
    </div>

@section scripts{
@Scripts.Render("~/Scripts/tree.js")
}

Thereafter we create an important part of this example. We create the JavaScript file tree.js with the following code.

(function($)
{
    function Tree() {
        var $this = this;

        function treeNodeClick()
        {
            $(document).on('click', '.tree li a input[type="checkbox"]', function() {
                $(this).closest('li').find('ul input[type="checkbox"]').prop('checked', $(this).is(':checked'));
            }).on('click', '.node-item', function() {
                var parentNode = $(this).parents('.tree ul');
                if ($(this).is(':checked')) {
                    parentNode.find('li a .parent').prop('checked', true);
                } else {
                    var elements = parentNode.find('ul input[type="checkbox"]:checked');
                    if (elements.length == 0) {
                        parentNode.find('li a .parent').prop('checked', false);
                    }
                }
            });
        };

        $this.init = function() {
            treeNodeClick();
        }
    }
    $(function() {
        var self = new Tree();
        self.init();
    })
}(jQuery))

As in the preceding JavaScript code, the create tree view has the following features.

1. When we select an author parent node then all the associated books will be selected.
   
2. When a book is selected the associated parent author will be selected automatically.
   
3. When all child book nodes are selected for a parent author node then the parent node will be selected.
   
4. When the parent node is unselected then the child books will be automatically unselected.

Figure 1 shows the parent child (author-book) tree view.

Figure 1: Author Book Tree View