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

Creating Rounded Corners and Building the Table in ASP.Net Code

I have worked with a number of rounded corner solutions over the past 6 months since the interns that do design at work love rounded corners. I think the best method we have developed is to slice an image into 8 small images and then build a table surrounding content that shows the corners desired. I like to use Paint.Net to create the 8 images of 15px by 15px each. As you can imagine the images are top_left, top, top_right, left, right, etc.

The table code is like so:

<table cellpadding="0" cellspacing="0">
        <tr id="header">
            <td width="15px" height="15px"><img alt="gray_topleft" src="gray_topleft.png" />td>
            <td height="15px" style="background-image:url('gray_top.png'); background-repeat:repeat-x;">td>
            <td width="15px" height="15px"><img alt="gray_topright" src="gray_topright.png" />td>
        tr>
        <tr id="body">
            <td width="15px" style="background-image:url('gray_left.png'); background-repeat:repeat-y;">td>
            <td>td>
            <td width="15px" style="background-image:url('gray_right.png'); background-repeat:repeat-y;">td>
        tr>
        <tr id="footer">
            <td width="15px" height="15px"><img alt="gray_bottomleft" src="gray_bottomleft.png" />td>
            <td height="15px" style="background-image:url('gray_bottom.png'); background-repeat:repeat-x;">td>
            <td width="15px" height="15px"><img alt="gray_bottomright" src="gray_bottomright.png" />td>
        tr>
table>

With our web solution we also need to create a user control that will be included within other user controls. For that reason we cannot use the html as it is but need to transform the html into VB.net controls and add them to the user control object. Here is an example of the above html code in VB.Net.

        Dim objTable As New Table
        objTable.CellPadding = 0
        objTable.CellSpacing = 0

        Dim objHeaderRow As New TableRow
        Dim objHeaderCell1 As New TableCell
        Dim objHeaderCell2 As New TableCell
        Dim objHeaderCell3 As New TableCell

        objHeaderCell1.Width = 15
        objHeaderCell1.Height = 15
        objHeaderCell1.Style.Add("background-image", "url('../Themes/Images/gray_topleft.png')")
        objHeaderCell1.Style.Add("background-repeat", "no-repeat")

        objHeaderCell2.Height = 15
        objHeaderCell2.Style.Add("background-image", "url('../Themes/Images/gray_top.png')")
        objHeaderCell2.Style.Add("background-repeat", "repeat-x")

        objHeaderCell3.Width = 15
        objHeaderCell3.Height = 15
        objHeaderCell3.Style.Add("background-image", "url('../Themes/Images/gray_topright.png')")
        objHeaderCell3.Style.Add("background-repeat", "no-repeat")

        objHeaderRow.Cells.Add(objHeaderCell1)
        objHeaderRow.Cells.Add(objHeaderCell2)
        objHeaderRow.Cells.Add(objHeaderCell3)

        Dim objBodyRow As New TableRow
        Dim objBodyCell1 As New TableCell
        Dim objBodyCell2 As New TableCell
        Dim objBodyCell3 As New TableCell

        objBodyCell1.Width = 15
        objBodyCell1.Style.Add("background-image", "url('../Themes/Images/gray_left.png')")
        objBodyCell1.Style.Add("background-repeat", "repeat-y")

        Dim objBodyContainer As New MessageContainer
        BodyTemplate.InstantiateIn(objBodyContainer)
        objBodyCell2.Controls.Add(objBodyContainer)
        objBodyCell2.Style.Add("background-color", "#E4E2E2")

        objBodyCell3.Width = 15
        objBodyCell3.Style.Add("background-image", "url('../Themes/Images/gray_right.png')")
        objBodyCell3.Style.Add("background-repeat", "repeat-y")

        objBodyRow.Cells.Add(objBodyCell1)
        objBodyRow.Cells.Add(objBodyCell2)
        objBodyRow.Cells.Add(objBodyCell3)

        Dim objFooterRow As New TableRow
        Dim objFooterCell1 As New TableCell
        Dim objFooterCell2 As New TableCell
        Dim objFooterCell3 As New TableCell

        objFooterCell1.Width = 15
        objFooterCell1.Height = 15
        objFooterCell1.Style.Add("background-image", "url('../Themes/Images/gray_bottomleft.png')")
        objFooterCell1.Style.Add("background-repeat", "no-repeat")

        objFooterCell2.Height = 15
        objFooterCell2.Style.Add("background-image", "url('../Themes/Images/gray_bottom.png')")
        objFooterCell2.Style.Add("background-repeat", "repeat-x")

        objFooterCell3.Width = 15
        objFooterCell3.Height = 15
        objFooterCell3.Style.Add("background-image", "url('../Themes/Images/gray_bottomright.png')")
        objFooterCell3.Style.Add("background-repeat", "no-repeat")

        objFooterRow.Cells.Add(objFooterCell1)
        objFooterRow.Cells.Add(objFooterCell2)
        objFooterRow.Cells.Add(objFooterCell3)

        objTable.Rows.Add(objHeaderRow)
        objTable.Rows.Add(objBodyRow)
        objTable.Rows.Add(objFooterRow)

        Me.Controls.Clear()
        Me.Controls.Add(objTable)

ASP.Net Form Issues Solved

I was working on a ASP.Net form this week that created several issues that I need to research to solve. Radio Buttons on the page were making all other controls undetectable within the code. Validation text was wrapping from next to the validated control to underneath the control. And the Reset button on the page was causing validation to occur which is not desirable.

Radio Button List

I was able to solve the issue of radio buttons on the page affecting all other controls by wrapping the buttons into a radio button list.

"rdSpecificInvoiceInfo" runat="server">
     "rdSpecificInvoiceInfoY" runat="server" value="Yes" />
     "rdSpecificInvoiceInfoN" runat="server" value="No" />

Validation Text Wrapping

The second issue was solved by adding a style tag to the validation control itself.

"white-space:nowrap" 
ID="rfvYourName" visible="False" runat="server" ErrorMessage="Your Name is Required" 
Font-Bold="True" Font-Italic="False" ControlToValidate="txtYourName" 
Enabled="True">

No Validation on Reset

The reset button was the simplest but most difficult to solve. I found one article detailing the use of validation groups which did nothing but waste time in the implementation. Finally I found some information online about setting one property on the button, CausesValidation.

"bReset" CausesValidation="False" CssClass="form_control" 
runat="server" ToolTip="Reset" Width="60" Text="Reset" />