Sunday, October 9, 2011
ASP.NET AJAX TabContainer – Tips and Tricks
An ASP.NET AJAX TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. You can place your controls inside each TabPanel. In this article, we will explore some common tips and tricks with the ASP.NET AJAX TabContainer control.
I assume you have some basic experience developing ASP.NET AJAX applications and have installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
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>
</head>
And add a button like the one shown below in each tab
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<input id="Button1" type="button" value="Next" onclick="MoveTab(1)" />
</ContentTemplate>
</cc1:TabPanel>
Tip 6: How to add a Scrollbar to an ASP.NET AJAX TabContainer
If you want to automatically add a scrollbar, if the control inside a TabPanel (kept in a ASP.NET AJAX TabContainer), is greater than the width of the TabPanel, then just add a ‘Panel’ control (<asp:Panel>) inside the Tab, set the ScrollBars="Vertical" property and drop the control inside the ‘Panel’.
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
<asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical">
<asp:TextBox ID="TextBox1" runat="server" Width="300px" Height="30px"></asp:TextBox><br />
</asp:Panel>
</ContentTemplate>
</cc1:TabPanel>
Here we have set the Width of the <TabContainer> to 200px and set the Width of the TextBox to 300px, which brings up the ScrollBar.
Tip 7: How to load the TabPanels on demand
There is an excellent post by Matt Berseth over here
Tip 8: How to add an image in the Header of each TabPanel in an ASP.NET AJAX TabContainer
Use <HeaderTemplate>.
You can then add an image as shown below:
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
<img src="search.jpg" alt="Tab1"/>
</HeaderTemplate>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
</ContentTemplate>
</cc1:TabPanel>
Well those were some tips associated with the AJAX TabContainer. As future versions of the AJAX toolkit are released, we should be hopeful that there will exist easier ways, of achieving 'some' of the functionality discussed in this article. I hope this article was useful and I thank you for viewing it.
