Implementation of Tab Control using MultiView,View and Menu control in ASP.NET using VB.NET

In this article we are discussing how you can implement tab control with the help of Multiview, View and Menu controls. See the Markup in the Default.aspx web page. There you can see how the MultiView, View and Menu controls are defined. We also used a StyleSheet "StyleSheets.css" file in the code which defines a very simple border which is shown below the tabs. In the example for each 'Tab' page there must be an enabled Tab Image and a Diasable Tab image. The images you can see in the images folder in the code. When a user Clicks a Tab(actually a menu item), the ImageUrl for the MenuItem associated with the Tab is set to 'enabled' image for the Tab. At the same time all other MenuItem ImageUrls are set to 'Disabled' Tab Images. Below is the VB.NET 2010 code that processes the interface when a user clicks the tab.
 
Steps for Implementation:-

• Simply open a new ASP.NET web application. 
• Add the multiview, View and Menu controls or write below code to add the controls.
  
  <%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"
      CodeBehind="Default.aspx.vb" Inherits="Web Tab Control._Default" %>
   <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  </asp:Content>
  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <h2>Web Page Tab Control From ASP.NET Multiview, View, and Menu Controls</h2>
      <asp:Menu ID="Menu1" Width="216px" runat="server" orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
                  OnMenuItemClick="Menu1_MenuItemClick" RenderingMode="Table">
                  <Items>
                      <asp:MenuItem ImageUrl="~/Images/HomeEnabled.jpg" Value="0" Text=" "></asp:MenuItem>
                      <asp:MenuItem ImageUrl="~/Images/ProductsDisabled.jpg" Text=" " Value="1"></asp:MenuItem>
                      <asp:MenuItem ImageUrl="~/Images/SupportDisabled.jpg" Text=" " Value="2"></asp:MenuItem>
                      <asp:MenuItem ImageUrl="~/Images/HelpDisabled.jpg" Text=" " Value="3"></asp:MenuItem>
                  </Items>
              </asp:Menu>
              <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                  <asp:View ID="Tab1" runat="server" >
                      <table width="578"  cellpadding="0" cellspacing="0">
                          <tr valign="top">
                              <td class="TabArea" style="width: 578px">
                              <br />
                              </td>
                          </tr>
                      </table>
                      <strong><span style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                          &nbsp; &nbsp;
                          <br/>
                          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Home page content...</span></strong></asp:View>
                  <asp:View ID="Tab2" runat="server">
                      <table width="578"  cellpadding="0" cellspacing="0">
                          <tr valign="top">
                              <td class="TabArea" style="width: 578px"> 
                              </td>
                          </tr>
                      </table>
                      <strong><span style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                          &nbsp; &nbsp;&nbsp;<br />
                          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Products page content...</span></strong></asp:View>
                  <asp:View ID="Tab3" runat="server">
                      <table width="578"  cellpadding="0" cellspacing="0">
                          <tr valign="top">                           
                              <td class="TabArea" style="width: 578px"
                              </td>
                          </tr>
                      </table>
                      <strong><span style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                          &nbsp; &nbsp;&nbsp;<br />
                          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Support page content...</span></strong></asp:View>
                  <asp:View ID="Tab4" runat="server">
                      <table width="578"  cellpadding="0" cellspacing="0">
                          <tr valign="top">
                              <td class="TabArea" style="width: 578px"> 
                              </td>
                          </tr>
                      </table>
                      <strong><span style="font-size: 14pt">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                          &nbsp; &nbsp;&nbsp;<br />
                          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Help page content...</span></strong></asp:View>
              </asp:MultiView>
  </asp:Content>
   
• The Design page will look like below.
  
  
   
• Right-Click on design page and select view code. 
• Then write the below code.
  
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
          If Page.IsPostBack = False Then
              Menu1.Items(0).Selected = True
          End If
      End Sub
      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
  
  Output:-