It didn't take me long to find frustration with the available combination of TabStrip and Multi-page controls. Since Multi-page control has the additional drawback of loading all controls for all pages whether needed or not. I decided to search for a simpler solution.

The simplest approach is let a collection of buttons play the part of a tab strip. If these buttons are placed in a web user control - the buttons can easily be implemented in each "Tab" body page.

How to handle the tab body content depends upon the application's need. If each tab will need to contain different sets of controls then its best to create a distinct web form for each "Tab" body. If each tab contains essentially the same set of controls and merely different values then one web form acting as the tab body content would be best.

This article will demonstrate a Horizontal tab strip with four webforms. The example app will need four distinct tab bodies. Imagine working with the Microsoft sample Northwind database. Let the first tab contain general information about an employee. The second tab information about orders tied to that employee. The third holds the regions represented by that employee and the fourth will hold comments.

It's all in the color scheme

Only the correct set of colors will prevent this control from looking like a mere strip of buttons. Careful consideration to the borders will make these buttons seem to be attached to the body content. The right backgrounds will make one button appear as the current tab and the remaining tabs appear available.

The following style sheet allows the current button's bottom border to match the body content background color. The button's remaining 3 borders are darker. Likewise the body content has a top border to match its background. The remaining 3 borders of the body are also dark. This gives the illusion that the current button is attached to the body.

Style Sheet: SSTabStrip.CSS

Building the UserControl : SimTabStrip

Next create a user control to contain the collection of tab buttons. This control will be implemented on pages of tab body content. This example will have four "tabs": General, Orders, Territories and Notes.

• Create a user control within any web project by clicking "File", "Add New Item" and Choose "Web User Control". Name the control SimTabStrip.
  
• Drag the Style Sheet over the new control design page.
  
• In the Design mode of the new control place the needed number of buttons on the page within an HTML TABLE. For a more uniform appearance set the width of each TD column to an equal percentage of that TABLE.

• Give each Tab button a simple name which includes its index. The index can be stripped out of the id later to determine which one was clicked. The name can also be easily built to set the correct tab button as the current tab. In this example the base name for all tab buttons will be "btnTabXX" . All indexes will begin with zero.

Adding functionality to the appearance

Now that the control is beginning to look like a tab strip follow these remaining steps to ensure it behaves like one.

• Open the code behind of the User Control - SimTabStrip.ascx.cs.
  
  
• Expose an enumerated integer which will assign an understandable name to each tab.
  public enum TabIndx:int
  {
  General=0,
  Orders=1,
  Territories=2,
  Notes=3
  }
  
  
  
• Expose a public method. This method will set the style of the current tab as the "HOT" tab. Use the given index to build the name of the current tab button. The FindControl method will retrieve the button by name. Set the button's CSS property to the "Hot" button style.
  public void SetCurrentTabtoHOT(int iTabIndx)
  {
  //To use the control collection
  //include: using System.Web.UI;
  
  //first set all other buttons to COLD
  foreach(Control oCtl in this.Controls) //loop Text Boxes
  {
  try
  {
  Button CurCtl = (Button)oCtl;
  CurCtl.CssClass = "ColdHorizTabBtn";
  }
  catch{}
  }
  //To use the String builder class
  //include: using System.Text;
  //Known that buttons name is btnTabXX
  StringBuilder sbTabName = new StringBuilder("btnTab");
  sbTabName.Append(iTabIndx.ToString());
  Button CurBtn = (Button) this.FindControl(sbTabName.ToString());
  CurBtn.CssClass = "HotHorizTabBtn";
  }
  
  
  
  
• Create an internal array of HREFs. Assign one HREF to the array for each button. This will be used in a Click method to either Response.Redirect or Server.Transfer to the sibling page.
  protected string[] sHREFs =
  {"NWEmployeeGeneral.aspx",
  "NWEmployeeOrders.aspx",
  "NWEmployeeTerritories.aspx",
  "NWEmployeeNotes.aspx" } ;
  
  
  
• Create an internal method OnTabClick. This generic method will be assigned to the onClick event for each tab button. Within this method take the name of the control from the "Sender" parameter. From the name of the sender control retrieve the tab index substring. Use this index to redirect the page to the correct HREF.
  protected void OnTabClick(object sender,EventArgs e)
  {
  //tell who was clicked by taking the index from the name
  //known the name is btnTabXX
  Button CurBtn = (Button) sender;
  string sTabName = CurBtn.ID;
  string sIndx = sTabName.Substring(6);
  int iTabIndx = int.Parse( sIndx);
  
  //Send it on its way to the sibling form
  Server.Transfer(sHREFs[iTabIndx]);
  }
  

• Return to the aspx for the user control and using the Properties pages for each button assign the button's Click event to the protected OnTabClick method just created.

Using the User Control

Now to create the tab body content pages which will utilize the SimTabStrip control.

• Add a webform to the project. Drag the Style Sheet over it.

• Placement works best by using two HTML tables. Let the first table contain the SimTabStrip control and the second table contain the tab body content.

  Its simplest to begin by building the table within HTML mode. Add only one row and one column with a space " " as a placeholder. Then switch to Design mode and drag the user control from the Solution Explorer on the right into the table cell.

  Switch back to HTML mode. Add the second table. Set the class of the second table to use style sheet class "TabBodyContent"
  
  

Example of the HTML for webform associated with Tab0 - NWEmployees General Information.

• In the code behind of this page insert a protected declaration of the control to allow references throughout the code.
  protected SimTabStrip SimTabStrip1;
  
  
  
  
• Within the page load event set the correct tab button to "HOT" by calling the method exposed by the control.
  private void Page_Load(object sender, System.EventArgs e)
  {
  SimTabStrip1.SetCurrentTabtoHOT((int)SimTabStrip.TabIndx.General);
  }
  
  
  
  
• Repeat these steps creating a web form for each tab button. The names of each web form are those mentioned in the array of HREFs: "NWEmployeeGeneral.aspx", "NWEmployeeOrders.aspx", "NWEmployeeTeritories.aspx", "NWEmployeeNotes.aspx"

  The simulation of changing tabs occurs smoothly. Now each form is ready for the proper content.

  Maintenance of this control only requires upkeep of the array of HREFs and enumerated index of tabs. Also new tab buttons must follow the existing naming convention.

  
  About the author: Lisa D. Welch
  Lisa has been completing applications for nine years. She acquired her MCSD in 1996. She is currently under contract completing internet and intranet development. Contact her at ldwelch@dcr.net

More ASP.NET Articles
More By aspfree

developerWorks - FREE Tools!

NEW! Cook up Web sites fast with CakePHP, Part 4: Use CakePHP's Session and Request Handler components CakePHP is a stable production-ready, rapid-development aid for building Web sites in PHP. This "Cook up Web sites fast with CakePHP" series shows you how to build an online product catalog using CakePHP. FREE! Go There Now!

NEW! Download IBM Data Studio V1.1 Visit IBM developerWorks to download the latest trial version of IBM Data Studio V1.1 at no cost. IBM Data Studio is a comprehensive data management solution that helps you effectively design, develop, deploy and manage your data, databases, and database applications throughout the data management life cycle utilizing a consistent and integrated user interface. Unlike other client-side data management solutions that focus on only one aspect of the application lifecycle or database administration, Data Studio complements the Rational Software Delivery platform, providing unparalleled flexibility for a heterogeneous data server environment across platforms. FREE! Go There Now!

NEW! Download IBM WebSphere Portal V6.1 beta code Download the IBM WebSphere Portal V6.1 beta code and learn more about the rich features and enhancements in IBM WebSphere Portal V6.1. WebSphere Portal provides a composite application or business mashup framework and the advanced tooling needed to build flexible, SOA-based solutions, and scalability to meet the needs of any size organization. FREE! Go There Now!

NEW! Evaluate IBM Lotus Sametime Standard V8.0 Visit IBM developerWorks to download a free trial of the latest release of IBM Lotus Sametime Standard V8.0. Lotus Sametime Standard V8.0 is a platform for unified communications and collaboration that combines security features with an extensible, open solution including integrated Voice over IP, geographic location awareness, mobile clients, and a robust Business Partner community offering telephony and video integration. FREE! Go There Now!

NEW! Evaluate WebSphere Extended Deployment Compute Grid V6.1 Visit IBM developerWorks to download a free trial version of WebSphere Extended Deployment Compute Grid, which lets you schedule, execute, and monitor batch jobs. Because online transaction processing and batch jobs execute simultaneously on the same server resources, you can avoid costly duplication of resources. Compute Grid supports job types of Java transactional batch, compute-intensive and a new type called "native execution", which enables non-Java workloads to run on distributed end points. FREE! Go There Now!

NEW! Harnessing the power of SQL and Java for high performance data access Join this webcast to see how IBM Data Studio Developer and pureQuery can take the pain out of Java data access. uApplications developed using both Java and SQL have become a common requirement. Database connectivity using Java Database Connectivity (JDBC) to create an application is a multi-step tedious process, and tooling that covers both SQL and Java has been unavailable, until now. IBM Data Studio introduces the pureQuery platform: a high-performance, Java data access platform focused on simplifying the tasks of developing, managing, and optimizing database applications and services. FREE! Go There Now!

NEW! IBM Rational Systems Development e-Kit As systems increase in complexity, communication between systems and software teams becomes more and more difficult. Now, there’s a way to improve product quality and communication.<br />Read the “Model Driven Systems Development” white paper to see how. Also included in this kit are more educational white papers, customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems.<br /> FREE! Go There Now!

NEW! Test terminal-based applications with Rational Functional Tester Regression testing -- in which code is thoroughly tested to ensure that changes have not produced unexpected results -- is an important part of any development process. But many testing environments neglect the terminal-based applications that still form the backbone of many industries. In this tutorial, you'll learn how the Rational Functional Tester Extension for Terminal-Based Applications works with other Rational Functional Tester to help test terminal-based applications quickly and easily. FREE! Go There Now!

NEW! Trial download: IBM Rational Tester for SOA Quality V7.0.1 Get a free trial download of the latest version of IBM Rational Tester for SOA Quality V7.0.1, a functional and regression testing tool that enables the creation, comprehension, modification and execution of testing GUI-less Web services. FREE! Go There Now!

NEW! Webcast: Striking the right balance between manual and automated testing Join this webcast to learn how IBM Rational's Functional Testing solution enables you to implement automation your way, at your pace, with your existing staff. In this webcast, you’ll learn how you can eliminate redundancy of manual test scripts, reduce errors, and increase test coverage through test automation. After this presentation you will understand how IBM Rational Functional Testing solution can streamline your manual testing and make test automation easily attainable. FREE! Go There Now!

All FREE IBM® developerWorks Tools!