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

A simple ASP.NET Web TabStrip User Control

, 22 Aug 2004 CPOL
Rate this:
Please Sign up or sign in to vote.
Implementing Tab Control for Web.

Introduction

Windows Forms TabControl is a very useful control for overlapping multiple UI onto one screen. Although there is TabStrip Web Control on MSDN as unsupported IE only product and some other ActiveX based TabStrip Web Control, you can hardly find any ASP.NET based TabStrip Control. The only article I can find on CodeProject is here. But question still remains: how do we define and implement a TabStrip ASP.NET Web User Control that is generic and useful? This article intends to answer this question.

Web TabStrip Visual Design

The TabStrip in this article consists of a row of Command Buttons called TabStrip and a row of Link Buttons called SubTabStrip. It has the following visual attributes:

  • TabBackColor/SubTabBackColor - BackColor for unselected Tab or SubTab.
  • SelectedTabBackColor/SelectedSubTabBackColor - BackColor for selected Tab or SubTab.
  • TabForeColor/SubTabForeColor - ForeColor for unselected Tab or SubTab.
  • SelectedTabForeColor/SelectedSubTabForeColor - ForeColor for selected Tab or SubTab.
  • TabStripBackColor/SubTabStripBackColor - BackColor for the strip.

Carefully selecting these 10 color attributes will give a Web Tab visual effect as shown below:

TabStrip Sample

To implement this Web TabStrip, I created a ASP.NET User Control with a two row HTML table and inserted one Repeater Control in each row. Colors of Tab/SubTab correspond to colors of <asp:button> inside <itemTemplate> of Repeaters. Colors of TabStrip/ SubTabStrip correspond to those of HTML <td>. Now, let us take a look on how these Colors get set correctly upon user's tab clicking action.

Repeater Control ItemCommand Event

When a user clicks on a tab, the Repeater fires up a ItemCommand Event to its handler:

private void __theTabStrip_ItemCommand(object source, 
                                   RepeaterCommandEventArgs e)
{
    CurrentTabIndex = e.Item.ItemIndex;
    ....
}

Basically, server side code will now know which tab is clicked through the event argument and can do the color setting accordingly:

<ItemTemplate>
<asp:Button Runat=server .. BackColor="<%# SetTabBackColor(Container) %>" .. />
</ItemTemplate>
protected Color SetTabBackColor(object elem)
  {
    RepeaterItem item = (RepeaterItem) elem;
    if (item.ItemIndex==CurrentTabIndex) return SelectedTabBackColor;
    return TabBackColor;
  }

Note that ASP.NET Runtime can mix up "Angle Bracket" code with object code as seen here, especially code binding Functions to tag attributes using "<%# #>". Also <asp:button> is inside <ItemTemplate>. So, "Container" refers to a "RepeaterItem". Similarly, we can write and bind color setting function to ForeColor and SubTab Back/ForeColor.

You may have noticed that we have been using CurrentSubTabIndex, SelectedTabBackColor, TabBackColor freely. These are the Web User Control State Properties, and we will discuss them now.

Web User Control State Management

ASP.NET Web User Control allows persisting state using ViewState and initializing state using "Angle Bracket" 's Attributes, which correspond to object property:

<uc1:TabStrip id="TabStrip1" runat="server" 
                      SelectedTabBackColor="#003333"
                      TabForeColor="Black"
                      TabBackColor="#669999"
                      SelectedTabForeColor="White" 
                      TabStripBackColor="White"  
                      SelectedSubTabBackColor="#003333"
                      SubTabForeColor="Yellow" 
                      SubTabBackColor="#003333"

                      SelectedSubTabForeColor="White" 
                      SubTabStripBackColor="#003333" />

      public Color TabBackColor
      {
         get {return (Color) ViewState["TabBackColor"]; }
         set { ViewState["TabBackColor"]=value;}
      }
      public int CurrentTabIndex
      {
         get {return (int) ViewState["CurrentTabIndex"]; }
      }

These excellent infrastructure support from ASP.NET Runtime enables us to write simple color changing code in previous section.

WARNING: ViewState takes bandwidth. So you may consider using Session State instead.

Now we have all the code for color change responding to user click action. How do we then change content of the hosting page upon user's click action?

Designing Web TabStrip Event

Clearly, this TabStrip can not possibly foresee all kinds of content changes on the hosting pages. So, I decided to just raise appropriate events and leave it to Hosting Pages of the User Control to decide what to do. The code that defines and raises SelectionChanged Event is as follows:

public class SelectionChangedEventArgs : EventArgs
{
   public int TabPosition;
  public int SubTabPosition=0;
}
public delegate void SelectionChangedEventHandler(object sender, 
                                      SelectionChangedEventArgs e);
public event SelectionChangedEventHandler SelectionChanged;

public void SelectTab(int index)
{
   ....
  SelectionChangedEventArgs ev= new SelectionChangedEventArgs();
  ev.TabPosition= index;
  ev.SubTabPosition=(int) ViewState["CurrentSubTabIndex"];
  if( SelectionChanged !=null) SelectionChanged(this,ev);
}

Note that this function will be called in ItemCommand event handler function so that user clicking action will fire the custom event SelectionChanged.

To respond to these events on hosting pages, we need the following on hosting pages:

TabStrip ts = (TabStrip) this.FindControl("TabStrip1");
....
ts.SelectionChanged+=new SelectionChangedEventHandler(ts_SelectionChanged);

private void ts_SelectionChanged(object sender, 
                   JQD.SelectionChangedEventArgs e)
{
  // your code here
}

In my event handler function, I set the source of a IFrame to load different pages. There are a lot of other content changing techniques such as dynamically loading different User Controls or Custom Controls, write text to the page, update static controls already on the hosting page.

Note that IFrame is not an ASP.NET server control, so I cannot change its attributes using server code. Instead, I load a Content.aspx into it and change the content using Session State.

Final Words on DataBinding

We have seen how <asp:button> color attribute binds to a codebehind function using <%# %>. I have also bound its text to its Container (Repeater Control)'s DataSource to utilize .NET Runtime databinding infrastructure through IList:

<TD id="TabStripTD">
    <asp:repeater id=__theTabStrip runat="server" 
         DataSource='<%# DataBinder.Eval(Container,"TabText") %>'>
    <ItemTemplate>
  <asp:Button Runat=server Text="<%# Container.DataItem %>" ... />
....

Note that "Container" in <asp:button> refers to Repeater Control and Container in <asp:repeater> refers to TabStrip User Control, which has a bindable ArrayList property TabText:

public ArrayList TabText
  {
     get {return _TabText; }
     set { _TabText=value; } 
  }

I chose not to persist TabText but leave it to hosting pages, since the page is the one which set it, and therefore is in the best position to decide when to persist.

How to use Web TabStrip User Control in your Web Project

I have included a sample project showing how to use the control. Do the following if you need to include this Web User Control in your Web Application Project:

  1. Right click on your project in the Solution Explorer. Then Add --> Add Existing Item-->Change File Type to *.*. Then find the TabStrip.ascx, .ascx.cs, and .ascx.resx. Include all these three files in your project.
  2. Drag TabStrip.ascx onto your Web Form. And go to HTML view to add attributes such as "TabBackColor" to the TabStrip tag (reference my project WebForm1.aspx or simply copy from there). Remember, you can test your own color schema by setting up color attributes here.
  3. In your Web Form Page_Load function, setup TabText ArrayList to represent Tab text list shown, and setup SubTabText HashTable for SubTab text list corresponding to each Tab.

    You may consider this line of code to access TabStrip User Control:

    JQD.TabStrip ts = (JQD.TabStrip) this.FindControl("TabStrip1");
  4. Set up the user control SelectionChanged Event Handler.
    ts.SelectionChanged += new 
      JQD.TabStrip.SelectionChangedEventHandler(ts_SelectionChanged);

    and write your own code inside ts_SelectionChanged.

Note that I have run the sample and these steps on Windows 2003 with Framework 1.1. Finally, if you decided to run my sample directly, you will need to extract the zip file into an IIS virtual directory "TestTabStrip", and open the solution there, and you should see the screen as below:

Sample screenshot

Conclusion

I have presented to you a simple and generic Web TabStrip User Control. You may also use it as a base model to add other button type like image buttons to fit your needs.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jqd2001
Web Developer
United States United States
I am a Microsoft Certified Application Developer (MCAD), currently focusing on using .Net Framework to develop Business Solutions. I am mostly language neutral. I have used C, C++, ATL, MFC, VB.Net, C#, VB 6, PL/SQL, Transact SQL, ASP, Fortran, etc.

Comments and Discussions

 
Generalvb.net code Pinmembershihabkp7-Nov-10 2:40 
QuestionHow to add tab pages programmatically? PinmemberCnu20-Aug-10 4:07 
Generalgood job PinmemberArlen Navasartian21-Jan-10 21:46 
Questionhas anyone converted this to VS2008? PinmemberSTLMike18-Feb-09 4:11 
GeneralData lost on PostBack Pinmembernenad.zdravkovic8-Jun-08 10:23 
GeneralWeb TabStrip User Control by jqd2001 Pinmemberbijeshputhalath1-May-08 22:13 
GeneralTabs Have to fill Based on UserId PinmemberMagh_M29-Oct-07 1:54 
GeneralRe: Tabs Have to fill Based on UserId Pinmemberjqd200131-Oct-07 19:10 
GeneralRe: Tabs Have to fill Based on UserId [modified] PinmemberMagh_M1-Nov-07 0:01 
GeneralRe: Tabs Have to fill Based on UserId Pinmemberjqd20011-Nov-07 12:43 
GeneralRe: Tabs Have to fill Based on UserId PinmemberMagh_M2-Nov-07 22:51 
GeneralRe: Tabs Have to fill Based on UserId Pinmemberjqd20013-Nov-07 6:06 
GeneralRe: Tabs Have to fill Based on UserId PinmemberMagh_M4-Nov-07 17:06 
GeneralIndex was out of range. Must be non-negative and less than the size of the collection. Parameter name: index PinmemberMagh_M5-Nov-07 18:14 
GeneralRe: Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index Pinmemberjqd20017-Nov-07 20:54 
GeneralRe: Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index PinmemberHMagesh11-Nov-07 19:06 
GeneralY we want to pass two values to find url ????? PinmemberHMagesh13-Nov-07 18:47 
GeneralRe: Y we want to pass two values to find url ????? Pinmemberjqd200119-Nov-07 19:16 
GeneralIncluding Css PinmemberJain, Ankur16-Aug-07 0:36 
GeneralConversion in 2005 and run Got ERROR in TestTabStrip Pinmemberksrmramesh7-Jul-07 1:10 
GeneralRe: Conversion in 2005 and run Got ERROR in TestTabStrip Pinmemberjqd20017-Jul-07 10:00 
GeneralRe: Conversion in 2005 and run Got ERROR in TestTabStrip Pinmemberksrmramesh8-Jul-07 21:12 
GeneralRe: Conversion in 2005 and run Got ERROR in TestTabStrip Pinmemberjqd200112-Jul-07 10:40 
GeneralRe: Conversion in 2005 and run Got ERROR in TestTabStrip PinmemberMember 9159531-Dec-09 22:22 
QuestionReg :Jqd error PinmemberSrippriya.D28-May-07 2:27 

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 | Mobile
Web02 | 2.8.141015.1 | Last Updated 23 Aug 2004
Article Copyright 2004 by jqd2001
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid