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

Web Tabstrip Control for Frames

Rate me:
Please Sign up or sign in to vote.
3.87/5 (21 votes)
13 Jun 20044 min read 252.5K   5.6K   53   40
Building a custom ASP.NET Tabstrip Control

Introduction

There are plenty of tabstrip controls available for download that use panels to decide which content to display. But what if your existing web application's / web site's content is stored on separate pages, or you have to use frames? This article will take you through the basics of creating a custom tabstrip control that can be loaded in one frame, and change content in another frame.

Using the code

Using the code is quite simple. The library contains a Tab control, as well as a TabList Control. You add Tabs to the TabList. To demonstrate, very quickly,

C#
myTab.DisplayName = " Project Home ";<br>
myTab.DisplayPosition = 0;<br>
myTab.URL = "projectHome.aspx?pjID=" + ourID;<br>
TabList2.AddTab(myTab);<br>

The TabList Control has a number of properties that you can set, namely:

Settings Properties

  1. UseFrames (default is true - provided so that I can incorporate panel tabs later)
  2. TargetFrame (the name of the frame to load the content pages in)
  3. SelectedTab (the index of the selected tab)
  4. TabsAcross (the number of horizontal tabs before creating a new line)

Appearance Properties

  1. LeftImage (the image to appear on the left hand side of the tab)
  2. RightImage (the image to appear on the right hand side of the tab)
  3. TopImage (the image to appear on the top of the tab)
  4. BottomImage (the image to appear below the tab)
  5. LeftImageOver (the image to appear on the left hand side of the tab when the tab is selected)
  6. RightImageOver (the image to appear on the right hand side of the tab when the tab is selected)
  7. TopImageOver (the image to appear on the top of the tab when the tab is selected)
  8. BottomImageOver (the image to appear below the tab when the tab is selected)
  9. CssClass (the style sheet element for the unselected tabs)
  10. CssClassOver (the style sheet element for the selected tab)

How it all works

The Tablist Control has a private member named m_items which is an arraylist of Tab. This is where the collection of tabs are stored. To order the tabs (by the tab display position) I had to have a way to compare the tabs to one another. For that I created a TabCompare class, inheriting from IComparer.

This allowed me to compare one tabs display position to another, and return a value representing whether the first tab should appear before or after the second tab. By inheriting from the IComparer interface, I could now also make use of the arraylist method Sort, which, as it now had a way to compare one tab to another, could automatically order my tabs for me, simply by calling m_items.Sort(new TabCompare()), which I wrapped in a private method called order.

I also wanted my control to be able to have fancy images around it (you know, so it looks like a tab), so my control renders 3 html rows per tab line (the top row for the top image, the middle row for the side images and tab, and the bottom row for the bottom images). I wrote a method that returns a string for each of the rows.

The ChangeTab method is the event handler for the linkbuttons (which is what i used to display the tab link and handle click events), and simply changes the selected tab index, and uses JavaScript to change the target page.

State Management

Because my TabList control inherits from Control, I can override the LoadViewState and SaveViewState methods to maintain the state of the control. The only value I needed to maintain was the selected tab index, m_intSelTab.

C#
//Saves the View State
protected override object SaveViewState()
{
 object[] allStates = new object[2];
 allStates[0] = base.SaveViewState();
 allStates[1] = m_intSelTab;
 return allStates;
}
//Loads View State Info 'Load Saved State Values
protected override void LoadViewState(object savedState)
{
 if (savedState != null)
 {
  object[] myState = (object[])savedState;
  if (myState[0] != null)
  {
   base.LoadViewState(myState[0]);
  }
  if (myState[1] != null)
  {
   m_intSelTab = Convert.ToInt32(myState[1]);
  }
 }
}

In my CreateChildControls method (which renders the control to the screen) I simply set the start position (index of first tab to display - i.e. 0), and work out how many tabs to display in the first row. I also set a counter to keep track of which tabs I've displayed. I then order the tabs by calling the order method I created before.

I then loop through all my tabs and write them to the screen, using my counters to determine when to draw a new row, and when to finish off the table. I used linkbuttons as the hyperlinks, so that I could control their events server side.

C#
  protected override void CreateChildControls() 
  {
   int intColRows = (m_items.Count / m_intTabsAcross) + 1;
   int intPositionRendered = 0;
   int intStartPosition = 0;

   order();

   this.Controls.Clear();

   this.Controls.Add(new LiteralControl(
"<table cellpadding=\"2\" cellspacing=\"1\" border=\"0\" ID="Table1">"));

   for (int i=1; i <= intColRows; i++) 
   {
    if ((m_strTopImage.Length > 0) || (m_strSelTopImage.Length > 0))
    {
     this.Controls.Add(new LiteralControl(TopRow(intStartPosition, 
         ref intPositionRendered, m_intSelTab)));
    }
    MiddleRow(intStartPosition, ref intPositionRendered, m_intSelTab);
    if ((m_strBottomImage.Length > 0) || (m_strSelBottomImage.Length > 0)) 
    {
     this.Controls.Add(new LiteralControl(BottomRow(intStartPosition, 
        ref intPositionRendered, m_intSelTab)));
    }
    intStartPosition = intPositionRendered;
   }

   this.Controls.Add(new LiteralControl("</table>"));

  }

And that's it. I hope you find both the control (I included the dll for use), and this article useful.

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


Written By
Web Developer
South Africa South Africa
Doug is an Applications Integrator for an online gaming company. He has been programming for 9 years, and has been working with the .NET framework since the beginning of 2003, in both VB.NET & C#.

Comments and Discussions

 
GeneralFrames bad Pin
Rui Dias Lopes13-Jun-04 23:08
Rui Dias Lopes13-Jun-04 23:08 
GeneralRe: Frames bad Pin
Mark Focas14-Jun-04 14:09
Mark Focas14-Jun-04 14:09 
GeneralRe: Frames bad Pin
Rui Dias Lopes14-Jun-04 23:35
Rui Dias Lopes14-Jun-04 23:35 
GeneralRe: Frames bad Pin
Mark Focas16-Jun-04 0:25
Mark Focas16-Jun-04 0:25 
GeneralRe: Frames bad Pin
Doug Wilson16-Jun-04 20:53
Doug Wilson16-Jun-04 20:53 
GeneralRe: Frames bad Pin
sides_dale23-Jun-04 17:15
sides_dale23-Jun-04 17:15 
Generalbug Pin
fangxia29-Apr-04 15:55
professionalfangxia29-Apr-04 15:55 
GeneralRe: bug Pin
Doug Wilson29-Apr-04 20:07
Doug Wilson29-Apr-04 20:07 
GeneralRe: bug Pin
fangxia4-May-04 4:48
professionalfangxia4-May-04 4:48 
GeneralRe: bug Pin
Doug Wilson4-May-04 20:25
Doug Wilson4-May-04 20:25 
GeneralRe: bug Pin
kermIT-Consulting4-May-04 7:32
kermIT-Consulting4-May-04 7:32 
GeneralRe: bug Pin
Doug Wilson4-May-04 20:25
Doug Wilson4-May-04 20:25 
GeneralRe: bug Pin
Steve Miller6-May-04 4:40
Steve Miller6-May-04 4:40 
GeneralRe: bug Pin
Sean McCormack28-May-04 4:02
Sean McCormack28-May-04 4:02 
GeneralRe: bug Pin
Doug Wilson16-Jun-04 21:06
Doug Wilson16-Jun-04 21:06 

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.