Using TabContainer of ajax in asp.net

The TabContainer control can contain one or more TabPanel controls that provide you with a set of tabs that show content one tab at a time.
We can specify the width & height of the panels & also we can specify wether we want scrollbars or not.
Each TabPanel has & which we can define.
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.


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 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 inside each TabPanel. You can now place controls inside the . 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 & Trickstitle>
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>


2. 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>

0 comments:

Post a Comment