Hierarchical Treeview with ASP.NET MVC & jQuery

First of all, an apology for being so quiet over the past few weeks.  I've been putting my blogging aside for a while to chase some pet projects I'm working on.  More on that later.

I did, however, run into a particular situation that I thought would be of interest to anyone adopting ASP.NET MVC and looking for some goodies from jQuery.  Many of you have no doubt started testing the waters with jQuery since it was announced that Microsoft will be shipping the next version of .NET with it included.  If you haven't used jQuery yet, prepare to fall in love!  

In this post, I'm going to cover a simple way to build a deep, hierarchical and feature-rich tree structure with only one line of jQuery script.  jQuery has a huge library of plugins covering all sorts of functionality.  For this, we'll be using a neat plugin from for treeviews.  Here's what you need:
jQuery
jQuery Treeview Plugin

This structure will consist of a category/sub-category relationship that is able to support n-levels of sub-categories with no changes.  To demonstrate, let's look at the SQL table that supports the structure.

Notice the rows with ParentCategoryID set to NULL are the parent categories.  Each row with a ParentCategoryID is a sub-category and relates to it's parent category.  The numbers show the level in outline view.

The jQuery Treeview plug-in requires the resulting HTML to be in a particular unordered list (<ul>) element to parse the tree correctly.  Since we don't know how many levels to expect, we are going to call the MVC user control that renders each node recursively.  This control accepts a single Category item. 

 

We render the name of that category and then check if it has any categories associated with it.  If it does, we recursively render the control again.

In the controller, we are simply passing in the categories where the ParentCategoryID == null.

 

On the host view (Index.aspx), we create the root unordered list with an ID of "treeview" and pass in an array of the Parent categories (categories where the ParentCategoryID == null) from the controller. 

 

Here's a look at the output WITHOUT the jQuery magic.

Now all we have to do is add the libraries we're going to use and hook up the Treeview plugin.

Note:  I always use the jQuery script from the Google API's.  By referencing it from Google's server, you get to ride along their CDN, compression, etc. capabilities.  As an added bonus, if your user has already visited a site that referenced the same library, the jQuery library would be cached on their browser so they don't take the hit of having to download it again.  Sweet!

In our jQuery script, we just get the ul's element ID and call the plugin's treeview() method with no options. 

 

When we refresh the page, we see jQuery has done its magic and now we have collapsable, rich tree view.

There's a ton more options in the Treeview plugin that you can check out for yourself, including async loading with ajax, and tons of customizations.  ASP.NET MVC and jQuery - a match made in heaven!

Hope this helps!