Click here to Skip to main content
Click here to Skip to main content

Using ASP.NET AJAX TAB Control

, 28 Jul 2008
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)

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

 
QuestionHi Pingroupagbenaza5-Jun-14 0:40 
Questionhi to all Pinmembershalinibharani5-Jul-12 21:13 
QuestionNOT WORKING Pinmemberdavid livingston115-Jun-12 21:01 
Questionhow can work on TabPanel in asp.net with c# PinmemberSashiPrakash12-Jun-12 22:44 
QuestionTab Control. PinmemberManjinder Bajwa22-May-12 21:17 
QuestionOnly Postback Once Pinmemberboydd_uk12-Oct-11 5:35 
GeneralDoes this work with MasterPages Pinmemberjb196121-Aug-09 1:54 
GeneralAjax tab Control as Menu PinmemberNazneen.Insignia16-Aug-09 20:28 
QuestionSetting the Default Tab Pinmemberchana gibber5-Aug-09 4:27 
GeneralNot working for me Pinmembervenkat86_ece17-Jun-09 22:05 
GeneralRe: Not working for me Pinmembersaanj17-Jun-09 23:36 
GeneralRe: Not working for me Pinmembervenkat86_ece18-Jun-09 3:27 
GeneralRe: Not working for me Pinmembersaanj18-Jun-09 3:49 
GeneralRe: Not working for me Pinmembervenkat86_ece19-Jun-09 0:43 
GeneralRe: Not working for me Pinmembersaanj19-Jun-09 1:55 
GeneralRe: Not working for me Pinmembervenkat86_ece19-Jun-09 2:17 
GeneralRe: Not working for me Pinmembervenkat86_ece23-Jun-09 20:40 
Hi sir,
Now its working fine for me.But i want to customize the tabs design.By default itself it's having cssclass and named as 'ajax__tab_xp'.How can i customize the tabs design sir?
 
Thanks and Regards,
Venkat
QuestionHow to load different aspx pages in tabs Pinmembermian ghous22-May-09 11:10 
AnswerRe: How to load different aspx pages in tabs Pinmembersaanj17-Jun-09 23:35 
GeneralAjax tab PinmemberJackuline28-Apr-09 1:30 
GeneralRe: Ajax tab Pinmembersaanj28-Apr-09 7:12 
GeneralTab Pictures Pinmemberkhaliltalal19-Mar-09 1:30 
GeneralRe: Tab Pictures Pinmembersaanj28-Apr-09 7:30 
GeneralRe: Tab Pictures Pinmembersaanj28-Apr-09 7:33 
Generalajax tab panel control PinmemberManikyamba5-Dec-08 0:00 

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 | Mobile
Web01 | 2.8.140709.1 | Last Updated 29 Jul 2008
Article Copyright 2008 by saanj
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid