Creating a Tabbed Wizard Interface in ASP.NET using jQuery Tabs
A tabbed interface saves UI space, by holding different categories of information in one window. Tabs also simplify navigation between different documents. jQuery has a very cool Tab Plugin. In this article, I will demonstrate how to integrate the Tab Plugin with ASP.NET Panels to create a Tabbed Wizard Interface.
This article will also demonstrate how to maintain the tabs position on postbacks. To demonstrate this, I will be adding an ASP.NET Button control in each Panel which will cause a postback when clicked. We will also move to the next tab in order, creating a wizard like experience for the user.
Note: To keep the example simple, I have not gone into other features like preventing the user from selecting Tab2 if data in Tab1 has not been submitted and so on.
Step 1: Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Create a ‘Scripts’ folder in the Solution Explorer of your project and add these files to this folder. Assuming you have downloaded these files, create a reference to these files in the <head> section of your page as shown below:
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.tabs.js" type="text/javascript"></script>
I am also making use of the CSS provided on the jQuery UI site. Create a ‘CSS’ folder and add the ui.core.css, ui.tabs.css and ui.theme.css files to the folder. Now add reference to these files in the <head> section of your page as shown below:
<link href="CSS/ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="CSS/ui.core.css" rel="stylesheet" type="text/css" />
<link href="CSS/ui.theme.css" rel="stylesheet" type="text/css" />
Step 3: The next step is to create an interface for the tabbed layout. Add a few ASP.NET Panel controls to the page and a Button control inside each panel. I have also added some text to each Panel control and wrapped the Panels inside a parent Panel called ‘tabPanel’. Also observe that each button has an attribute CssClass set to btn
<body>
<form id="form1" runat="server">
<asp:Panel ID="tabPanel" runat="server">
<ul>
<li><a href="#Panel1"><span>One</span></a></li>
<li><a href="#Panel2"><span>Two</span></a></li>
<li><a href="#Panel3"><span>Three</span></a></li>
<li><a href="#Panel4"><span>Four</span></a></li>
</ul>
<asp:Panel ID="Panel1" runat="server">
<p>Active tab when loaded:</p>
<asp:Button ID="Button1" runat="server" Text="Submit and Jump to Next Tab" CssClass="btn" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet
<asp:Button ID="Button2" runat="server" Text="Submit and Jump to Next Tab" CssClass="btn" />
</asp:Panel>
<asp:Panel ID="Panel3" runat="server">
tincidunt ut laoreet dolore magna aliquam erat volutpat.
tincidunt ut laoreet dolore magna aliquam erat volutpat.
tincidunt ut laoreet dolore magna aliquam erat volutpat.
<asp:Button ID="Button3" runat="server" Text="Submit and Jump to Next Tab" CssClass="btn" />
</asp:Panel>
<asp:Panel ID="Panel4" runat="server">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<asp:Button ID="Button4" runat="server" Text="Submit" CssClass="btn" />
</asp:Panel>
</asp:Panel>
</form>
</body>
If you are eager to test out the application, just add the following script to the <head> section..
<script type="text/javascript">
$(document).ready(function() {
$("#tabPanel").tabs();
});
</script>
..and run the application. You will see a working tabbed interface, but with a few limitations, especially in an ASP.NET application scenario. Click on Tab3 and press the Button. You will observe that a postback occurs and instead of retaining Tab3, the focus shifts to Tab1, which is the default tab. ASP.NET users must be familiar with this stateless behavior.
So we have two challenges in front of us – one is to retain the existing tab on postbacks, and the second is to enable a wizard like functionality, which will let the user jump to the next tab automatically on a postback. Let us see how to achieve these two features.
To solve the problem of retaining the current tab on postbacks, we will add a hidden field control to the form.
<asp:HiddenField ID="currTab" runat="server" />
Now add the following script in your <head> section of the page to solve the two challenges of maintaining the current Tab position and automatically navigating to the next Tab on a Postback.
<script type="text/javascript">
$(document).ready(function() {
$("#tabPanel").tabs();
jumpToNextTab();
var btnColl = { "Button1": "2", "Button2": "3", "Button3": "4" };
$('.btn').click(function() {
var tabNo = btnColl[this.id];
$("#<%= currTab.ClientID %>").val(tabNo);
// or replace the above line as $("#currTab").val(tabNo);
});
});
function jumpToNextTab() {
var tabid = $("#<%= currTab.ClientID %>").val();
// or replace the above line as var tabid = $("#currTab").val();
if (tabid != '')
$('#tabPanel').tabs("select", tabid);
}
</script>
As shown in the code above, we start by calling the tabs() function on the ‘tabPanel’ element $("#tabPanel").tabs(); This action enables the default tab functionality provided in the jQuery Tab Plugin. The next line jumpToNextTab(); retrieves the current tab value from the hidden element. During the first run, the value of this hidden element will be empty. However, for all subsequent calls on a postback, this hidden control will store the position of the current tab.
To avoid creating different handlers for each button, we are creating a hash like collection to maintain the Button controls and the index of the next tab
var btnColl = { "Button1": "2", "Button2": "3", "Button3": "4" };
$('.btn').click(function() {
});
Then using the ‘.btn’ class set on each button, we then reference the buttons inside the handler using its ‘id’ or ‘key’ like this - var tabNo = btnColl[this.id];
The final step is to set the value of the hidden variable by retrieving the value against each ‘key’ as shown here $("#<%= currTab.ClientID %>").val(tabNo);
This is all that is required to create a tabbed interface that supports a wizard like interface and remembers the current tab on postbacks.
Run the application. The first tab appears by default
Click on the ‘Submit and Jump to Next Tab’ button. A postback occurs and the second tab is selected automatically.
The same behavior works for the other tabs too! Way cool!
Demo: The sample can be viewed live over here
I hope this article was useful and I thank you for viewing it. The entire source code of this article can be downloaded over here.