Note: This example was built using jQuery UI 1.7.2 (which packages jQuery 1.3.2).  If you use jQuery 1.4.1, this example will break.  jQuery UI 1.8 will fix.  Thanks to mvcuser.  http://dev.jqueryui.com/ticket/5065

In my current project, I’ve had the need to use a Tab control but the data inside of the tabs was way too hefty to load initially when page loaded for the first time.  Luckily, the jQuery Tab control provides this functionality for me already.  However, I needed to find a way to easily organize the tab content on the server.  ASP.NET MVC provides a great structure for this called Partial Views.

In this quick tutorial, I’ll give you a run down on how to set up a jQuery tab control and how to configure ASP.NET MVC Partial Views to work with the tab controls.

Configuring Your View

Since we’re working in ASP.NET MVC, we’re going to talk about our pages in the form of Views.  I’m working with the default “blue screen” ASP.NET MVC application.  After you’ve downloaded and linked the jQuery and jQuery UI scripts to your View (either in the view itself or in the master page), you’re going to add the following code:

    <script type="text/javascript"><!--mce:0--></script>
 
<div id="tabContainer">
 
<ul>
 
	<li><a href="/Home/GetHomeTab">Home</a></li>
 
 
	<li><a href="/Home/GetProductTab">Products</a></li>
 
 
	<li><a href="/Home/GetContactUsTab">Contact Us</a></li>
 
</ul>
</div>

This code replaces the existing content section in the Index view for the Home controller.  The most interesting part of this is the tabContainer div.  Inside of it, we’ve declared a unordered list, and several list items.  jQuery UI uses this determine how to format the tab control.

You’ll notice that inside of our list items (<li> tags) that we’re using links to various action links (and yes, I know I could use HTML helpers to build these links for me).  Now, we need to build the views that will be rendered inside the tabs.

Here is an example of building the GetHomeTab view.  Nothing special, but make sure that you select Create a partial view.  Partial views won’t have any of the HEAD, HTML, or BODY fluff inside of them.  These are perfect for our tabs.

Repeat for GetProductTab and GetContactUsTab.  Add a few lines of text to the views in so you know they’re working.  Here’s an example of what my GetHomeTab looks like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
 
<h1>Home</h1>
 
 
You're inside the Home tab, which was rendered via a partial view!

Before we can test, we need to update our Controller to return the views as requested.  Here’s the additions you’ll make to your Home controller:

public ActionResult GetHomeTab()
{
return PartialView();
}
public ActionResult GetProductTab()
{
return PartialView();
}
public ActionResult GetContactUsTab()
{
return PartialView();
}

You can attach models to these views and they’ll work fine.  Build and run the application.

And to prove that everything is working as AJAX call backs, we can look at FireBug:

Firebug will show that when I clicked on the Contact Us tab, it automatically made an AJAX call to our Home controller and retrieved the partial view.

That’s awesome Kevin, now Why?

Tabs can be bloaty.  They contain a ton of markup for rendering inside the tab, and all this needs to be maintained within a single file.  By loading our pages dynamically, we’re eliminating the strain on the server.  Imagine we have 10 tabs.  If the user only needs to access two of them, we’re wasting bandwidth by downloading all the additional markup.  Then the browser needs to render it and store it, waiting for the user to come along and do something.  In an AJAX environment, we only download tabs as needed.  Much less strain on the server.

Second, maintaining 11 small files is much easier than maintaining 1 large file.  If you need to make a change to the Contact Us tab, you don’t need to go searching through the main page to find it.  Instead, you locate the GetContactUsTab view and make your changes!

I hope you’ve learned something from this, and maybe implement it into your future projects.  I can tell you that it definitely makes a difference in my app where there are 10 tabs containing a lot of data.  Separating out all the pieces makes it much easier to maintain and update.

• Previous Entry: INETA Mentor for Virginia
• Next Entry: Colossal Failures