ASP.net custom user control design

Question

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?

Answer 1

It might be better to render the control as an unordered list. This is more semantically correct and normal practice for menu-type controls (which tabs are, if you think about it).

Answer 2

Yes the design looks good but it would be really better if you could replace that ArrayList with a Generic Collection.

Answer 3

Step:

• Open a Blank Default.aspx page from visual studio 2005.
• Go to the solution explorer and right click on to the Default.aspx and then click on the Add New Item.
• After that you have to select the Web User Control.ascx file from add new item dialog box.
• That page will be the same like as default asp page draw your user control on that page.

• Code on the User Control.ascx page:

  <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
  <table style="width: 330px">
   <tr>
   <td style="height: 148px" align="center">
   <asp:Label ID="Label1" runat="server" Text="Thanks To awadh Sir" Font-Bold="True" Font-Size="XX-Large" ForeColor="Red" Visible="False"></asp:Label>
   </td>
   </tr>
   <tr>
   <td style="height: 55px" align="center">
   <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
   </td>
   </tr>
  </table>
  

For more details please check out this link...

http://www.mindstick.com/Articles/535bd817-c3c1-46dd-be9c-f14e42c7db78/?Creating%20User%20Define%20Control%20in%20ASP%20.Net

Thanks