When you want to have tabs on your ASP.Net page, you don't have a standard webcontrol in Visual Studio .Net. But Microsoft offers a solution in the MSDN. In the MSDN you can find a topic about Internet Explorer Webcontrols. These selection controls exists of :
- Treeview
- Toolbar
- Tabstrip and Multipage
You can download these controls here.
The tabstrip
The tabstrip can be used for a tabbed layout/menu on your ASP.Net page. In combination with the multipage, we got a powerfull control which can be used to render your pageview whenever a tab is selected. We can show the content of a page, without navigation to another page.
The tabstrip implements server- and client-side objects, therefor the tabstrip offers two modes of authoring.
- Tabstrip server-side controls : Tabstrip interfaces can be implemented using the elements and objects exposed by the Tabstrip server-side controls.
- Tabstrip behavior : Tabstrip interfaces can also be written in HTML using the Tabstrip behavior.
In both cases the same set of elements is used, but due the differences in the architecture the models are a bit different. The best is, when the browser is not known, to use server side controls. When you know that IE 5.5 or later will be used, you better use the Tabstrip behavior. The advantge is that there will be a fatser donwload, because server-side processing is avoided.
Tabstrip objects
The Tabstrip has 3 objects :
|
Client Behavior |
ASP.NET |
Description |
| TabStrip |
TabStrip |
A container element for other TabStrip elements |
| Tab |
Tab |
Defines a tab element within a TabStrip control |
| TabSeparator |
TabSeparator |
Defines a separator element, which is placed between two adjacent Tab control |
Customization
The tabstrip offers a few features :
- Text based tabs : Is automatiscly available. you focus only on the text content of the tab. You can use CSS.
- Picture-based tabs : you want the control (full or partial) over the tab, or you want to add graphical items to your tab.
- Orientation : You can decide to use vertical or horizontal tabs.
Also for formatting there are some features :
- Default : This state is active when the tab is not selected and the no mouse is going over the tab
- Selected : This state is active when a tab is selected
- Hover : This state is used when the mouse is moving over the tab
Multipage or not
You can use multipages on your tabs. This control is also available in the internet web controls.
With multipage
This is most used possibility. You define your tabstrip and your items for each tabstrip using the multipage control.
Without multipage
When using this method, you need to use the SelectedIndex property of the tabstrip so you could naviagte to other Web pages.
Example
|
<mytab:TabStrip id="tsHoriz" runat="server" Style="FONT-WEIGHT:bold" TabDefaultStyle="border:solid 1px black;background:#dddddd; padding-left:5px;padding-right:5px;" TabHoverStyle="color:red" TabSelectedStyle="border:solid 1px black;border-bottom:none; background:white;padding-left:5px;padding-right:5px;" SepDefaultStyle="border-bottom:solid 1px #000000;" TargetID="mpHoriz">
<mytab:Tab Text="Info" />
<mytab:TabSeparator />
<mytab:Tab Text="Address" />
<mytab:TabSeparator />
<mytab:Tab Text="Hobby's" />
<mytab:TabSeparator />
</mytab:TabStrip>
<mytab:MultiPage id="mpHoriz" runat="server" Style="BORDER-RIGHT:#000000 1px solid; PADDING-RIGHT:5px; BORDER-TOP:medium none; PADDING-LEFT:5px; PADDING-BOTTOM:5px; BORDER-LEFT:#000000 1px solid; PADDING-TOP:5px; BORDER-BOTTOM:#000000 1px solid" Height="150">
<mytab:PageView>
<table>
<tr>
<td>Name </td>
<td><asp:TextBox id="Textbox1" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td>Prename </td>
<td> <asp:TextBox id="Textbox2" runat="server"></asp:TextBox> </td>
</tr>
</table>
</mytab:PageView>
<mytab:PageView>
<table>
<tr>
<td>Street + Nr </td>
<td> <asp:TextBox id="Textbox3" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td>Postcode </td>
<td> <asp:TextBox id="Textbox4" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td>City </td>
<td> <asp:TextBox id="Textbox5" runat="server"></asp:TextBox> </td>
</tr>
</table>
</mytab:PageView>
<mytab:PageView>
<table>
<tr>
<td>Hobby's </td>
<td> <asp:TextBox id="Hobby1" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td> </td>
<td> <asp:TextBox id="Hobby2" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td> </td>
<td> <asp:TextBox id="Hobby3" runat="server"></asp:TextBox> </td>
</tr>
<tr>
<td> </td>
<td> <asp:TextBox id="Hobby4" runat="server"></asp:TextBox> </td>
</tr>
</table>
</mytab:PageView>
</mytab:MultiPage> |
Personnaly I use the tabstrip with Multipage. In this multipage I put my own usercontrols. The reason is, to modify you tabstrip content is easier when using user controls, than putting the content directly on the multipage. With the last way of programming you must change everything thourgh code, because you can't reach teh content in design view.
One note : These controls are not currently supported by Microsoft !!