Ads

Captured Technology - Blog

Creating Tabbed Content With the ASP.Net Menu Control

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.
 Patrick Stevens
 532  246381  3/14/2024

Translate

Categories

Blog Calendar