Asp.Net Tab Structure using Asp:Menu Control

In this post we will focus on implementing a Tab Structure in Asp.Net 2.0 using the built in Asp:Menu Control.

Asp.Net 2.0 does not have a built in Tab Structure; we can implement this with some 3^rd party controls, but to do so we need to undergo the additional hassle of integrating with the 3^rd party assemblies and at time we end up in scenarios where the hosting/production environment does not allow hosting of 3^rd party assemblies, or there could be privilege issues in deploying 3^rd party assemblies to the hosting/production environment. So what do we do? We still need to have the Tab Structure right!! Here is the work around, we can use the control which ships along with Asp.Net 2.0, configure it in such a way that it looks like a tab control.

Let us now see, how to get a Tab Structure in Asp.Net 2.0 using the built in Asp:Menu Control.

Create a new Asp.Net Project and create a page where we need to implement the Tab Structure.
Add an Asp:Menu control to the page, in the location where you need to have the Tab Structure, and add the required tabs as meny items as follows.

The style attributes StaticMenuStyle & StaticSelectedStyle refer to the style sheets defined in the .css file below

.MenuNormal
{
background-color:Silver;
color:Blue;
font-family:Verdana;
font-size:15px;
border-style:solid;
border-color:Black;
border-width:1px;
}

.MenuActive
{
background-color:Maroon;
color:White;
font-family:Verdana;
font-size:15px;
border-style:solid;
border-color:Black;
border-width:1px;
}

The Selected Tab can be identified by implementing the MenuItemClick event as follows

protected void mnuMain_MenuItemClick(object sender, MenuEventArgs e)
{
lblMsg.Text = "You have selected the Tab: " + e.Item.Value;
}

That's it we have implemented a Tab Control structure using the Asp:Menu Control, in Asp.Net 2.0