ComponentArt TabStrip is a fully featured navigation control based on advanced client-side rendering technology. We can create rich tabbed user interfaces with client side multi-tab functionality in our ASP.NET applications. It comes with some built-in themes and designs. But any design can be implemented through CSS style definitions, and optional custom images.

ComponentArt comes with a license. But you can download the free 30 days trial ComponentArt Web.UI for ASP.NET AJAX controls from ComponentArt website. After downloading the components install it in your machine. All the controls including TabStrip will be available in your visual studio toolbox.

Start Visual Studio. Click File -> New -> Web Site. Select the ASP.NET Web Site and name the site as TabStripSample.

Open Default.aspx in source mode. Expand the "ComponentArt Web UI 2010.1 for ASP.NET" node in toolbox. Drag the TabStrip control and drop it into the page. You can also manually type it, but dragging the control for the first time adds the following reference to the page.

<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" 
TagPrefix="ComponentArt" %>

Now the control is placed in the page. We need to set some other properties of the control.

How to Create Multiple Tabs Using MultiPage Control

ComponentArt's MultiPage control is used to create tabs for the TabStrip control. Inside MultiPage control we can create many PageViews. So the MultiPage control acts as the main placeholder for all the tabs and the PageView control acts as one tab. We can create as many PageViews inside one MultiPage control. Inside the PageView control we can put any HTML content to create the tab.

Specify an ID to the MultiPage control. The TabStrip control has a property called "MultiPageId". Set this property to the ID of the MultiPage control.

Now the HTML content for our Tabs is ready. Now we have to create the Tab names or the headers for the respective PageView.

How to Set the Tab Names

There are 2 ways of setting the Tab names to your tabs.

Setting Tab Names by Binding to an external XML file

Create an XML file which will hold all the required Tab names or the Headers. Write the following XML code into the file.

<SiteMap>
      <item Text="Employee Details" />
      <item Text="Employee Contact" />
      <item Text="Employee Projects" />   
</SiteMap>

I have named the root node as SiteMap but you can specify any other name. But the starting and ending node names should be same. Inside the root node there are some item nodes. The "item" node has a property called "Text". This property's value will be set as the Tab's name or header. While creating the XML nodes you need to keep one thing mind that the order of the PageView control and the "item" nodes should match. Otherwise "Employee Details" tab will show "Employee Contact" or "Employee Projects".

By Specifying Under the TabStrip Control

There is another way of creating the Tab names. You can specify them directly under the TabStrip control like below.

<Tabs>
    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Details "></ComponentArt:TabStripTab>
    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Contact "></ComponentArt:TabStripTab>
    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Projects "></ComponentArt:TabStripTab>                
</Tabs> 

You have to choose either of this method.

If you don't apply CSS to the Tabs then they will look like ordinary links overlapping each other. To make the Tabs look stylish you have put some cosmetics. The TabStrip control already has some built-in themes.

You can find the in-built CSS files at this location as you have already installed ComponentArt to your machine "C:\Program Files\ComponentArt\UI Framework 2010.1 for .NET\live_demos\aspnetajax\Common\themes\20101".

Inside each folder there is a CSS file. Add a reference for a particular file to your aspx page. Then set the AutoTheming property of the TabStrip Control to true. It will automatically apply the styles to the tabs. If you want some other style then you can create your own CSS and apply.

When you put other HTML or ASP.NET controls inside the MultiPage controls then you can't directly access them in server side. But in client side you can directly access them using document.getElementById.

Server Side Access

Suppose you have placed an Asp.NET Label control in one of the tabs. This control is not directly under the Page control. So you can't directly access it. You have to do the following:

MultiPage multipage = (MultiPage)Page.FindControl("MultiPage1");
PageView PageView1 = (PageView)multipage.FindControl("PageView1");
Label lblName = (Label)PageView1.FindControl("lblName");
lblName.Text = "Dynamically generated text";

As you can see, first we have to access the MultiPage control. Then under that the PageView control and after that our Label.

Client Side Access

There is no problem for accessing the controls in client side. You can directly access them as other normal controls, because while rendering the controls in HTML ComponentArt doesn't change the ID of the controls. They remain the same as specified while designing. So you can use the following line to access the Label :

document.getElementById("lblName").innerHTML = "Client text ";

This is a very basic article about how to just use the TabStrip control. There are many other aspects like dynamically creation of tabs, events, custom designs and many more. You can explore them all in ComponentArt's website.

References

http://aspnetajax.componentart.com/