Dynamic ASP.NET Form Tabs

• Download source files - 7.1 Kb

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:

• Download CheckDirty source code - 0.4 Kb.

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.