Source Code: Web Tab Control From Asp.Net MultiView, Menu, And View Controls
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
For more information visit the links below: