ASP.NET TabBar Server Control

• Download source - 57 Kb

Introduction

A lot of my clients request tabbed navigation in their web applications. Most of the applications I work on are business type applications, and a favorite navigation scheme is to have a tab bar to represent high-level categories, with sub categories represented with a "sub" tab bar. So off I went to develop a control that would provide a visual representation of a tab bar that could be configured to be page aware or agnostic, integrates with the built-in ASP.NET roles API, has designer support, supports viewstate serialization, and could be easily manipulated programmatically.

Adding the tab bar to a page

First, add a reference to GeminiSoftworks.Web.Navigation.dll.

Next, add the following to your web.config file as a child of <system.web>.

<pages>
    <controls>
        <add tagPrefix="TabBar" 
             namespace="GeminiSoftworks.Web.Navigation" 
             assembly="GeminiSoftworks.Web.Navigation"/>
        <add tagPrefix="Tab" 
             namespace="GeminiSoftworks.Web.Navigation" 
             assembly="GeminiSoftworks.Web.Navigation"/>
    </controls>
</pages>

Last, add the control to a page. This can be done by adding the control to your studio toolbox and then dragging the control on to the page, or by adding it directly to the HTML like so:

<TabBar:TabBar ID="TabBar1" runat="server" Width="100%">
    <TabBar:Tab Link="~/default.aspx" Name="Home" PreserveFormOnTransfer="False" 
                Text="Home" ToolTip="Home" UseServerTransferMethod="False" 
                Visible="True" />
    <TabBar:Tab Link="" Name="Resources" PreserveFormOnTransfer="False" 
                Text="Resources" ToolTip="Resources" 
                UseServerTransferMethod="False" Visible="True" />
    <TabBar:Tab Link="" Name="Downloads" PreserveFormOnTransfer="False" 
                Text="Downloads" ToolTip="Downloads" 
                UseServerTransferMethod="False" Visible="True" />
</TabBar:TabBar>

Now, open the page in a browser and your page should render like the example image above.

Working with the tab bar in code

protected void TabBar1_TabClick(object sender, 
          System.ComponentModel.CancelEventArgs ce)
{
    //basic tabbar operations...

    //example: get the tab that was clicked
    GeminiSoftworks.Web.Navigation.Tab t = 
           (GeminiSoftworks.Web.Navigation.Tab)sender;

    /* 
     * The following examples will modify the tabbar programmatically 
     * I will cancel the click event at the end of this function so that
     * the changes made will render
     * 
     * Typically, I will define constants for all the tab objects I need
     * and programmatically render the tabbar based on the circumstances.
     * The only case I declaritively set up tabs
     * is when they are basically static.
     * 
     * ** Remember **
     * If you are using the standard ASP.NET roles
     * configuration, secured tabs will be 
     * automatically suppressed for users that
     * don't have the appropriate authority to
     * use them. You can also create a derived
     * class and override the IsTabValidForRole
     * to implement custom security.
     * 
     * Roles = * (all users), ? (authenticated users),
     *            and any roles you define
     * 
     * ** Remember **
     * Tab authentication is based on the least secure role
     * (e.g. a tab with roles ("Admin","*") will render for all roles. 
     * 
     */

    //example: create a new tab
    GeminiSoftworks.Web.Navigation.Tab nt = 
    new GeminiSoftworks.Web.Navigation.Tab("NewTab", 
             "New Tab", "~/newpage.aspx", "New Tab");

    //example: set some pages that the tab should render 'active' for...
    nt.ActivePagesList = new string[] { "~/newsubpage1.aspx", 
                                        "~/newsubpage2.aspx" };

    //example: assign a role to view the tab
    //note: not assigning any roles means all users can view the tab, so
    //this example is the same as not setting the AllowRoles property
    nt.AllowRoles = new string[] { "*" };

    //example: add the new tab to the tabbar
    this.TabBar1.Tabs.Add(nt);

    //example: remove a tab by calling GetTab 
    //which accepts a tab name and returns a tab reference
    this.TabBar1.Tabs.Remove(this.TabBar1.Tabs.GetTab("Downloads"));

    /* cancel the click event to see the changes we made above */

    //example: cancel the event
    ce.Cancel = true;
}

Things you can learn from the source

• Designer support
• Embedding web resources
• Viewstate serialization
• Using HTML rendering instead of composite control rendering
• Supporting events

What still needs doing

At some point, I will add a few more things to the tab bar. Specifically, it needs ADA section 508 support, and the ability to use custom images instead of text for the tabs. One day, there will be a few hours free to do this, but instead of taking care of these enhancements at this time, I decided to submit this article in hopes others will find it useful. So please enjoy...