Click here to Skip to main content
Click here to Skip to main content

ASP.NET TabBar Server Control

, 22 Aug 2006
Rate this:
Please Sign up or sign in to vote.
A customizable ASP.NET 2.0 TabBar server control with designer support, written in VB.NET.

tabbar render example

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

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

corebytes
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 PinmemberDhritirao's17-Oct-13 1:18 
QuestionHow to remove the extra tab bar? Pinmemberkennett51511-Oct-11 8:57 
GeneralMy vote of 5 PinmemberSyed Javed15-Jun-11 3:43 
GeneralHelp friend! Pinmembernjuniorba6-Feb-09 3:35 
Generaladding a reference Pinmemberbigshahman2-Dec-08 5:45 
QuestionActive/Inactive images PinmemberJoeLeTaxiUK17-Nov-08 1:05 
QuestionHow Use enable use images of ActiveTab Pinmemberplayer.14-Oct-08 3:42 
AnswerRe: How Use enable use images of ActiveTab Pinmemberplayer.14-Oct-08 18:13 
QuestionRecognize query string? PinmemberGary In SD8-Jul-08 8:43 
AnswerRe: Recognize query string? Pinmembercorebytes8-Jul-08 14:38 
GeneralRe: Recognize query string? PinmemberGary In SD8-Jul-08 15:14 
QuestionWebConfig Changes Pinmemberstixoffire2-May-08 11:21 
AnswerRe: WebConfig Changes Pinmembercorebytes8-Jul-08 14:52 
AnswerRe: WebConfig Changes Pinmemberstixoffire8-Jul-08 19:20 
GeneralRe: WebConfig Changes PinmemberShepherdBook19-Jan-10 7:39 
QuestionHow can i select active tab dynamically Pinmemberkodalimani21-Jun-07 18:35 
AnswerRe: How can i select active tab dynamically Pinmemberpzlk24-Jul-07 0:16 
GeneralAwesome PinmemberZodraz3-Apr-07 5:41 
QuestionHow use this tabBar? Pinmemberlamik28-Feb-07 21:45 
QuestionActivePageList and L&#304;nk not working in Tab Bar PinmemberTanjuOzgur3-Oct-06 0:57 
AnswerRe: ActivePageList and L&#304;nk not working in Tab Bar PinmemberTanjuOzgur4-Oct-06 0:56 
QuestionPlace the desired page in a container PinmemberNizam Farid Ahmed20-Sep-06 3:19 
AnswerRe: Place the desired page in a container Pinmembercorebytes20-Sep-06 17:02 
Generalautomatic casding of tab control Pinmemberbreakpoint11-Sep-06 4:10 
AnswerRe: automatic casding of tab control Pinmembercorebytes11-Sep-06 8:28 

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.141223.1 | Last Updated 22 Aug 2006
Article Copyright 2006 by corebytes
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid