Using ASP.NET AJAX TAB Control

• Download source - 2.19 KB

Introduction

ASP.NET AJAX Toolkit is one the most useful and free tools available today to make ASP.NET Rich UI Interactive applications. In this article, I am going to discuss one of the very important tools available in this toolkit. It is the TabContainer control. Once you referred the AJAXControlToolkit.dll in your project, you can add all AJAXControl Toolkits to the toolbox in your Visual Studio .NET IDE. You can download the AJAXControlToolkit.dll from the following location:

• ASP.NET AJAX Control Toolkit

Or please refer to the following article:

• Modal Popup Extender Basics

TabContainer control is a very simple to use tab control like what we are used to in our Windows applications. Just place the required controls in different tab panels (just like Windows forms) and trap the ActiveTabChanged event and do all the necessary actions which suit your application requirements.

Background

I have seen many people (I am also one of them) are used to manually creating individual panels and images to create tabs in ASP.NET applications. Those are actually not tabs, but created and shown in such a way that users can visualize and get a feeling that they are actually working with tabs. I actually worked in these kinds of applications and please believe me, it's not so easy to maintain and definitely the lines of code get increased. AJAXControlToolikit really helps in this context.

Using the Example

I am quite sure that nobody is convinced without actually seeing the code. In this code demonstration, I am using a TabContainer control which has three tabs that I added by clicking on Add Tab Panel option available in the property panel. Now, three different grid views are added in three different tabs and what I am trying to do is on ActiveTabChanged event of each tab dependant grid views will be populated. You can download the code which is provided with this article. Postback can be avoided by simply setting...

AutoPostBack = "False" 

... in ActiveTabChanged event of the Tab Container. By default it is set to true.

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections;
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 

public partial class TabControl : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        if (!IsPostBack) 
        { 
            TabContainer1_ActiveTabChanged(TabContainer1, null); 
        } 
    } 

    protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e) 
    { 
        DataTable dTable_rgstrtn = null; 
        DataTable dTable_btch = null; 
        DataTable dTable_crs = null; 
        
        try 
        { 
            if (TabContainer1.ActiveTabIndex == 0) 
            { 
                dTable_rgstrtn = new DataTable();
                        dTable_rgstrtn.Columns.Add("stdnt_cd"); 
                dTable_rgstrtn.Columns.Add("rgstrtn_cd");
                        dTable_rgstrtn.Columns.Add("sbjct_chsn"); 
                dTable_rgstrtn.Columns.Add("stdnt_stts");
                        
                dTable_rgstrtn.Rows.Add(dTable_rgstrtn.NewRow()); 
                
                dTable_rgstrtn.Rows[0]["stdnt_cd"] = "S0080032003023"; 
                dTable_rgstrtn.Rows[0]["rgstrtn_cd"] = "R0080032003023"; 
                dTable_rgstrtn.Rows[0]["sbjct_chsn"] = "ASP.NET 3.0, SQL 2005, XML"; 
                dTable_rgstrtn.Rows[0]["stdnt_stts"] = "VALID";
            
                GridView1.DataSource = dTable_rgstrtn; 
                GridView1.DataBind(); 
                GridView1.Visible = true; 
            } 
        
            if (TabContainer1.ActiveTabIndex == 1) 
            { 
                dTable_btch = new DataTable();
    
                        dTable_btch.Columns.Add("btch_cd"); 
                dTable_btch.Columns.Add("smstr_cd"); 
                dTable_btch.Columns.Add("smstr_vrsn");
                        dTable_btch.Columns.Add("mx_nmbr_stdnt"); 
                
                dTable_btch.Rows.Add(dTable_btch.NewRow());
                        
                dTable_btch.Rows[0]["btch_cd"] = "B0001"; 
                dTable_btch.Rows[0]["smstr_cd"] = "SM100";
                        dTable_btch.Rows[0]["smstr_vrsn"] = "1.00"; 
                dTable_btch.Rows[0]["mx_nmbr_stdnt"] = "20"; 
                
                GridView2.DataSource = dTable_btch; 
                GridView2.DataBind(); 
                GridView2.Visible = true; 
            } 
            
            if (TabContainer1.ActiveTabIndex == 2) 
            { 
                dTable_crs = new DataTable();
                    
                dTable_crs.Columns.Add("crs_ttl"); 
                dTable_crs.Columns.Add("crs_drtn"); 
                dTable_crs.Columns.Add("smrt_crd_rqrd");
                        
                dTable_crs.Rows.Add(dTable_crs.NewRow()); 
                
                dTable_crs.Rows[0]["crs_ttl"] = "Introducing ASP.NET 3.5"; 
                dTable_crs.Rows[0]["crs_drtn"] = "48 Hrs"; 
                dTable_crs.Rows[0]["smrt_crd_rqrd"] = "Yes"; 
                
                GridView3.DataSource = dTable_crs; 
                GridView3.DataBind(); 
                GridView3.Visible = true; } 
            } 
            
            catch 
            { 
                throw; 
            } 
            finally 
            { 
                dTable_btch = null; 
                dTable_crs = null; 
                dTable_rgstrtn = null; 
            } 
        } 
    }

As the code suggests, there is no complicated logic or handling needed to implement the tab control. If different tabs in the tab panel don't contain any dynamic data or validation, then it is preferred to set the AutoPostBack property to false. This will make the tab operations much more faster. By using AJAX Update Progess, you can make the tab operations much more user interactive.

History

• 29^th July, 2008: Initial post