A simple ASP.NET Web TabStrip User Control

• Download source files - 23.5 Kb

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:

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:

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.