9
\$\begingroup\$

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?

\$\endgroup\$
5
\$\begingroup\$

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).

\$\endgroup\$
4
\$\begingroup\$

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

\$\endgroup\$
2
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.