How Do I: Use the ASP.NET AJAX Tabs Control?

This video demonstrates the basics of the Tabs control from the ASP.NET AJAX Control Toolkit, with which you can create a set of tabs to organize content on a Web page. The selected tab is maintained across post backs, making the Tabs control ideal for form-based administration pages.

Presented by Joe Stagner

Duration: 8 minutes, 13 seconds

Date: 22 June 2007

Watch the video   |   Download the video   |   Get VB code  or  C# code

Video downloads: WMV | Zune | iPod | PSP | MPEG-4 | 3GP

Audio downloads: AAC | WMA | MPEG-4 | MPEG-3 | MPEG-2

Comments : 26

Leave a Comment

Rose123_123 : On March 05, 2008 1:18 AM said:

i want to know the dynamic creation of tabs on some events like button clicked or on selectedindexchanged of dropdownlist...

and the number of tabs created should be based on the item selected by dropdowm list..

JoeStagner : On March 14, 2008 11:14 AM said:

There is good news and bad news.

The good news is that tabs are easy to add.

       TabPanel[] newpanels = new TabPanel[NumNewTabs];

       for ( iCnt = 0; iCnt < 3; iCnt++)

       {

       newpanels[iCnt] = new TabPanel();

       newpanels[iCnt].HeaderText = String.Concat("New Panel" + iCnt);

       TabContainer1.Tabs.Add(newpanels[iCnt]);

       }

The bad news is that if your AJAX application si doing page postbacks, your added tabs don't survive a postback so you will have to keep that of what you've added and RE-created the added Tabs in the Page_Init method.

rhmayer : On March 14, 2008 10:22 PM said:

I just downloaded the Ajax Control Toolkit 3.5 for VS 2008.  However, after loading the controls into my toolbox, I see the  TabContainer control, but not the TabPanel control which is used in the video.

JoeStagner : On March 15, 2008 9:48 AM said:

TabContainer is the root control.

Panels are like templates inside the container.

mohanmothupally : On March 17, 2008 3:49 AM said:

Hi Joe,

I am trying to start using the AjaxControlToolkit. I followed all the

instructions on the following page:

ajax.asp.net/.../Setup.aspx

The only thing I did differently is I did not create my website from the

"ASP.NET AJAX Web Site" template, because my site already exists, and I

don't want to recreate the whole thing. I can see all the "AJAX Extensions"

and "AJAX Control Toolkit" controls listed in Visual Studio .NET 2005's

Toolbox.

The control i am making use of is tab control.

I have added a script manager and a tab control. Then a tab panel inside the tab control. Added contenttemplate to the tab panel.

when i run the application, nothing gets displayed.

please find my code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Request.aspx.cs" Inherits="Request" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

   Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/.../xhtml1-transitional.dtd">

<html xmlns="www.w3.org/.../xhtml" >

<head runat="server">

   <title>Untitled Page</title>

</head>

<body>

   <form id="form1" runat="server">

   <div>before mgr

       <asp:ScriptManager ID="ScriptManager1" runat="server">

       </asp:ScriptManager>

       <cc1:TabContainer ID="TabContainer1" runat="server" >

           <cc1:TabPanel ID="TabPanel1" runat="server">

           <ContentTemplate>hello</ContentTemplate>

           <HeaderTemplate>tab1</HeaderTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel2" runat="server">

           <ContentTemplate>hello2</ContentTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel3" runat="server">

           <ContentTemplate>hello3</ContentTemplate>

           </cc1:TabPanel>

       </cc1:TabContainer>

       after mgr

   </div>

   </form>

</body>

</html>

Any help is highly appreciated. Thanks in advance.

JoeStagner : On March 20, 2008 5:28 PM said:

What DOES happen? Feel free to email me off line through my blog at www.JoeOn.net

assafg2 : On March 23, 2008 8:10 AM said:

i dont know why but i cant get a diffrent  bg color fot the tab's

i have try this 2 and...

<cc1:TabContainer ID="TabContainer1" runat="server" BackColor="Aqua">

   <cc1:TabPanel ID="tab1" runat="server" HeaderText="חופשות" BackColor="Green">

<ContentTemplate>

any idea ?

NettaA : On March 25, 2008 7:47 AM said:

you have to use css, like here:

www.asp.net/.../Tabs.aspx

(i'm working on it right now...)

NettaA : On March 25, 2008 7:58 AM said:

Hi Joe, I have a question..

I want my tabs-headers to have rounded-corners + shadows.

I almost got everything OK, using CSS, but it is still not 100%.

So I thought maby i should put tables in the HeaderTemplates, this way:

                   <HeaderTemplate>

                       <div style="overflow-y:visible;">

                           <table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%">

                               <tr>

                                   <td style="background-image: url(/_layouts/images/RightTab1.gif); width: 6px">

                                   </td>

                                   <td style="background-image: url(/_layouts/images/CenterTab1.gif); background-repeat:repeat-x; ">

                                       bla bla

                                   </td>

                                   <td style="background-image: url(/_layouts/images/LeftTab1.gif); width: 6px">

                                   </td>

                               </tr>

                           </table>

                       </div>

                   </HeaderTemplate>

my question is: can i use different HeaderTemplate for active and non-active tab ?

Thanks

Chris Rivard : On March 25, 2008 9:46 AM said:

Is there a way to move the tabs from the top to the bottom?  Would this be via CSS?  If so, could you provide an example.  Thanks!

fizch : On March 31, 2008 11:15 AM said:

How do I get the tab panel to postback on a client click event? The tab container has the active tab changed event, but that fires after the tab has changed, and the content that was on the previous tab is out of scope. The client clic event actually fires at the correct time.

LukeNLaura : On March 31, 2008 1:31 PM said:

Hi,

I need help on TabContainers where it appears on a modalpopup.  The controls that are within the TabPanels are getting rendered on the screen but stepping through the code, the values of the controls (eg. textboxes) are null.  So when I try to reference the textbox to get the value, the application returns back an null reference error.

I am new to AJAX controls and so any help will be greatly appreciated.

JoeStagner : On April 01, 2008 7:09 AM said:

Chris - relocating the tabs is not supported in this version of the control, but you could modify the source.

Fizch - You can postback with the ScriptManager  (I'll post a video this week.) The fact that the orrigioal Tabs content is not visible doesn't mean that it's not still on the form and therefore posted back.)

LukeNLaura - a TabCotainer inside a Modal Dialog may not work. Feel free to email me (use the contact link on my blog at www.JoeOn.net) and I'll try to help.

NIckKhaja : On April 01, 2008 3:43 PM said:

Hi Joe,

I am have a tab container with 21 tab panels on my page.

To reach to the 21st panel I have to scroll the page horizontally instead of this I want to add a small button or kind of drop down list in which I can see the rest or the complete list of the tab panels.

Thanks.

pardo : On April 01, 2008 10:40 PM said:

The tabs control works great. However, I'm generating mine at runtime. When I wire up:

tabContainer1.attributes.add("OnClientActiveTabChanged", "SwitchTabs();")

My function "SwitchTabs();" doesn't execute. I'm able to fire execute the function if I create the control at design time, but this doesn't serve my needs. Any advice?

Thanks

pardo

parth_192 : On April 03, 2008 7:34 AM said:

Hi how can i use this tab control for two level tabs..like first level of Parent tab and on clicking on that there is another tab control under that parent tab which are child tab...can u help me out..

Thanks,

Parthiv

JoeStagner : On April 03, 2008 6:20 PM said:

Guys - great that your pushing the limits. In order to do those kinds of things that the control is not designed to do you will need to customize the code. Luckilly, it's open source !

Reclaimer : On April 16, 2008 8:58 AM said:

[quote]The bad news is that if your AJAX application si doing page postbacks, your added tabs don't survive a postback so you will have to keep that of what you've added and RE-created the added Tabs in the Page_Init method.[/quote]

any tutorials? thanks.

JoeStagner : On April 16, 2008 2:22 PM said:

Actually - I have did a tutorial that should be live here late tomorrow. :)

Dollarjunkie : On April 16, 2008 3:29 PM said:

I have a question. From the video tutorial I noticed you mentioned over and over that one could place any HTML and dynamic content within the content tags of the TabPanel Control and I wanted to know if the dynamic content could include, say, a repeater control or any other server side controls? I tried those a couple of time and wanted to get info from the expert if it is even possible to do such.

pandacad : On April 16, 2008 6:19 PM said:

I try to use the css styles but it not works, is necesary override some procedure?

Tab control steal working with a default webresource.

I'm using these css styles what is wrong?

.ajax__tab_xp .ajax__tab_header {font-family:Arial,Verdana,Tahoma;font-size:67.5%;backgroun d:url(img/tab-line.gif) repeat-x bottom;}

.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(img/tab-right.gif) no-repeat right;height:21px;}

.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(img/tab-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(img/tab.gi f) repeat-x;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(img/tab-hover-right.gif) no-repeat right;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(img/tab-hover-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(img/tab-hover.gif) repeat-x;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(img/tab-active-right.gif) no-repeat right;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(img/tab-active-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(img/tab-active.gif) repeat-x;}

.ajax__tab_xp .ajax__tab_body {font-family:Arial,Verdana,Tahoma;font-size:67.5%;border:1p x solid #FF9900;border-top:0;padding:8px;background-color:#ffffff;}

And CssClass in tab control is equal to "ajax__tab_xp"

Thanks.

JoeStagner : On April 16, 2008 6:43 PM said:

Did they work when you tried them ? :)

I havn't treid them all but if you have a specific scenario that you are interested in, send me email.

gnuts4lunch : On May 09, 2008 7:24 AM said:

how can i create the tabs dynamically from a web.sitemap?

thanks

dollyp : On May 09, 2008 9:23 AM said:

i have a similar problem to one of the comments above. I'm using the Ajax toolkit with VS 2005 and create a simplae page derived from a master page and dropped a tab container on it and created two tab panels but everytime i run it, the tab conatiner is not displayed at all. here's my code below, any help pls:

<asp:Content ID="Content1" ContentPlaceHolderID="PagePlaceHolder" Runat="Server">

   <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">

       <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">

       <ContentTemplate>hello</ContentTemplate>

       </cc1:TabPanel>

       <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">

       <ContentTemplate>hi</ContentTemplate>

       </cc1:TabPanel>

   </cc1:TabContainer>

   <asp:ScriptManager id="ScriptManager1" runat="server">

   </asp:ScriptManager>

vrao : On May 15, 2008 8:59 AM said:

The tutorial was help full

1. can we get more video demonstration on how to use Css for

  Ajax Tab Manager

2. On How to carry Server Variables

3. How to check sessions if I am using a log in using Ajax Tab

thank you

jay prad : On May 16, 2008 6:50 AM said:

Hi Joe

I have two questions here

first is:I like the form of using tab control to navigate for my whole site because the user doesn't need to leave this page and every thing around (outside) tab control not going to effect if the user click each tab to display each page. The question is if those tab contain lots of memory to collect for example video files and sound and a lot more. Will it effect the loading time to open the home page which shown by default using the first tab.

second question: you metion we can use any kind of file in tab container for the tab to call that function to be display or used. Say my site have 3 tabs being used as a main menu for the site. first tab use for "home" page, second called "watch video" and use for calling this page have a silverlight video set to auto play and the third tab call log in and call third named "Login" to work.

Now what is the code to put in tab container to call the video page to work when the user click the second tab.

I don't know that make sense

Thank for reading Joe  

Leave a Comment

You must be logged in to leave a comment. Click here to log in.