Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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">
  <tr>
    <td class="tabrow">
      <cc1:formtab id="FormTab1" runat="server">
      </cc1:formtab>
    </td>    
  </tr>
</table>

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)
Else
    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.

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

Share

About the Author

CraigCampbell
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmemberP.Salini21-Jun-12 20:03 
GeneralRegarding Event Handler in our control PinmemberMember 31310503-Oct-08 6:02 
GeneralSelected Item not working Pinmemberclayson12-Dec-07 4:26 
GeneralRe: Selected Item not working PinmemberCraigCampbell15-Aug-08 5:04 
GeneralTab Click event Pinmemberbyka13-Nov-07 8:25 
QuestionHow do I detect when I am leaving a tab? Pinmemberdgoolsby26-Sep-07 10:31 
AnswerRe: How do I detect when I am leaving a tab? PinmemberCraigCampbell15-Aug-08 5:08 
QuestionTabs Font Pinmemberkeyser-soze13-Sep-07 2:47 
QuestionHow to automatically select the tab? Pinmembermischiefmantra8-Jan-07 8:29 
AnswerRe: How to automatically select the tab? PinmemberCraigCampbell8-Jan-07 8:52 
QuestioncheckDirty not working Pinmemberkkmothe31-Oct-06 5:24 
AnswerRe: checkDirty not working PinmemberCraigCampbell31-Oct-06 7:19 
QuestionRe: checkDirty not working Pinmemberkkmothe9-Nov-06 5:51 
QuestionUsing Form Tabs on same page Pinmemberhim_patel13-Oct-06 11:27 
AnswerRe: Using Form Tabs on same page PinmemberCraigCampbell16-Oct-06 3:57 
GeneralSemantic Markup Pinmemberthe_ox25-Sep-06 21:28 
GeneralRe: Semantic Markup PinmemberCraigCampbell26-Sep-06 2:13 
GeneralGood One PinmemberMichael_Dhasu20-Sep-06 0:10 
GeneralRe: Good One Pinmembervik2020-Sep-06 19:14 
GeneralRe: Good One PinmemberCraigCampbell31-Oct-06 7:25 
GeneralSelect tab manualy Pinmembermorteza5724-Jul-06 22:44 
GeneralRe: Select tab manualy PinmemberCraigCampbell25-Jul-06 2:01 
GeneralRe: Select tab manualy Pinmembermorteza5725-Jul-06 2:47 
GeneralSample Page PinmemberDewey15-Jul-06 16:26 
QuestionCheckDirty.js?? PinmemberPalanisamy Veerasingam11-Jul-06 22:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 20 Sep 2006
Article Copyright 2006 by CraigCampbell
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid