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!

IBM DB2 Deep Compression ROI Tool The IBM DB2 Deep Compression ROI tool is designed for DBA’s and IT management personnel to perform a clinical analysis of the cost savings gained from the Storage Optimization feature of DB2 9 for Linux, UNIX and Windows. The feature, also known as Deep Compression, compresses data that lies within a database by up to 80% at times. FREE! Go There Now!

NEW! Discovering the value of WebSphere Process Server WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies. 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! 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! Improve your build process with IBM Rational Build Forge, Part 2: Automate builds for a real-world Tomcat project Learn how Rational Build Forge can extend a simple compile and package build process by adding customization and deployment capability. Go from a manual method to automating: checking for code changes; getting the latest source; compiling and packaging; customizing; copying to and restarting a deployment server; and sending e-mail notification that a new version is available. FREE! Go There Now!

NEW! Rational Asset Manager eKit Learn how to do more with your reusable assets with the free Rational Asset Manager eKit. The eKit includes demos on how Rational Asset Manager tracks and audits your assets in order to utilize them for reuse. Plus you’ll find white papers and a Webcast that discuss the challenges of a Service Oriented Architecture and how Rational Asset Manager can provide quick and effective solutions. FREE! Go There Now!

NEW! Successful Change and Release Management for .NET Join this webcast to discover the key requirements for successful change and release management. Learn how to extend your .NET environment to improve productivity and collaboration, and address core problems afflicting team development. In this webcast, we’ll review typical challenges faced by customers and how to resolve them with the IBM Rational Change and Release Management solution, including Rational ClearCase, Rational ClearQuest and Rational Build Forge. Replay is available for 9 months. FREE! Go There Now!

NEW! Using IBM Rational Developer for System z and IBM Rational ClearCase together to manage application development Whether you are creating new applications or modifying existing ones, managing integration of new components with traditional z/OS elements is a critical part of building and deploying modern applications. Listen to this webcast to see how IBM can help you optimize your development process using an IDE like Rational Developer for System z that integrates with management tools, such as ClearCase to manage your application development on mainframes. FREE! Go There Now!

NEW! Webcast: Extreme transaction processing with WebSphere Extended Deployment In this webcast, you'll get an introduction to the eXtreme Transaction Processing (XTP) features of WebSphere Extended Deployment and the common architectural traits required by XTP applications. See how WebSphere Extended Deployment's ObjectGrid feature provides a state-of-the-art infrastructure for hosting XTP applications. FREE! Go There Now!

NEW! Webcast: IBM Rational Build Forge - Beyond the Build The discipline of assembling and delivering software is maturing beyond standard developer-centric compile/test software builds. The end-to-end software development lifecycle is emerging as the new focus moves “Beyond the Build.” Join this on demand webcast to learn about methods for streamlining software delivery and key capabilities of the IBM Rational Build Forge framework for automating build and release management in environments of any size. FREE! Go There Now!

All FREE IBM® developerWorks Tools!