Creating a Tabbed Wizard Interface in ASP.NET using jQuery Tabs

Posted by: Suprotim Agarwal , on 5/11/2009, in Category jQuery and ASP.NET
Views: 71185
Abstract: 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.
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.
I also assume you are familiar with jQuery. If you are new to jQuery, then before moving ahead, I would recommend you to check out Using jQuery with ASP.NET - A Beginner's Guide. Please do take a note that this article uses jQuery’s current version - jQuery 1.3.2 and jQuery 1.3.2 Visual Studio 2008 Autocomplete documentation.
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
 
jQueryTabInterface_1
 
Click on the ‘Submit and Jump to Next Tab’ button. A postback occurs and the second tab is selected automatically.
 
jQueryTabInterface_2
 
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.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Mahmud Hasan on Saturday, July 11, 2009 11:02 PM
It really helps, thanks.
Comment posted by Ramesh on Monday, July 13, 2009 12:33 AM
Great work!!!
Comment posted by Chad on Tuesday, July 14, 2009 10:14 AM
What if you have a gridview in a user control and you use jquery tabs to dynamically load that user control into a tab. That gridview's postback for paging and sorting won't work because it's posting back to the wrong page.

How do you fix that?
Comment posted by Ben on Wednesday, July 15, 2009 3:17 PM
Not sure why you need to use asp panels at all if using jquery.. just extra bloat
Comment posted by Suprotim Agarwal on Friday, July 17, 2009 2:36 AM
Chad: In that case, you will have to keep another Hidden Field to 'remember' the current page. You would also need to detect which control caused the postback in this case.

Ben: I agree. Panel can be replaced with DIV's. I have seen users using the 'GroupingText' feature of Panel inside the Tab to get the border and a label, so thought to build up the example using a Panel. In a real app however, I would prefer a DIV.
Comment posted by naresh on Friday, July 17, 2009 11:13 PM
its nice prescreption
Comment posted by Manish on Sunday, July 26, 2009 3:23 AM
Hi I have followed the steps given by you.But the web page is not coming in tabbed format.Its just displaying the panels and buttons in the page.Please help me on this.
I am using asp.net 3.5
Comment posted by Not working when tabs used with page having master pages on Saturday, September 12, 2009 9:41 AM
it works when without using the master page in the project
but when i used the same code in child page which has a master page it doesnot works.
Im also using forms authentications & given acess to the CSS folders and SCRIPTS folder

Plz help me i m stuckkkkkk

Comment posted by Rajkiran on Monday, September 14, 2009 1:41 AM
very bad site no reply.
I will not visit this site again
Comment posted by santosh on Monday, November 29, 2010 6:24 PM
Hi Suprotim Agarwal,

I have similar requirement of using the Tab wizard, but i am using master pages and i am not able to make use of the sample provided by u.

Could you please help me fix the same using master pages.
SA
Comment posted by Suprotim Agarwal on Wednesday, December 1, 2010 1:51 AM
Santosh: TO access controls on MasterPages using jQuery, check this article of mine

http://www.devcurry.com/2009/07/access-aspnet-control-on-masterpage.html
Comment posted by santosh on Wednesday, December 1, 2010 5:32 PM
Thanks for your reply Suprotim, i was trying to replicate the tab wizard sample using a master page but could not succeed... could you please post the updated version of the tab wizard using master pages and jquery...
I am very new to jquery.
Regards
SA
Comment posted by vishvnath rajput on Tuesday, April 10, 2012 5:05 AM
gwalior best
Comment posted by smith solace on Wednesday, October 24, 2012 1:52 PM
fact is i am unable to download other two js script as it gives error of 404 not found error for ui js files....
Comment posted by Binay on Wednesday, May 14, 2014 2:07 AM
Can you insert asp.net gridview in panel

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook