Creating Tree View In Mvc4 using jquery treeview plugin

00:52
Here i am explaining how to create treeview in mvc4 using jquery tree view plug in..
1. download the jquery treeview plug from this link http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
2. add the js files and css files for treeview like below to the view..
<link href="../../Css/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/jquery.treeview.js" type="text/javascript"></script>

3.create the tree view nodes like below

<ul id="treesevers">
<li>
<div>
Sports
</div>
<ul>
<li>
<div>
Cricket
</div>
</li>
<li>
<div>
Tennis
</div>
</li>
<li>
<div>
Football
</div>
</li>
<li>Hockey </li>
</ul>
</li>
<li>
<div>
Fruits
</div>
<ul>
<li>
<div>
Mango
</div>
</li>
<li>
<div>
Apple
</div>
</li>
<li>
<div>
Grapes
</div>
</li>
</ul>
</li>
</ul>


5.calling the treeview method using jquery

<script type="text/javascript">
$(document).ready(function () {
$("#treesevers").treeview();
});
</script>

 Binding data from db to tree view:

 Contoller code:

 var departments = dc.Department.Select(e => e.departments).ToList();
 List<string> departmentlist = new List<string>();
                        foreach(var department in departments)
                        {
                            departmentlist.Add(department);
                        }
                        ViewBag.departments = departmentlist;

 View Design:

 <ul id="treesevers">
        <li>
            <div>
                Department
            </div>
            <ul>
                @{
                    var deapartmentlist=ViewBag.departments as List<string>;
                    foreach(string department in deapartmentlist)
                    {
                        <li>
                            <div>
                                @department
                            </div>
                        </li>
                    }
                }
            </ul>
        </li>

    </ul>

then run your project observe the treeview like below