Click here to Skip to main content
11,636,889 members (75,706 online)
Click here to Skip to main content

ASP.NET Ajax Toolkit TabStrip Control

, 6 Jul 2007 119.6K 2.3K 34
Rate this:
Please Sign up or sign in to vote.
A tab strip control based on the ASP.NET Ajax Control Toolkit

Screenshot - TabStrip.jpg

Introduction

The Microsoft ASP.NET Ajax Toolkit offers excellent tab control that organizes several views within a single page when each view is presented one at a time. It is more difficult to use this control to manage tasks that are split between different pages. The TabStrip control presented in this article could be used for navigation between multiple pages.

Background

The TabStrip control is adapted from the ASP.NET Ajax Toolkit tab control. It holds set of Tab objects that represent header text only. The TabStrip control does not include templates to define page content. The Tab elements are populated either from an XML file or defined in the page markup. A page URL can be associated with each tab, with a property indicating whether it is disabled. Disabled tabs cannot be selected. A tab can contain one layer of nested hyper links that are also defined in the XML file.

The control fires the ActiveItemChanged event on a server and the ClientActiveItemChanged event on a client. The server side event carries information about the tab being clicked, such as the ID and URL. The client side event also holds the ID of the currently selected tab and allows cancellation of a tab change.

Using the code

The control has to be explicitly registered using a directive:

<%@ Register Assembly="TabStrip" 
    Namespace="AjaxControlToolkit" TagPrefix="act" %>

The control usage can be illustrated by the markup code:

<act:TabStrip runat="server" ID="TabStrip1" DataFile="~/TabMap.xml"
        OnActiveItemChanged="OnActiveItemChanged1"
        OnClientActiveItemChanged="ClientActiveItemChanged" />

The tabs can be initialized as shown in the code below:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        TabStrip1.DataBind();
    }
}

The data XML file has the following format:

<ArrayOfTabMap>
  <TabMap Text="Tab #1" >
    <ArrayOfTabMap>
        <TabMap Url="Default.aspx" Text="Sub #1" />
        <TabMap Url="SubPage2.aspx" Text="Sub #2" />
        <TabMap Url="SubPage3.aspx" Text="Sub #3" Disabled="true" />
    </ArrayOfTabMap>
  </TabMap>
  <TabMap Url="Page2.aspx" Text="Tab #2" Disabled="true" />
  <TabMap Url="Page3.aspx" Text="Tab #3" />
  <TabMap Text="Tab #4" DefaultActiveSubItemIndex="1">
    <ArrayOfTabMap>
      <TabMap Url="SubPage4.aspx" Text="Sub #4" />
      <TabMap Url="SubPage5.aspx" Text="Sub #5" />
    </ArrayOfTabMap>
  </TabMap>
</ArrayOfTabMap>

In this sample, the first layer of TabMap elements defines the top level navigation tabs. The optional nested TabMap entries define navigation link elements within the current tab. If the TabMap entry has child elements then it should not have an associated page URL. If the TabMap element has the Disabled attribute set, then subsequent tab or link control won't be clickable and will be rendered in faded colors. A TabMap element could have the attribute DefaultActiveSubItemIndex defined. In this case, upon selection of the tab the nested hyperlink with the corresponding index is selected.

The server side OnActiveTabChanged event could be fired when the selected tab changes. It contains the ID of the currently selected tab and target page URL. The event has the following signature:

protected void OnActiveItemChanged1(object sender, 
    ActiveItemChangedEventArgs e)
{
    Response.Redirect(e.Url);
}

However, the handling of this event is not necessary for the navigation. The control allows no-code data binding. The event OnClientActiveItemChanged is generated when the tab changes on a client. The event carries the tab ID and allows cancellation of the event propagation to the server:

<script type="text/javascript">
function ClientActiveItemChanged(sender, e) 
{
    var result = 
        confirm("You are about to switch to the tab with ID " + 
        e.get_id() + ".\nAre you sure?");
    if (!result)
       e.set_cancel(true);
}
</script>

To change the control default appearance, the custom CSS file could be referenced by the page and the new style could be associated with the control when the page loads:

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
       TabStrip1.CssClass = "my_tab";
       TabStrip1.DataBind();
    }
}

History

  • 06/01/2007: First version

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

vgapp
Canada Canada
No Biography provided

You may also be interested in...

Comments and Discussions

 
Questionnot working Pin
Member 261021114-Mar-14 0:00
memberMember 261021114-Mar-14 0:00 
GeneralMy vote of 1 Pin
Sonu Garg23-Aug-11 16:24
memberSonu Garg23-Aug-11 16:24 
GeneralNot working with more then 2 level xml hierarchy Pin
DimaMuradov31-Mar-10 9:17
memberDimaMuradov31-Mar-10 9:17 
GeneralRe: Not working with more then 2 level xml hierarchy Pin
vgapp1-Apr-10 3:03
membervgapp1-Apr-10 3:03 
GeneralLove this !!! Pin
Member 388260122-Jan-10 7:57
memberMember 388260122-Jan-10 7:57 
GeneralProblem with sub tabs and css Pin
maxitaxi9-Sep-09 8:40
membermaxitaxi9-Sep-09 8:40 
GeneralNow Tab Creation is very easy with Asp.net Pin
dilipsss21-May-09 21:40
memberdilipsss21-May-09 21:40 
GeneralRe: Now Tab Creation is very easy with Asp.net Pin
vgapp22-May-09 0:30
membervgapp22-May-09 0:30 
GeneralProblem to run the project Pin
dilipsss15-May-09 2:31
memberdilipsss15-May-09 2:31 
GeneralRe: Problem to run the project Pin
vgapp15-May-09 2:57
membervgapp15-May-09 2:57 
GeneralRe: Problem to run the project Pin
dilipsss18-May-09 2:28
memberdilipsss18-May-09 2:28 
GeneralRe: Problem to run the project Pin
vgapp19-May-09 3:12
membervgapp19-May-09 3:12 
GeneralRe: Problem to run the project Pin
Hariprasd_G16-Jul-09 0:45
memberHariprasd_G16-Jul-09 0:45 
GeneralBuilding the tabstrip w/o xml Pin
Member 281399115-Oct-08 14:03
memberMember 281399115-Oct-08 14:03 
Generallink from other websites Pin
cristtiah14-Oct-08 10:34
membercristtiah14-Oct-08 10:34 
GeneralCreate Tab Strip from database Pin
himanshu25615-Sep-08 21:58
memberhimanshu25615-Sep-08 21:58 
GeneralRe: Create Tab Strip from database Pin
vgapp9-Sep-08 7:28
membervgapp9-Sep-08 7:28 
GeneralCssClass help Pin
sun_rang7-Jul-08 12:47
membersun_rang7-Jul-08 12:47 
GeneralRe: CssClass help Pin
vgapp8-Jul-08 4:41
membervgapp8-Jul-08 4:41 
GeneralSetting ID in xml file Pin
sebsebserb14-Jun-08 16:24
membersebsebserb14-Jun-08 16:24 
GeneralUsing Database Pin
heffen2-May-08 12:14
memberheffen2-May-08 12:14 
GeneralAJAX Version Pin
JohnnyHax25-Apr-08 14:44
memberJohnnyHax25-Apr-08 14:44 
GeneralRe: AJAX Version Pin
vgapp28-Apr-08 4:13
membervgapp28-Apr-08 4:13 
GeneralRe: AJAX Version Pin
JohnnyHax28-Apr-08 19:41
memberJohnnyHax28-Apr-08 19:41 
QuestionAdd new tab Pin
Parthasarathy Mandayam5-Nov-07 7:21
memberParthasarathy Mandayam5-Nov-07 7:21 

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
Web02 | 2.8.150728.1 | Last Updated 6 Jul 2007
Article Copyright 2007 by vgapp
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid