TabContainer and TabPanel
TabContainer is an asp.net 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 asp.net 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.
UsingTabContainer.aspx
<%@ 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";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>How to use TabContainer in asp.net ajax</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:DarkBlue; font-style:italic;">Ajax Control Toolkit Example: Using TabContainer</h2>
<hr width="500" align="left" color="CornFlowerBlue" />
<br /><br />
<asp:ScriptManager
ID="ScriptManager1"
runat="server"
>
</asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" Width="600">
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Red Flower
</HeaderTemplate>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>
Color List
</HeaderTemplate>
<ContentTemplate>
<asp:CheckBoxList
ID="CheckBoxList1"
runat="server"
BorderColor="DeepPink"
ForeColor="Snow"
BackColor="Crimson"
BorderWidth="1"
RepeatColumns="2"
Width="500"
>
<asp:ListItem>Crimson</asp:ListItem>
<asp:ListItem>RosyBrown</asp:ListItem>
<asp:ListItem>DodgerBlue</asp:ListItem>
<asp:ListItem>Salmon</asp:ListItem>
<asp:ListItem>DeepPink</asp:ListItem>
<asp:ListItem>HotPink</asp:ListItem>
<asp:ListItem>Violet</asp:ListItem>
</asp:CheckBoxList>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server">
<HeaderTemplate>
Sky Image
</HeaderTemplate>
<ContentTemplate>
<asp:Image ID="Image2" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</div>
</form>
</body>
</html>
