jQuery Based Tab Control for ASP.Net

This post talks about creating a jQuery based tab control that allows creating tabbed user interfaces easily. Developer can programmatically add, remove, and reorder the tabs. It saves developer from comprehending the jQuery API in order to create tabbed interface. Using this control the developer avoids plumbing required to get the jQuery based tab interface going. The tab control that we will create will allow to keep form fields also in the tab. The tab control will have following features :

Multiple Tabs – Lets developer to add as many tabs as required by stacking tabs in multiple rows. 

Wizard Creation – Lets developer create a wizard like data entry control. Once the form is submitted and validated successfully, only final tab in the wizard will be enabled. All previous tabs are rendered inactive. 

Integrated Date Picker – Lets developer specify which text boxes to associate a jQuery date picker with. 

All Supported Locale for Date Picker – Lets developer specify in which locale to render the jQuery date picker. 

ASP.Net Validations – Supports both client and server ASP.Net validations. 

Navigation Buttons – Lets developer to add client side buttons to navigate back and forth on tabs. 

Validation On Navigation – Lets developer to do client side validations when tab selection is changed. 

Application Frameworks – .Net 3.5, ASP.Net 3.5 and jQuery 1.5.1 and jQueryUI 1.8.1. 

The tab control renders all the tabs using jquery UI API. Each tab is an ASP.Net custom control (ASCX). Tab controls (ASCX) are housed in a wrapper control called GDTabContainer. This wrapper control is responsible for loading all the child controls and rendering the tab markup with the help of a MarkupHelper class. GDTabContainer in turn is added to an ASP.Net PlaceHolder control on the page. Tab properties are stored in a class called GDTabDetails which has following properties as depicted below:

Project's source is available for download at Codeplex here.

 How is the markup generated 

As we know that jQuery expects certain markup (unordered list as tab links and stacked divisions as tabs) and script in order to render division elements as tabs, associate jQuery date picker with text boxes. I generate this markup/scripts by processing the information stored in the GDTabContainer class.  I have overridden the 'Render' method of the page to control markup generation. In the overridden method I do following steps to generate the markup:

• Fetch the ASP.Net generated control name from control collection and update the name in the list of      GDTabDetails class, so that MarkupHelper class uses these generated names in jQuery selectors, just so that selectors work faster on client.
• Call the GetjQuery method of MarkupHelper class to render necessary jQuery script to initialize the tabs and datepicker on the document.ready event on client.
• Render the unordered list that makes up the tab links.
• Iterate over the list of GDTabDetails class and render tab division tags along with corresponding custom control markup by calling 'RenderContol' on each control. 

How to use

To use the control do following steps:

• Include GDTabContainer.ascx and its code behind in your project.
• Include following jQuery framework files (CSS/JS) in your page or master page.

Last two scripts are locale specific; include only the script for the locale you are developing your application in.

• Initialize tab information like below in OnInit event of your page like below. In this step you simply specify which control (ASCX) will be shown on which tab, identity of the <div> that will hold the control’s rendered markup etc.

• Initialize the GDTabContainer control in OnInit event of your page like below.

Notice that we just initialized the TabInformation property of the GDTabContainer with the ‘tabDetails’ list which we populated in previous step.

This is all that is required to get the tabbed interface going. After rendering the sample included looks like below: