Click here to Skip to main content
11,412,578 members (70,676 online)
Click here to Skip to main content

Using ASP.NET AJAX TAB Control

, 28 Jul 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Using ASP.NET AJAX TAB Control

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:

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.

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.

AJAXTabControl/Sc2.JPG

History

  • 29th July, 2008: Initial post

License

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

Share

About the Author

saanj
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.
Follow on   Twitter

Comments and Discussions

 
QuestionAjax control Pin
Member 10288140 at 21-Sep-14 22:49
memberMember 1028814021-Sep-14 22:49 
QuestionHi Pin
agbenaza at 5-Jun-14 1:40
groupagbenaza5-Jun-14 1:40 
Questionhi to all Pin
shalinibharani at 5-Jul-12 22:13
membershalinibharani5-Jul-12 22:13 
QuestionNOT WORKING Pin
david livingston1 at 15-Jun-12 22:01
memberdavid livingston115-Jun-12 22:01 
Questionhow can work on TabPanel in asp.net with c# Pin
SashiPrakash at 12-Jun-12 23:44
memberSashiPrakash12-Jun-12 23:44 
QuestionTab Control. Pin
Manjinder Bajwa at 22-May-12 22:17
memberManjinder Bajwa22-May-12 22:17 
QuestionOnly Postback Once Pin
boydd_uk at 12-Oct-11 6:35
memberboydd_uk12-Oct-11 6:35 
GeneralDoes this work with MasterPages Pin
jb1961 at 21-Aug-09 2:54
memberjb196121-Aug-09 2:54 
GeneralAjax tab Control as Menu Pin
Nazneen.Insignia at 16-Aug-09 21:28
memberNazneen.Insignia16-Aug-09 21:28 
QuestionSetting the Default Tab Pin
chana gibber at 5-Aug-09 5:27
memberchana gibber5-Aug-09 5:27 
GeneralNot working for me Pin
venkat86_ece at 17-Jun-09 23:05
membervenkat86_ece17-Jun-09 23:05 
GeneralRe: Not working for me Pin
saanj at 18-Jun-09 0:36
membersaanj18-Jun-09 0:36 
GeneralRe: Not working for me Pin
venkat86_ece at 18-Jun-09 4:27
membervenkat86_ece18-Jun-09 4:27 
GeneralRe: Not working for me Pin
saanj at 18-Jun-09 4:49
membersaanj18-Jun-09 4:49 
GeneralRe: Not working for me Pin
venkat86_ece at 19-Jun-09 1:43
membervenkat86_ece19-Jun-09 1:43 
GeneralRe: Not working for me Pin
saanj at 19-Jun-09 2:55
membersaanj19-Jun-09 2:55 
GeneralRe: Not working for me Pin
venkat86_ece at 19-Jun-09 3:17
membervenkat86_ece19-Jun-09 3:17 
GeneralRe: Not working for me Pin
venkat86_ece at 23-Jun-09 21:40
membervenkat86_ece23-Jun-09 21:40 
QuestionHow to load different aspx pages in tabs Pin
mian ghous at 22-May-09 12:10
membermian ghous22-May-09 12:10 
AnswerRe: How to load different aspx pages in tabs Pin
saanj at 18-Jun-09 0:35
membersaanj18-Jun-09 0:35 
GeneralAjax tab Pin
Jackuline at 28-Apr-09 2:30
memberJackuline28-Apr-09 2:30 
GeneralRe: Ajax tab Pin
saanj at 28-Apr-09 8:12
membersaanj28-Apr-09 8:12 
GeneralTab Pictures Pin
khaliltalal at 19-Mar-09 2:30
memberkhaliltalal19-Mar-09 2:30 
GeneralRe: Tab Pictures Pin
saanj at 28-Apr-09 8:30
membersaanj28-Apr-09 8:30 
GeneralRe: Tab Pictures Pin
saanj at 28-Apr-09 8:33
membersaanj28-Apr-09 8:33 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150427.1 | Last Updated 29 Jul 2008
Article Copyright 2008 by saanj
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid