Click here to Skip to main content
13,738,089 members
Click here to Skip to main content
Add your own
alternative version


87 bookmarked
Posted 22 Jun 2006

Dynamic ASP.NET Form Tabs

, 20 Sep 2006
Rate this:
Please Sign up or sign in to vote.
A custom control for generating form tabs for web applications.


Ever needed to display form tabs for a web application dynamically on separate pages? This custom control does just that. The content is driven dynamically, and it is easy to implement.

I was tired of generating countless lines of HTML on separate pages, just to have someone say I want it to look like this. So, I developed a custom .NET control to handle the generation of form tabs.

The colors are driven by styles, and will be included with this example.

The code-behind implementation is really simple. Because someone suggested it, I've added a ClientID property that sets the 'ID' of that table cell, and I have also included a property that is set in the Properties window to allow the developer to decide whether to include the CheckDirty logic.

'control declaration.
Protected WithEvents FormTab1 As FormTabs.FormTab
Dim tab As FormTab = FormTab1
'Parameters (Tab Text, Client ID, Tab URL, blnSelected)
tab.AddTab("Tab 1", "tab1", "", True) 
tab.AddTab("Tab 2", "tab2", "Tab2.aspx?ID=" & txtID.Text, False)
tab.AddTab("Tab 3", "tab3", "Tab3.aspx?ID=" & txtID.Text, False)

Which would generate something like this:

Your .aspx page will look like this:

<table cellSpacing="0" cellPadding="0" width="100%" border="0">
    <td class="tabrow">
      <cc1:formtab id="FormTab1" runat="server">

The first parameter gives the tab the name. That is what will show up on the tab. The second parameter is a URL that the user will navigate to when clicked. And as you can see, it takes variables into the URL. The third parameter, and maybe not needed if you change the logic to look at an empty URL string, is a boolean value that determines whether that tab is the active tab. So, in a normal situation, there should only be one active tab, and the active tab would change based on the page the user was on.

You need to include these styles in your application:

.bottomline {border-bottom: #57A2DC 1px solid;}
.tabrow {background-color:#f9fbe0;}
.tab {background-color: #E7F2F8; color: #666666; 
      line-height:18px; text-align: center; 
      border: #57A2DC 1px solid;}
.tab_hover {background-color: #E3F2BB; color: #000000; 
            line-height:18px; text-align: center; 
            border: #57A2DC 1px solid; 
            cursor: hand; cursor:pointer;}
.tab_selected {background-color: #ffffff; color: #000000; 
               text-decoration: none; text-align: center; 
               height: 18px; border-left: #57A2DC 1px solid; 
               border-bottom: #ffffff 1px solid; 
               border-right: #57A2DC 1px solid; 
               border-top: #57A2DC 1px solid;}

These styles should be self-explanatory.

To use this control as is, you'll need to do the following:

  • Add the DLL to your VS toolbox
  • Drag the control to a Web page
  • Add the styles to your Web page
  • Include the CheckDirty.js file in your Web page

I generally include the "CheckDirty"* functionality to check if the user has changed anything on the form before navigating to another page. Because of that, the CheckDirty.js file will need to be included with your application. Or, remove the reference to it in the control. There are numerous articles on implementing this functionality, so I won't go into it here. Just know, it's built in to this control.

** I've updated the code to allow the developer to set whether they want to include this functionality. Get the CheckDirty file here:

As you can see, this control gives you the ability to add form tabs to Web forms with great ease. You can use this control to control access to certain pages for security reasons. Just build in the logic to check for authorization. Maybe something like this:

If strUser = "Admin" Then
    tab.AddTab("Admin Console", "ClientID1", "admin.aspx", True|False)
    tab.AddTab("User Console", "ClientID2", "user.aspx", True|False)
End If

Improved functionality (hopefully)

I've added a little more functionality to the form tabs. I've taken dropdown menus from Dynamic Drive and incorporated that into this control. So, now you can have "child" tabs that fly out from the "parent" tab. There's are a couple more properties to set to accomplish this result:

Your code will look something like this:

'tabs.AddTab(Tab Text, URL string, ClientID, IsSelected, HasChildren)
tabs.AddTab("Categories", "", "categories", False, True)
tabs.AddChildTab("categories", "Books", "books.aspx")
tabs.AddChildTab("categories", "Music", "music.aspx")

tabs.AddTab("Help", "Menu2.aspx", "help", True, True)
tabs.AddChildTab("help", "Contact Us", "contact.aspx")
tabs.AddChildTab("help", "Privacy Policy", "privacy.aspx")

I've also updated the source files (Download updated source code - 27.5 Kb) so that it includes a solution with the custom control project as well as a Web project for getting it up and running easier. The solution also contains an external JS file that controls the dropdown menus, so you need to include that file in your project should you need the dropdown functionality. Should you not need the dropdown functionality in your project, just set the HasChildren property to False.

I played with several menu systems, but found that the one from Dynamic Drive works the best (and easiest). If anyone has any suggestions on further improving this control, let me know.


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


About the Author

Web Developer
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
P.Salini21-Jun-12 20:03
memberP.Salini21-Jun-12 20:03 
GeneralRegarding Event Handler in our control Pin
3-Oct-08 6:02
member3-Oct-08 6:02 
GeneralSelected Item not working Pin
clayson12-Dec-07 4:26
memberclayson12-Dec-07 4:26 
GeneralRe: Selected Item not working Pin
CraigCampbell15-Aug-08 5:04
memberCraigCampbell15-Aug-08 5:04 
GeneralTab Click event Pin
byka13-Nov-07 8:25
memberbyka13-Nov-07 8:25 
QuestionHow do I detect when I am leaving a tab? Pin
dgoolsby26-Sep-07 10:31
memberdgoolsby26-Sep-07 10:31 
AnswerRe: How do I detect when I am leaving a tab? Pin
CraigCampbell15-Aug-08 5:08
memberCraigCampbell15-Aug-08 5:08 
QuestionTabs Font Pin
keyser-soze13-Sep-07 2:47
memberkeyser-soze13-Sep-07 2:47 
QuestionHow to automatically select the tab? Pin
mischiefmantra8-Jan-07 8:29
membermischiefmantra8-Jan-07 8:29 
AnswerRe: How to automatically select the tab? Pin
CraigCampbell8-Jan-07 8:52
memberCraigCampbell8-Jan-07 8:52 
QuestioncheckDirty not working Pin
kkmothe31-Oct-06 5:24
memberkkmothe31-Oct-06 5:24 
AnswerRe: checkDirty not working Pin
CraigCampbell31-Oct-06 7:19
memberCraigCampbell31-Oct-06 7:19 
QuestionRe: checkDirty not working Pin
kkmothe9-Nov-06 5:51
memberkkmothe9-Nov-06 5:51 
QuestionUsing Form Tabs on same page Pin
him_patel13-Oct-06 11:27
memberhim_patel13-Oct-06 11:27 
AnswerRe: Using Form Tabs on same page Pin
CraigCampbell16-Oct-06 3:57
memberCraigCampbell16-Oct-06 3:57 
GeneralSemantic Markup Pin
the_ox25-Sep-06 21:28
memberthe_ox25-Sep-06 21:28 
GeneralRe: Semantic Markup Pin
CraigCampbell26-Sep-06 2:13
memberCraigCampbell26-Sep-06 2:13 
GeneralGood One Pin
Michael_Dhasu20-Sep-06 0:10
memberMichael_Dhasu20-Sep-06 0:10 
GeneralRe: Good One Pin
vik2020-Sep-06 19:14
membervik2020-Sep-06 19:14 
GeneralRe: Good One Pin
CraigCampbell31-Oct-06 7:25
memberCraigCampbell31-Oct-06 7:25 
GeneralSelect tab manualy Pin
morteza5724-Jul-06 22:44
membermorteza5724-Jul-06 22:44 
GeneralRe: Select tab manualy Pin
CraigCampbell25-Jul-06 2:01
memberCraigCampbell25-Jul-06 2:01 
GeneralRe: Select tab manualy Pin
morteza5725-Jul-06 2:47
membermorteza5725-Jul-06 2:47 
GeneralSample Page Pin
Dewey15-Jul-06 16:26
memberDewey15-Jul-06 16:26 
QuestionCheckDirty.js?? Pin
Palanisamy Veerasingam11-Jul-06 22:51
memberPalanisamy Veerasingam11-Jul-06 22:51 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180920.1 | Last Updated 20 Sep 2006
Article Copyright 2006 by CraigCampbell
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid