This article and source code demonstrates a technique for creating the tabbed page interface ('TabControl') shown below for an ASP.NET 2.0 web page.

The technique uses Visual Basic 2005, and the ASP.NET 2.0 MultiView, View, and Menu controls which are new in ASP.NET 2.0.




See the markup in the 'Default.aspx' web page (in the source code). There you will see how the Menu control, MultiView control, and View controls are defined.

The 'StyleSheet.css' file in the source code defines a very simple border which is shown below the 'tabs'.

For each 'tab' page there must be an enabled tab image, and a disabled tab image. See the 'Images' folder in the source code.

When a user clicks a tab (actually a MenuItem), the ImageUrl for the MenuItem associated with the tab is set to the enabled image for the tab. At the same time, all other MenuItem ImageUrls are assigned 'disabled' tab images. Shown below is the Visual Basic 2005 code that processes the interface when a user clicks a tab.

Code



Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick

MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)



Menu1.Items(0).ImageUrl = "~/Images/HomeDisabled.jpg"

Menu1.Items(1).ImageUrl = "~/Images/ProductsDisabled.jpg"

Menu1.Items(2).ImageUrl = "~/Images/SupportDisabled.jpg"

Menu1.Items(3).ImageUrl = "~/Images/HelpDisabled.jpg"



Select Case e.Item.Value

Case 0

Menu1.Items(0).ImageUrl = "~/Images/HomeEnabled.jpg"

Case 1

Menu1.Items(1).ImageUrl = "~/Images/ProductsEnabled.jpg"

Case 2

Menu1.Items(2).ImageUrl = "~/Images/SupportEnabled.jpg"

Case 3

Menu1.Items(3).ImageUrl = "~/Images/HelpEnabled.jpg"

End Select

End Sub