ASP.Net AJAX Tab Control Extender

AJAX Tab Control Extender also belongs to ASP.Net AJAX Control toolkit library provided by Microsoft’s official open source community. AJAX Tab control extender provides the functionality to display the multiple things on a single web page in the form of tabs. AJAX Tab control extender is a set of two types of toolkit controls: one is AJAX TabContainer and other is TabPanel. AJAX TabContainer extender control holds the set of TabPanel to create a set of tabs along with their related content. AJAX TabPanel further provides two types of Templates to create the tabs and their content. HeaderTemplate of AJAX TabPanel creates the tab with specified text as its heading and ContentTemplate creates the content view for the associated TabPanel.

ASP.Net AJAX Tab Extender Control Properties

AJAX TabContainer Properties

CssClass: accepts the name of CSS class that could override the styles of default CSS class styles to display the AJAX Tabs. You can customize the look and feel of Tabs using CssClass property.

Height: sets the height of AJAX Tab Container excluding the Tabs section.

Width: sets the width of AJAX Tab Container. It sets the width of body section of the AJAX TabContainer containing content.

ScrollBars: Accepts the different types of values to display the scrollbars. ScrollBars property of AJAX Tab Extender control supports the following set of values:

• Auto
• Both
• Horizontal
• None
• Vertical

onClientActiveTabChanged: Accepts the name of a client-side javascript function to fire it for tabChanged client-side event.

onActiveTabChanged: This event executes at server side when postback occurs after tab changed event. 

AJAX TabPanel Properties

OnClientClick: Accepts the name of a client-side javascript function to fire it for onclick client-side event for tabs.

HeaderText: Sets the text to be displayed on Tabs.

HeaderTemplate: Header template provides a container for AJAX TabPanel to render the Tab with specified text.

ContentTemplate: Content template provides a container for AJAX TabPanel to render the content body with specified text.

HTML Code for ASP.Net AJAX Tab Control Extender

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
    <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
        <HeaderTemplate>Tab1</HeaderTemplate>
        <ContentTemplate>Content under Tab1</ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
        <HeaderTemplate>Tab2</HeaderTemplate>
        <ContentTemplate>Content under Tab2</ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
        <HeaderTemplate>Tab3</HeaderTemplate>
        <ContentTemplate>Content under Tab3</ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Next learn how to customize the ASP.Net AJAX Tab Extender control using CSS class styles

By default ASP.Net AJAX Tab extender control renders with default CSS styles defined for it in the AJAX control toolkit code.