Introduction
A lot of my clients request tabbed navigation in their web applications. Most of the applications I work on are business type applications, and a favorite navigation scheme is to have a tab bar to represent high-level categories, with sub categories represented with a "sub" tab bar. So off I went to develop a control that would provide a visual representation of a tab bar that could be configured to be page aware or agnostic, integrates with the built-in ASP.NET roles API, has designer support, supports viewstate serialization, and could be easily manipulated programmatically.
Adding the tab bar to a page
First, add a reference to GeminiSoftworks.Web.Navigation.dll.
Next, add the following to your web.config file as a child of <system.web>
.
<pages>
<controls>
<add tagPrefix="TabBar"
namespace="GeminiSoftworks.Web.Navigation"
assembly="GeminiSoftworks.Web.Navigation"/>
<add tagPrefix="Tab"
namespace="GeminiSoftworks.Web.Navigation"
assembly="GeminiSoftworks.Web.Navigation"/>
</controls>
</pages>
Last, add the control to a page. This can be done by adding the control to your studio toolbox and then dragging the control on to the page, or by adding it directly to the HTML like so:
<TabBar:TabBar ID="TabBar1" runat="server" Width="100%">
<TabBar:Tab Link="~/default.aspx" Name="Home" PreserveFormOnTransfer="False"
Text="Home" ToolTip="Home" UseServerTransferMethod="False"
Visible="True" />
<TabBar:Tab Link="" Name="Resources" PreserveFormOnTransfer="False"
Text="Resources" ToolTip="Resources"
UseServerTransferMethod="False" Visible="True" />
<TabBar:Tab Link="" Name="Downloads" PreserveFormOnTransfer="False"
Text="Downloads" ToolTip="Downloads"
UseServerTransferMethod="False" Visible="True" />
</TabBar:TabBar>
Now, open the page in a browser and your page should render like the example image above.
Working with the tab bar in code
protected void TabBar1_TabClick(object sender,
System.ComponentModel.CancelEventArgs ce)
{
GeminiSoftworks.Web.Navigation.Tab t =
(GeminiSoftworks.Web.Navigation.Tab)sender;
GeminiSoftworks.Web.Navigation.Tab nt =
new GeminiSoftworks.Web.Navigation.Tab("NewTab",
"New Tab", "~/newpage.aspx", "New Tab");
nt.ActivePagesList = new string[] { "~/newsubpage1.aspx",
"~/newsubpage2.aspx" };
nt.AllowRoles = new string[] { "*" };
this.TabBar1.Tabs.Add(nt);
this.TabBar1.Tabs.Remove(this.TabBar1.Tabs.GetTab("Downloads"));
ce.Cancel = true;
}
Things you can learn from the source
- Designer support
- Embedding web resources
- Viewstate serialization
- Using HTML rendering instead of composite control rendering
- Supporting events
What still needs doing
At some point, I will add a few more things to the tab bar. Specifically, it needs ADA section 508 support, and the ability to use custom images instead of text for the tabs. One day, there will be a few hours free to do this, but instead of taking care of these enhancements at this time, I decided to submit this article in hopes others will find it useful. So please enjoy...