It may happen to any ASP.NET Developer that the customers want to have a Tab Control in their websites. There are many ASP.NET components such as Telerik RAD Controls, ComponentArt, DevExpress, etc. which can help you out in this but sometimes they are expensive for your project capacity.

In this post, I’m going to show you how you can create a very simple Tab Control using ASP.NET and JavaScript.

You can do lots of thing in order to create a Tab Control but what I’m going to do is to create a class that is inherited from System.Web.UI.WebControl:

    public class TabControl : System.Web.UI.WebControls.WebControl

    {

    }

You can make your Tab Control flexible by adding some properties to it. For example, enable your developers to set CssClass to a TabItem:

private string _MainCssClass;

private string _ItemCssClass;

private string _InActiveCssClass;

private string _ActiveCssClass; 

private Unit _ItemWidth = 70;

private HorizontalAlign _HorizontalAlign = HorizontalAlign.NotSet;

private string _LinkCssClass;

They’re OK; but the interesting part is to use of a string array in order to store TabItem names:

private string[] _TabNames = { "Item1", "Item2" };

This is also a property, so developers can add their own items. Another important property is a list of Panels of those TabItems. Actually, Panels are the content of each TabName:

private List<Panel> _Panels = new List<Panel>();

In the field above, developers can add their specified panels for each TabItem. The most important method in creating custom web controls is the Render() method which enable you to design your control using HTML tags. Here is my Render() method:

protected override void Render(System.Web.UI.HtmlTextWriter w)

{

    if (_Panels.Count == 0 || _Panels == null)

        throw new NullReferenceException("Please specify at least one panel.");

    w.WriteLine("<!-- Developed by Mohammad Mahdi Ramezanpour. © 2008 Marlik. -->");

    w.WriteLine(String.Format(@"<table cellpadding=""0"" cellspacing=""0""

    class=""{0}""><tr id=""MarlikTabControl"">", _MainCssClass));

    foreach (Panel p in this.Panels)

    {

        cols.Add("Tab_" + _itemIndex);

        w.WriteLine(String.Format(@"<td onmouseover=""javascript:this.style.cursor='hand';""

        class=""{0} {3}"" align=""{5}"" id=""Tab_{4}"" 

        onclick=""ShowTabContent('{1}', 'Tab_{4}');"" width=""{2}"">",

         _ItemCssClass, p.ClientID, this._ItemWidth, this._InActiveCssClass, 

         this._itemIndex, this._HorizontalAlign.ToString()));

        w.WriteLine(String.Format(@"<a class=""{1} {2}"">{0}</a>",

        _TabNames[_itemIndex], _LinkCssClass,  _ItemCssClass));

        _itemIndex++;

        w.WriteEndTag("td");

    }

    w.Write("</tr></table>");

    w.WriteLine(JavaFunctions().ToString());

    base.Render(w);

}

How it works?

In the first I checked for available panels and if there was no panels so an exception will be throwing using NullReferenceException.

As you know, there is a writer parameter as System.Web.UI.HtmlTextWriter in Render() method that enable you to generate HTML codes in your web component. You have to use that if you want to use HTML or any client-side code in your web control. Add I did above is to create a HTML <table></table> tag but rows and columns will be generating dynamically using HtmlTextWriter.

You can download the full code here: TabControl