ASP.NET Ajax Toolkit TabStrip Control

• Download source - 599.6 Kb

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