Click here to Skip to main content
15,867,453 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.4K   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

 
QuestionReg :Jqd error Pin
Srippriya.D28-May-07 2:27
Srippriya.D28-May-07 2:27 
GeneralError message Pin
rkmoray18-Apr-07 4:54
rkmoray18-Apr-07 4:54 
QuestionHow to add into masterpage Pin
Choong6-Mar-07 19:11
Choong6-Mar-07 19:11 
GeneralPlease give code... Pin
BakuRetsu14-Feb-07 2:56
BakuRetsu14-Feb-07 2:56 
QuestionExpression expected Pin
myself1016-Feb-07 0:46
myself1016-Feb-07 0:46 
AnswerRe: Expression expected Pin
jqd20016-Feb-07 6:15
jqd20016-Feb-07 6:15 
GeneralRe: Expression expected Pin
myself1016-Feb-07 17:57
myself1016-Feb-07 17:57 
GeneralRe: Expression expected Pin
jqd200110-Feb-07 10:30
jqd200110-Feb-07 10:30 
AnswerRe: Expression expected Pin
WRowell4-Apr-07 4:42
WRowell4-Apr-07 4:42 
Generalvb.net question Pin
TTTTPPPP23-Jan-07 12:03
TTTTPPPP23-Jan-07 12:03 
GeneralRe: vb.net question Pin
TTTTPPPP24-Jan-07 4:57
TTTTPPPP24-Jan-07 4:57 
GeneralRe: vb.net question Pin
tegesa1-Apr-12 8:29
tegesa1-Apr-12 8:29 
GeneralA Null Reference Exception Pin
thukhoa197519-Jan-07 4:41
thukhoa197519-Jan-07 4:41 
GeneralRe: A Null Reference Exception Pin
jqd200119-Jan-07 6:43
jqd200119-Jan-07 6:43 
Generalyou can change the iframe src in asp.net directly - no need for the session variable [modified] Pin
nomondoan16-Nov-06 6:43
nomondoan16-Nov-06 6:43 
GeneralRe: you can change the iframe src in asp.net directly - no need for the session variable Pin
jqd200116-Nov-06 7:17
jqd200116-Nov-06 7:17 
QuestionHow to set 'SelectedTabCss'? Pin
LiLy White8-Aug-06 7:32
LiLy White8-Aug-06 7:32 
AnswerRe: How to set 'SelectedTabCss'? Pin
jqd200110-Aug-06 4:43
jqd200110-Aug-06 4:43 
GeneralRe: How to set 'SelectedTabCss'? Pin
LiLy White10-Aug-06 7:15
LiLy White10-Aug-06 7:15 
GeneralGetting the tab to work in vb Pin
MissLiz2-Aug-06 5:29
MissLiz2-Aug-06 5:29 
GeneralRe: Getting the tab to work in vb Pin
LiLy White8-Aug-06 7:16
LiLy White8-Aug-06 7:16 
GeneralVisual Studio 2005 version Pin
mokah15-May-06 6:25
mokah15-May-06 6:25 
GeneralRe: Visual Studio 2005 version Pin
jqd200116-May-06 10:52
jqd200116-May-06 10:52 
GeneralRetaining values of textboxes from one tab to other Pin
meenu19745-May-06 13:04
meenu19745-May-06 13:04 
GeneralNot working with VS 2005 Pin
harvey liu18-Apr-06 14:49
harvey liu18-Apr-06 14:49 

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.