Creating Tab Strip using Multi-View and View Server Controls

Here is a very simple way to create a Tab Strip display for tabbed user interface using existing ASP .NET Server controls viz., Multi-View and View Server Controls.

This code creates an illusion of tab-strip control in asp .net. On click event of the Menu Control, it changes the 'View' that are part of the Multi-View control. So, presumably this causes a postback of the page. You can prevent this using UpdatePanel of ASP .NET AJAX toolkit and setting the trigger on Menu Control click.

You can use the following code into any ASPX file and see the output as is shown here in the pretty screen shot.



<table border="0" cellpadding="0" cellspacing="0">



<tr id="menustrip">

<td>

<asp:Menu ID="mnuTabs" runat="server" Orientation="Horizontal" BackColor="#B5C7DE" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="1em" ForeColor="#284E98" StaticSubMenuIndent="10px" OnMenuItemClick="mnuTabs_MenuItemClick">

<Items>

<asp:MenuItem Text="Tab 1" Value="1" Selected="True"></asp:MenuItem>

<asp:MenuItem Text="Tab 2" Value="2"></asp:MenuItem>

<asp:MenuItem Text="Tab 3" Value="3"></asp:MenuItem>

<asp:MenuItem Text="Tab 4" Value="4"></asp:MenuItem>

</Items>



<StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="4px" ItemSpacing="0" BorderColor="#507cd1" BorderStyle="dotted" BorderWidth="1" />

<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />

<DynamicMenuStyle BackColor="#B5C7DE" />

<StaticSelectedStyle BackColor="#507CD1" ForeColor="White" BorderColor="#507cd1" BorderStyle="solid" BorderWidth="1" />

<DynamicSelectedStyle BackColor="#507CD1" />

<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<StaticHoverStyle BackColor="#284E98" ForeColor="White" />

</asp:Menu>



</td>

<td></td>

</tr>

<tr>

<td colspan="2">

<div style="border: solid 2px #507cd1; border-top-width:4px; display:table; position:relative; padding: 3px 5px 3px 5px; min-width:975px; min-height:200px;">

<asp:MultiView ID="mvwPanes" runat="server">

<asp:View ID="View1" runat="server">

<p class="tab-view-heading">

Pane 1</p>

</asp:View>

<asp:View ID="View2" runat="server">

<p class="tab-view-heading">

Pane 2</p>

</asp:View>

<asp:View ID="View3" runat="server">

<p class="tab-view-heading">

Pane 3</p>

</asp:View>

<asp:View ID="View4" runat="server">

<p class="tab-view-heading">

Pane 4</p>

</asp:View>

</asp:MultiView>

</div>

</td>

</tr>

<tr id="viewstrip">



</tr>

</table>