Tip 1: How to Create a ASP.NET AJAX TabContainer with Tab Panels
Assuming you have AJAX Control Toolkit for 3.5 installed, Open Visual Studio 2008 > File > New Website > ‘ASP.NET WebSite' > Enter a name and location for the project > Click Ok.
Drag and drop a <ScriptManager> from the Toolbox to the page. Now drag and drop a TabContainer to the page and using the smart tag, add a few tabpanels. Switch to the source view and add <ContentTemplates> inside each TabPanel. You can now place controls inside the <ContentTemplates>. The code will look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tab Container Tips & Tricks</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<asp:Button ID="Button2" runat="server" Text="Button" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
<asp:Button ID="Button3" runat="server" Text="Button" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
<br />
</div>
</form>
</body>
</html>
Tip 2: How to loop through all the controls in an ASP.NET AJAX TabContainer
In Tip 1, we had kept some textboxes and buttons in the TabPanels. Now if you want to loop through the entire TabContainer and fetch the values of these textboxes, use the code demonstrated below.
C#
protected void btnLoop_Click(object sender, EventArgs e)
{
AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
foreach (object obj in container.Controls)
{
if (obj is AjaxControlToolkit.TabPanel)
{
AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
foreach (object ctrl in tabPanel.Controls)
{
if (ctrl is Control)
{
Control c = (Control)ctrl;
foreach (object innerCtrl in c.Controls)
{
if (innerCtrl is System.Web.UI.WebControls.TextBox)
Response.Write(((TextBox)innerCtrl).Text);
}
}
}
}
}
}
VB.NET
Protected Sub btnLoop_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim container As AjaxControlToolkit.TabContainer = CType(TabContainer1, AjaxControlToolkit.TabContainer)
For Each obj As Object In container.Controls
If TypeOf obj Is AjaxControlToolkit.TabPanel Then
Dim tabPanel As AjaxControlToolkit.TabPanel = CType(obj, AjaxControlToolkit.TabPanel)
For Each ctrl As Object In tabPanel.Controls
If TypeOf ctrl Is Control Then
Dim c As Control = CType(ctrl, Control)
For Each innerCtrl As Object In c.Controls
If TypeOf innerCtrl Is System.Web.UI.WebControls.TextBox Then
Response.Write((CType(innerCtrl, TextBox)).Text)
End If
Next innerCtrl
End If
Next ctrl
End If
Next obj
End Sub
Similarly, you can use this logic to access any other control kept in the TabContainer.
Tip 3: How to change the back color of an ASP.NET AJAX TabContainer/ TabPanel or How to Style an ASP.NET AJAX TabContainer
If you have tried using the BackColor property of the TabContainer, it does not work. Instead what you need to do is use CSS to change the style of the TabContainer. For example to change the Font, ForeColor and BackColor, declare the following CSS in your <head> element
<head runat="server">
<title>Tab Container Tips & Tricks</title>
<style type="text/css">
.BackColorTab
{
font-family:Verdana, Arial, Courier New;
font-size: 10px;
color:Gray;
background-color:Silver;
}
</style>
</head>
And then use this CSS in your TabContainer in the following way:
<cc1:TabContainer ID="TabContainer1" CssClass="BackColorTab" runat="server" ActiveTabIndex="2">
...
</cc1:TabContainer>
If you want to know more about styling the TabContainer, I would recommend reading this blog over here
Tip 4: How to align a TabHeader to the center in an ASP.NET AJAX TabContainer
Use CSS.
<head runat="server">
<title>Tab Container Tips & Tricks</title>
<style type="text/css">
.TabHeaderCSS
{
font-family:Verdana, Arial, Courier New;
font-size: 10px;
background-color: Silver;
text-align: center;
cursor: pointer
}
</style>
</head>
<cc1:TabContainer ID="TabContainer1" CssClass="TabHeaderCSS" runat="server" ActiveTabIndex="2">
...
</cc1:TabContainer>
Tip 5: How to navigate through tabs using buttons in an ASP.NET AJAX TabContainer
Let us say that you want to build in a navigation system inside the TabContainer. So there are buttons on each tab and you want to move to the next tab when you click on these buttons. There are two ways you can do this:
Method 1: Use the ‘ActiveTab' property of the TabContainer
C#
protected void Button1_Click(object sender, EventArgs e)
{
// Move to Tab 2
TabContainer1.ActiveTab = TabContainer1.Tabs[1];
}
VB.NET
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
' Move to Tab 2
TabContainer1.ActiveTab = TabContainer1.Tabs(1)
End Sub
However this method would cause a postback if the button is not wrapped in an UpdatePanel. If you want to avoid a postback, use Method 2.
Method 2: Replace the <asp:Button> with HTML Buttons and you can then move to the next tab with a little bit of javascript.
<head runat="server">
<title>Tab Container Tips & Tricks</title>
<script type="text/javascript">
function MoveTab(num)
{
var container = $find('TabContainer1');
container.set_activeTabIndex(num);
}
</script>
Thanks