Captured Technology

Creating Tabbed Content With the ASP.Net Menu Control

Aug 21 2009

Creating Tabbed Content With the ASP.Net Menu Control

A recent design required tabbed content on the section page of a website. After doing some research I came upon a solution for tabbed content using the ASP.Net Menu Control. By placing a Menu Control on the page along with a Multiview Control, it is possible to show the different items of the Multiview Control when menu items are selected.

The page markup looks like this:

<table border="0" width="100%">
<tr>
    <td width="151px">
    <asp:Menu
            ID="mnuTabbedContent"
            runat="server"
            Orientation="Vertical"            
            OnMenuItemClick="mnuTabbedContent_MenuItemClick"            
            >
        <Items>
            <asp:MenuItem ImageUrl="~/Images/greentab.png" 
                          ToolTip="Item 1" Text=" " Value="0"> asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 2" Text=" " Value="1"> asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 3" Text=" " Value="2"> asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 4" Text=" " Value="3"> asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 5" Text=" " Value="4"> asp:MenuItem>
         Items>
     asp:Menu>
     td>
    <td width="521px">
    <asp:MultiView 
        ID="MultiView1"
        runat="server"
        ActiveViewIndex="0"  >
       <asp:View ID="Tab1" runat="server"  >
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 1
                     td>
                 tr>
             table>
          asp:View>
        <asp:View ID="Tab2" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 2
                     td>
                 tr>
             table>
         asp:View>
        <asp:View ID="Tab3" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 3
                     td>
                 tr>
             table>
         asp:View>
        <asp:View ID="Tab4" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 4
                     td>
                 tr>
             table>
         asp:View>
        <asp:View ID="Tab5" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 5
                     td>
                 tr>
             table>
         asp:View>
     asp:MultiView>
     td>
 tr>
 table>

While the code to display the desired content is like this:

    Protected Sub mnuTabbedContent_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) 
Handles
mnuTabbedContent.MenuItemClick ' Show the Content MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value) ' Make All Tabs White mnuTabbedContent.Items(0).ImageUrl = "~/Images/whitetab.png" mnuTabbedContent.Items(1).ImageUrl = "~/Images/whitetab.png" mnuTabbedContent.Items(2).ImageUrl = "~/Images/whitetab.png" mnuTabbedContent.Items(3).ImageUrl = "~/Images/whitetab.png" mnuTabbedContent.Items(4).ImageUrl = "~/Images/whitetab.png" ' Make Selected Tab Green Select e.Item.Value Case 0 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" Case 1 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" Case 2 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" Case 3 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" Case 4 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" Case Else : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png" End Select End Sub

Blog Directory

Latest technology news.
 Steve Patterson
 414  245421  6/12/2017

FaceBook

Translate

Sponsors





Blog Calendar

Categories