ASP.NET MVC3 Tree View with jsTree

In ASP.NET MVC, There is no server controls like what we have in Web forms to render TreeView/ Menu, We need to write our own markup to do so. Even in all those webforms controls, it is generating some HTML which renders a tree or a menu. Here we are going to create an ASP.NET MVC3 Tree View with jsTree plugin.

MVC3 Tree View with jsTree

We will be creating an organizational tree which shows a hierarchical representation of who works for whom in an organization. We will have a table which stores the employee information along with who their manager is like below. I used SQL Server Compact Edition database in this project to store our data. To render the tree,  we are using jsTree plugin which converts our ul-li elements to a tree structure.

Each Employee record has a ManagerID which tells who is the manager of that employee. I set the First employee's ManagerID value as NULL, because he is the President of the company and he do not have any manager.

Now, Let's create a model to represent the employee. we will create a POCO Class like this.

Now we need a data access method to read data from our SQLServer compact database and return a list of  UserViewModel object. Since my demo program stores table in SQL Server compact edition database, i am using SqlCeConnection class and SqlCeCommand class to talk to it and get data.These two classes belongs to System.Data.SqlServerCe namespace. You need to add a using statement to import this namespace to your data access class.

So GetAllUsers method with give us a list of User class objects

Now we need to convert this list of objects (which is  a sequential list) to hierarchical form. that means, All the employees belongs to Joe, should be listed in his Employees property. So Let's do some tricky code here to change the sequential list to hierarchical structure. So Let's do that in our action method.

You can see that we are getting a list of Employee objects using our data access method and then getting the president of the company who does not have any manager so that we can show him as the first /top node of the organization tree.(Assuming that we will have only one president). We are getting the user object which has a null value for the ManagerID column as the president.

Setting the child objects.

After getting the president node, We are going to call SetChildren method which accepts an  Employee Model and the List of Total Users/Employees and then finding out the children / Employees reports to this employee. We are  doing recursion to set the children because we do not know how many layers of employees will be there in the hierarchy. Recursively calling the SetChildren function will set the child Employees for all the employees and at the end of that we will be getting a single Employee object with Children property properly filled.

And if you expand the Employees property further you can see the employees works under this employee.

Now let's update our view to have the sufficient markup to render the tree. Since we are using  jsTree, We need to include jsTree library to the page. I included the default css file also. I updated the css file to show a user  icon instead of showing the default directory icon.

Our view is strongly typed to Employee class, which will be representing the president / top node of the hierarchy.  After printing the Name property value of the first node, We are calling a partial view called Children and passing our Model to that. So i created a partial view called Children.cshtml under the same view folder and have markup like this

You can see recursion here also. We are calling the Childrens partial view recursively to render the child's for each node.

Now let's see how  it works when you run the project.

You can customize the tree look and feel by changing the css  or playing with the options of  jsTree. You can download a working sample which i created to write this post here.

Hope this helps. Do not forget to leave a comment, if this post was useful to you. :)

 NSUGX3J7C2U3