A Tab User Control with Client Side Object

• Download demo - 7.1 KB

Introduction

This tip introduces a .NET tab control which can render a tab style HTML content based on the parameters passed. It will also render a unique embedded client side object with the same id as the control's id. With this object, developers can manipulate the tab's behaviours from JavaScript codes, like to click a tab, show/hide a single tab, or even show/hide the whole tab array.

Background

Tab is quite often used to manage page's layout and control the other page element's behaviour. For example, you can define many divs on a page, and show only one div at a time based on which tab is clicked. However, there is not really a "tab" element in HTML. Developers usually have to write the HTML content by hand to mimic a tab on the page. It is kind of hard-coding issue: too much coding burden, less functionalities provided, and not easy to reuse. To make an easy to use (both server side and client side) one, I came up with this user control.

Prepare the Example Solution

Download and open the example solution, you will see 3 folders and 1 .NET page.

1. "controls", which contains the user control "TabsControl.ascx"
2. "images", which contains the images used in the control
3. "css", which contains the CSS file for the control, "TabsControl.css"
4. "Default.aspx" page, which demo how to use the control and the client side object

In your own application, if you rename or replace the folders "images" and "css", you may need to change some codes in the .css file and your page to ensure the referenced file has a correct path. Anyway, you know it.

Code Example (Server Side)

To use the tab control, first you need to register it in your page:

<%@ Register Src="controls\TabsControl.ascx" TagName="TabsControl" TagPrefix="tc" %>  

Then you need to reference the specific CSS file for the control:

<link href="css/TabsControl.css" rel="stylesheet" type="text/css" />

Now you can declare the control instance in your page, like this:

<tc:TabsControl ID="Tabs1" runat="server" /> 

From codes behind, assign parameters to the tab control in page load, like below:

 ArrayList TabParam = new ArrayList(new object[] { 
              new ArrayList( new object [] { true, "Microsoft", "OnTabClick(0)", true } ),
              new ArrayList( new object [] { false, "Facebook", "OnTabClick(1)", true } ),
              new ArrayList( new object [] { false, "Apple", "OnTabClick(2)", true } )
        });
 
Tabs1.TabParams = TabParam; 

You can see for each tab there is an ArrayList object assigned, which represents such a parameters array:

TabIsActive, TabText, TabClientSideOnClickEventHandler, TabIsVisible

In this way, you can set initially which tab is current active tab, and even can hide some tabs in the beginning and display it later from client side.

The control has its own on tab click event handler which is to change the style of the clicked tab to be active and turn the previous tab to be inactive, so you don't need to care about that. However, if in any specific case you don't want the tab to do this job, what do you need to do? Quite simple, turn a flag of the control to be false:

Tabs1.IncludeClientCodeToSetActiveTab = false; 

Bingo! Now you are able to see a tab on your page like below (from the example):

Code Example (Client Side Object)

Like mentioned above, the control will render a client side object to help you manipulate the behaviour of the tab, like click, show or hide.

I do this because in my past projects, it is quite often required to raise a tab click from codes, or to show/hide a tab dynamically according to logic. Maybe or maybe not, you have the same experience like me. Hard coding to do this is a really bad practice so I create the client side object to help.

The client side object has the same ID as the control's ID you declared. In the example, the tab control's ID is "Tabs1". Therefore, there is a "Tabs1" object automatically created on client side for you to use.

The use of methods in this object is like below:

Tabs1.ClickTab(1); //raise a click on the tab on index 1
Tabs1.ClickTabByText("Apple"); //raise a click on the tab with text "Apple"
Tabs1.ShowTabArray(); //Show the whole tab control
Tabs1.HideTabArray(); //Hide the whole tab control
Tabs1.ShowTabByIndex(1); //Show the tab on index 1
Tabs1.HideTabByIndex(1); //Hide the tab on index 1
Tabs1.ShowTabByText("Apple"); //Show the tab with text "Apple"
Tabs1.HideTabByText("Apple"); //Hide the tab with text "Apple" 

Limitation and Extensibility

Some of the code of this control is written with jQuery, so you need to reference JQuery in your page.

If the font size and color does not quite match with your page style, then you probably need to modify the control's CSS file by yourself. It might be some sort of additional work.

The control is open and free, if you need the object to do more work, you are free to extend it.