Online courses in ASP.NET MVC / Core, Angular, and Design Patterns. Read more...
Know the inner dimension of personal growth and well-being. A practical yogic approach to success, happiness, and inner transformation. A unique sequence of Mantra, Pranayama, Hand Mudras and Meditation. Conducted by Bipin Joshi in Thane. See more details here.

Creating Tabbed Dialogs Using AJAX

Introduction

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. Then add a new JavaScript file to the web site using "Add New Items" dialog. Add the following JavaScript class into the file.

Type.registerNamespace("Demo");

Demo.TabControl=function(tabselectors,tabs)
{
    this._tabselectors = tabselectors;
    this._tabs=tabs;
    
    for(i=0;i<tabselectors.length;i++)
    {
        $addHandler($get(tabselectors[i]),'click',
	Function.createDelegate(this,this.ShowTab));
    }
    
    for(i=0;i<tabs.length;i++)
    {
        $get(tabs[i]).style.visibility='hidden';
        $get(tabs[i]).style.display='none';
        $get(tabselectors[i]).style.cursor='pointer';
    }
    $get(tabs[0]).style.visibility='visible';
    $get(tabs[0]).style.display='block';

}

Demo.TabControl.prototype=
{
    ShowTab:function(event)
    {
        var selectors = this._tabselectors;
        var tabs = this._tabs;
        var index=-1;
       
        for(i=0;i<selectors.length;i++)
        {
            var ts = $get(selectors[i]);
            if(event.target)
            {
                if(ts.id == event.target.id)
                {
                    index=i;
                    break;
                }
            }
            else
            {
                if(ts.id == event.srcElement.id)
                {
                    index=i;
                    break;
                }
            }
        }
        for(i=0;i<tabs.length;i++)
        {
            if(i!=index)
            {
                $get(tabs[i]).style.visibility='hidden';
                $get(tabs[i]).style.display='none';
            }
            else
            {
                $get(tabs[i]).style.visibility='visible';
                $get(tabs[i]).style.display='block';
            }    
        }
    }
}

Demo.TabControl.registerClass("Demo.TabControl");

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 array.

Finally, the TabControl class is registered with the AJAX framework using registerClass() method.

This completes our TabControl class. Now let's develop a web form that uses the TabControl JavaScript class.

Open the default web form and ensure that it contains a ScriptManager control. Add the JavaScript file we created earlier to the Scripts collection of the 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 control.

Now switch to the HTML source view of the web form and add a <script> block in the <head> section. Add the following JavaScript function to the <script> block.

function pageLoad()
{
var t=new Demo.TabControl(
['Image1','Image2','Image3'],
['Panel1','Panel2','Panel3']);
}

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.




Bipin Joshi is a software consultant, an author and a yoga mentor having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 09 Sep 2007



Tags : ASP.NET AJAX Web Forms Server Controls Custom Controls