I've built a custom control that generates a tab style navigation. Each page might have different tabs to display, the aim was to modularise it so I can make global changes to all the tabs.
TabMenu.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TabMenu.ascx.cs" Inherits="TabMenu" %> <asp:Panel runat="server" ID="TabMenuWrapper" CssClass="tabWrapper"> </asp:Panel> TabMenu.ascx.cs
using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Collections; public partial class TabMenu : System.Web.UI.UserControl { public string TabGroup { get; set; } // The tab group this control belongs to public int SelectedTab { get; set; } // Index of selected tab protected void Page_Load(object sender, EventArgs e) { ArrayList tabCollection = new ArrayList(); MenuTab myTab; // Artorking tab group if (this.TabGroup.ToLower() == "artwork") { myTab = new MenuTab() { linkURL = "artworkHome.aspx", linkText = "First!" }; tabCollection.Add(myTab); myTab = new MenuTab() { linkURL = "artworkHome.aspx", linkText = "Second!" }; tabCollection.Add(myTab); myTab = new MenuTab() { linkURL = "artworkHome.aspx", linkText = "3rd!" }; tabCollection.Add(myTab); myTab = new MenuTab() { linkURL = "artworkHome.aspx", linkText = "Fourth!" }; tabCollection.Add(myTab); } // Add tabs to the page for (int i = 0; i < tabCollection.Count; i++) { MenuTab thisTab = ((MenuTab)(tabCollection[i])); thisTab.CreateTab(); if (i == this.SelectedTab) { thisTab.tabPanel.CssClass = "tab tabSelected"; } TabMenuWrapper.Controls.Add(thisTab.tabPanel); } TabMenuWrapper.Controls.Add(new Panel(){CssClass = "clear"}); } } // A menu tab public class MenuTab { public string linkURL; public string linkText; public HyperLink tabLink; public Panel tabPanel; // Create internal controls public void CreateTab() { this.tabLink = new HyperLink() { NavigateUrl = this.linkURL, Text = this.linkText }; this.tabPanel = new Panel() { CssClass = "tab" }; this.tabPanel.Controls.Add(this.tabLink); } } Used as follows:
<CrystalControls:TabMenu runat="server" ID="TopMenu" TabGroup="Artwork" SelectedTab="1" /> And renders like:
<div class="tab"> <a href="Controls/artworkHome.aspx">First!</a> </div><div class="tab tabSelected"> <a href="Controls/artworkHome.aspx">Second!</a> </div><div class="tab"> <a href="Controls/artworkHome.aspx">3rd!</a> </div><div class="tab"> <a href="Controls/artworkHome.aspx">Fourth!</a> </div><div class="clear"> </div> </div> Is this a good design?
