Click here to Skip to main content
15,174,850 members
Articles / Web Development / ASP.NET
Posted 28 Jul 2008


53 bookmarked

Using ASP.NET AJAX TAB Control

Rate me:
Please Sign up or sign in to vote.
4.10/5 (22 votes)
28 Jul 2008CPOL2 min read
Using ASP.NET AJAX TAB Control


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:

Or please refer to the following article:

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.


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; 
            if (TabContainer1.ActiveTabIndex == 0) 
                dTable_rgstrtn = new DataTable();
                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.Visible = true; 
            if (TabContainer1.ActiveTabIndex == 1) 
                dTable_btch = new DataTable();
                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.Visible = true; 
            if (TabContainer1.ActiveTabIndex == 2) 
                dTable_crs = new DataTable();
                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.Visible = true; } 
                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.

Image 1



  • 29th July, 2008: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United Kingdom United Kingdom
A SharePoint Kid playing in Kolkata, India.

Working with one of the leading software company and currently working with SharePoint technologies.

Enjoys Cricket, National & World Music.

Favourite band include Linkin Park, Beatles, Oasis, Match Box 20, Noori, Nirvana, Nickelback etc.

Comments and Discussions

GeneralMy vote of 5 Pin
Member 410934417-May-18 18:46
MemberMember 410934417-May-18 18:46 
QuestionERROR Pin
Member 1136870114-Sep-15 2:20
MemberMember 1136870114-Sep-15 2:20 
QuestionAjax control Pin
Member 1028814021-Sep-14 22:49
professionalMember 1028814021-Sep-14 22:49 
QuestionHi Pin
agbenaza5-Jun-14 1:40
Memberagbenaza5-Jun-14 1:40 
Questionhi to all Pin
shalinibharani5-Jul-12 22:13
Membershalinibharani5-Jul-12 22:13 
david livingston115-Jun-12 22:01
Memberdavid livingston115-Jun-12 22:01 
Questionhow can work on TabPanel in with c# Pin
SashiPrakash12-Jun-12 23:44
MemberSashiPrakash12-Jun-12 23:44 
QuestionTab Control. Pin
Manjinder Bajwa22-May-12 22:17
MemberManjinder Bajwa22-May-12 22:17 
QuestionOnly Postback Once Pin
boydd_uk12-Oct-11 6:35
Memberboydd_uk12-Oct-11 6:35 
GeneralDoes this work with MasterPages PinPopular
jhb121-Aug-09 2:54
Memberjhb121-Aug-09 2:54 
GeneralAjax tab Control as Menu Pin
Nazneen Zahid16-Aug-09 21:28
MemberNazneen Zahid16-Aug-09 21:28 
QuestionSetting the Default Tab Pin
chana gibber5-Aug-09 5:27
Memberchana gibber5-Aug-09 5:27 
GeneralNot working for me Pin
venkat86_ece17-Jun-09 23:05
Membervenkat86_ece17-Jun-09 23:05 
GeneralRe: Not working for me Pin
saanj18-Jun-09 0:36
Membersaanj18-Jun-09 0:36 
GeneralRe: Not working for me Pin
venkat86_ece18-Jun-09 4:27
Membervenkat86_ece18-Jun-09 4:27 
GeneralRe: Not working for me Pin
saanj18-Jun-09 4:49
Membersaanj18-Jun-09 4:49 
GeneralRe: Not working for me Pin
venkat86_ece19-Jun-09 1:43
Membervenkat86_ece19-Jun-09 1:43 
GeneralRe: Not working for me Pin
saanj19-Jun-09 2:55
Membersaanj19-Jun-09 2:55 
GeneralRe: Not working for me Pin
venkat86_ece19-Jun-09 3:17
Membervenkat86_ece19-Jun-09 3:17 
GeneralRe: Not working for me Pin
venkat86_ece23-Jun-09 21:40
Membervenkat86_ece23-Jun-09 21:40 
QuestionHow to load different aspx pages in tabs Pin
mian ghous22-May-09 12:10
Membermian ghous22-May-09 12:10 
AnswerRe: How to load different aspx pages in tabs Pin
saanj18-Jun-09 0:35
Membersaanj18-Jun-09 0:35 
GeneralAjax tab Pin
Jackuline28-Apr-09 2:30
MemberJackuline28-Apr-09 2:30 
GeneralRe: Ajax tab Pin
saanj28-Apr-09 8:12
Membersaanj28-Apr-09 8:12 
GeneralTab Pictures Pin
khaliltalal19-Mar-09 2:30
Memberkhaliltalal19-Mar-09 2:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.