Creating Tabbed Dialogs Using AJAX
Tabbed dialogs come handy when you have too many controls on your web form.
If all the controls are placed at once in front of the user the page may look
cluttered. Instead you can logically group the controls using a tabbed user
interface making it neat and easy to use. One way to develop such a tabbed user
interface is to use MultiView and View server controls. However, being server
controls these controls require a post back while switching between the tabs.
ASP.NET AJAX and HTML tags can be put to use in developing a client side tabbed
dialog. This article is going to show you just that.
The Tabbed user interface in action
Have a look at the figure shown below:
The web form shown above consists of three tabs each showing a GridView
populated with some data. You can switch between the tabs and only the relevant
grid is displayed.
Let's develop a sample web site that resembles the above figure.
Begin by creating a new ASP.NET AJAX enabled web site using Visual Studio.
this._tabselectors = tabselectors;
var selectors = this._tabselectors;
var tabs = this._tabs;
var ts = $get(selectors[i]);
if(ts.id == event.target.id)
if(ts.id == event.srcElement.id)
The code registers a namespace called Demo with AJAX framework. It then
declares a class called TabControl. The constructor of the class takes two
parameters viz. an array of strings containing IDs of tab selector image
controls (<IMG> elements) and an array of strings containing IDs of <DIV>
elements representing the individual tab panels. The constructor stores
these two arrays in member variables _tabselectors and _tabs.
When a user clicks on the tab selector images we want to call a function
called ShowTab() that does the job of showing a tab and hiding the rest of them.
We use $addHandler() shortcut method to attach an event handler function to the
click event of the images. The $addHandler() function takes three parameters -
the DOM element whose event is to be handled, the name of the event and a
delegate to the event handler function. Note the use of Function.createDelegate()
method. This method is used to get a delegate pointing to the event handler
function. The createDelegate() method takes two parameters - a reference to the
class that is supplying the event handler function and the function for which
the delegate is to be created.
When the page is loaded for the first time only the first tab is to be
displayed and rest all should be hidden. The second for loop iterates through
all the tabs and hides them. Then only the first tab is made visible. Notice the
use of visibility and display CSS attributes for showing or hiding the tabs.
Next, we define the prototype of the TabControl class. The TabControl class
consists of just one method - ShowTab(). The ShowTab() function takes a single
parameter named event. This parameter gives you extra information about the
event. If your target browser is Internet Explorer then you need not have this
parameter. However, FireFox requires this parameter to be present.
In the ShowTab() method we need to figure out which of the tab selector
images was clicked by the user. This is done by iterating through all the tab
selectors and comparing ID of the current array element and the event source.
Note how the code takes care of IE as well as FireFox object models. In IE the
target element is accessed as event.srcElement where as in FireFox it is
accessed as event.target. We store the index of the tab selector from the array
in a local variable named index. The second for loop iterates through all the
tabs and sets visibility of individual tabs depending on their index in the
Finally, the TabControl class is registered with the AJAX framework using
This completes our TabControl class. Now let's develop a web form that uses
Open the default web form and ensure that it contains a ScriptManager
Now drag and drop three Image controls on the form and set ImageUrl property
to ~/Images/Tab1.jpg, ~/Images/Tab3.jpg and ~/Images/Tab3.jpg respectively.
These image files are available in the download accompanying this article. It is
assumed that they will be placed in the Images folder of your web site.
Then drag and drop three Panel controls. Each of the Panel controls contain
an SQL data source control and a GridView control. You can use any database to
bind with these grids (the example shown above uses Northwind database). What
controls you place inside the panels is irrelevant to the functioning of the tab
Now switch to the HTML source view of the web form and add a <script> block
var t=new Demo.TabControl(
The pageLoad() function automatically gets called when the page loads in the
browser window. Inside we simply create a new instance of our TabControl class.
We pass an array of Image control IDs and Panel control IDs to the constructor
of TabControl class. Note that the sequence in which we specify Image IDs should
match with their respective Panel IDs.
That's it! You can now run the web form and it should resemble the screen
shot shown at the beginning of this article.