Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

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 323.2K   15.4K   53   31
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...

C#
AutoPostBack = "False" 

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

C#
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.

Image 1

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)


Written By
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

 
GeneralRe: Tab Pictures Pin
saanj28-Apr-09 7:30
saanj28-Apr-09 7:30 
GeneralRe: Tab Pictures Pin
saanj28-Apr-09 7:33
saanj28-Apr-09 7:33 
Generalajax tab panel control Pin
Manikyamba5-Dec-08 0:00
Manikyamba5-Dec-08 0:00 
AnswerRe: ajax tab panel control Pin
saanj5-Dec-08 3:46
saanj5-Dec-08 3:46 
GeneralArticle is good but for me not working Pin
testarun6-Aug-08 0:21
testarun6-Aug-08 0:21 
AnswerRe: Article is good but for me not working Pin
saanj30-Oct-08 23:29
saanj30-Oct-08 23:29 

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.