How to use TabContainer in ajax

TabContainer and TabPanel
TabContainer is an ajax control. TabContainer contain TabPanel objects. each TabPanel object represents a tab in TabContainer control. Tabs are used to organize the contents of TabContainer. this is a very useful tool when developers want to organize their page content in a small area.

TabPanel object have two parts a Header and a Content area. tabs header can be define by HeaderText or HeaderTemplate. ContentTemplate define the tabs content which we want to display in tab.

TabContainer have a great accessibility feature that we can access TabContainer by keyboard. we can navigate to different tabs by using keyboard left and right arrow keys. vertically displayed tabs can be navigate using keyboard up and down arrow keys.

TabContainer have many built in properties such as ActiveTabIndex, Height, ScrollBars, TabStripPlacement, UseVerticalStripPlacement, VerticalStripWidth, AutoPostBack, OnDemand, CssClass, OnClientActiveTabChanged etc.

TabContainer ActiveTabIndex property set the first tab to show. ScrollBars property define whether to display scrollbars in the TabContainer body. AutoPostBack property allow auto postback from the javascript when tab index changes. OnDemand property define whether to render (load) tabs on demand or all at page load. CssClass property allow us to change the look and feel of tabs. this property override the default style and design of tabs.

TabContainer ActiveTabChanged event fired on server side when a tab is changed after a postback.

TabPanel also have many built in properties such as Enabled, HeaderText, HeaderTemplate, ContentTemplate, ScrollBars, OnDemandMode, OnClientClick etc.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
        if (!Page.IsPostBack)
            Image1.ImageUrl = "~/Images/RedFlower.jpg";
            Image2.ImageUrl = "~/Images/Sky.jpg";

<html xmlns="" >
<head id="Head1" runat="server">
    <title>How to use TabContainer in ajax</title>
    <form id="form1" runat="server">
        <h2 style="color:DarkBlue; font-style:italic;">Ajax Control Toolkit Example: Using TabContainer</h2>
        <hr width="500" align="left" color="CornFlowerBlue" />
        <br /><br />
        <cc1:TabContainer ID="TabContainer1" runat="server" Width="600">
            <cc1:TabPanel ID="TabPanel1" runat="server">
                    Red Flower
                    <asp:Image ID="Image1" runat="server" />
            <cc1:TabPanel ID="TabPanel2" runat="server">
                    Color List
            <cc1:TabPanel ID="TabPanel3" runat="server">
                    Sky Image
                    <asp:Image ID="Image2" runat="server" />
Related ajax examples