Click here to Skip to main content
15,860,943 members
Articles / Web Development / ASP.NET
Article

A simple ASP.NET Web TabStrip User Control

Rate me:
Please Sign up or sign in to vote.
4.94/5 (38 votes)
22 Aug 2004CPOL5 min read 492.2K   14.6K   176   120
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:

C#
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:

XML
<ItemTemplate>
<asp:Button Runat=server .. BackColor="<%# SetTabBackColor(Container) %>" .. />
</ItemTemplate>
C#
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:

C#
<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:

C#
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:

C#
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:

ASP.NET
<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:

C#
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:

    C#
    JQD.TabStrip ts = (JQD.TabStrip) this.FindControl("TabStrip1");
  4. Set up the user control SelectionChanged Event Handler.
    C#
    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)


Written By
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

 
GeneralRe: How to select tab manually without generating event Pin
finnsoft27-Apr-05 3:25
finnsoft27-Apr-05 3:25 
GeneralRe: How to select tab manually without generating event Pin
jqd200128-Apr-05 7:04
jqd200128-Apr-05 7:04 
GeneralRe: How to select tab manually without generating event Pin
finnsoft28-Apr-05 7:50
finnsoft28-Apr-05 7:50 
AnswerRe: How to select tab manually without generating event Pin
Siva Subramanian22-May-06 0:44
Siva Subramanian22-May-06 0:44 
GeneralsubTabStrip selection Error Pin
Viswanatha Rao25-Mar-05 14:06
Viswanatha Rao25-Mar-05 14:06 
GeneralVB Code Pin
Marco198215-Mar-05 12:23
Marco198215-Mar-05 12:23 
GeneralRe: VB Code Pin
jpvg2313-May-05 12:21
jpvg2313-May-05 12:21 
GeneralVB code Pin
pickron8-Mar-05 9:32
pickron8-Mar-05 9:32 
James,

I cannot find the vb code in this page, as you told me that you dumped vb code in this page. Sorry.
GeneralRe: VB code Pin
Anonymous8-Mar-05 13:53
Anonymous8-Mar-05 13:53 
GeneralTab Control or Tab Strip Pin
pickron4-Feb-05 11:11
pickron4-Feb-05 11:11 
GeneralRe: Tab Control or Tab Strip Pin
Anonymous5-Feb-05 4:37
Anonymous5-Feb-05 4:37 
GeneralRe: Tab Control or Tab Strip Pin
pickron7-Feb-05 2:48
pickron7-Feb-05 2:48 
GeneralRe: Tab Control or Tab Strip Pin
jqd200127-Feb-05 10:22
jqd200127-Feb-05 10:22 
GeneralRe: Tab Control or Tab Strip Pin
pickron28-Feb-05 2:43
pickron28-Feb-05 2:43 
GeneralRe: Tab Control or Tab Strip Pin
jqd200128-Feb-05 6:59
jqd200128-Feb-05 6:59 
GeneralRe: Tab Control or Tab Strip Pin
jessnair4-Apr-05 4:51
jessnair4-Apr-05 4:51 
GeneralRe: Tab Control or Tab Strip Pin
jqd20014-Apr-05 6:56
jqd20014-Apr-05 6:56 
GeneralRe: Tab Control or Tab Strip Pin
pickron28-Feb-05 4:03
pickron28-Feb-05 4:03 
GeneralRe: Tab Control or Tab Strip Pin
jqd200128-Feb-05 7:12
jqd200128-Feb-05 7:12 
General__theTabStrip Pin
diovc10-Jan-05 3:17
diovc10-Jan-05 3:17 
GeneralRe: __theTabStrip Pin
jqd200110-Jan-05 8:37
jqd200110-Jan-05 8:37 
GeneralVB.NET Version Pin
ws3Paul9-Nov-04 4:11
ws3Paul9-Nov-04 4:11 
GeneralRe: VB.NET Version Pin
jqd20019-Nov-04 12:27
jqd20019-Nov-04 12:27 
GeneralRe: VB.NET Version Pin
Tanumnrec12-Jun-06 11:06
Tanumnrec12-Jun-06 11:06 
GeneralTabStrip but in menu Pin
federicoha8-Sep-04 15:35
federicoha8-Sep-04 15:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.