Ajax Tab Container Extender in ASP.Net

Shaili Dashora
9y
117.1k
0
0

Article

The TabContainer is an AJAX Control to create a set of Tabs to organize the contents of an ASP.Net page. It is uesd to host a number of TabPanels in which we use a Text Header or HeaderTemplate as well as a ContentTemplate that defines its content.

Now we will see an example of an Ajax Tab Container extender in ASP.NET.

Step 1

First we will create a new project that is an ASP.NET WebApplication named AjaxTabContainer.

Now add one WebForm to this project named TabContainer.aspx.

Step 2

We will now open the Toolbox then select the Ajax Pane and drag ToolkitScriptManager to the div tag inside the WebForm.

Step 3

We will now select a TabContainer control from the ajax controls pane and add it after the ToolKitScriptManager.

Step 4

Now open the properties of the Tabcontainer and click the Add Tab Panels option.

It will create a new Tab Panels in our TabContainer control, here we will create two Tab Panels.

Now the source code will look like this.

For using Ajax Controls first we need to add an AjaxControlToolkit reference to our application.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

We can use a TagPrefix also, for example:

tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp"

Step 5

Now we will change the HeaderText in the TabPanels using the following code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabContainer.aspx.cs" Inherits="AjaxTabContainer.TabContainer" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" Height="40px" Width="241px">
<asp:TabPanel runat="server" HeaderText="Login Form" ID="TabPanel1">
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Registration Form">
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>

It will look like this in the design view.

Now run the application and see the output.

Step 6

Now we want to design something in these Tab Panels. We will select the Tab Panel in source view then we will write <contentTamplate> </contentTamplate> tag.

Here for example we will design the Login page in the first panel using the following code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabContainer.aspx.cs" Inherits="AjaxTabContainer.TabContainer" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="165px" Width="350px">
<asp:TabPanel runat="server" HeaderText="Login Form" ID="TabPanel1">
<ContentTemplate>
<asp:Label ID="lbllogin" runat="server" Text="Login Here" "True" "True" "True" ForeColor="#660033"></asp:Label>
<table style="width: 100%;" border:"1">
<tr>
<td><asp:Label ID="lbluname" runat="server" Text="UserName" "True" ForeColor="#000099"></asp:Label> </td>
<td><asp:TextBox ID="tbuname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblpass" runat="server" Text="Password" "True" ForeColor="#000099"></asp:Label> </td>
<td><asp:TextBox ID="tbpass" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit" BackColor="#00CCFF" ForeColor="Blue" /></td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Registration Form">
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>

Now it looks like this in design view.

Now we will run the project and see the output for the Login form panel.

Step 7: Now for the second panel we will design the Registration page with the following code.

The following is the complete code for the Login and Registration Forms.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabContainer.aspx.cs" Inherits="AjaxTabContainer.TabContainer" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" Height="229px" Width="353px">
<asp:TabPanel runat="server" HeaderText="Login Form" ID="TabPanel1">
<ContentTemplate>
<asp:Label ID="lbllogin" runat="server" Text="Login Here" "True" "True" "True" ForeColor="#660033"></asp:Label>
<table style="width: 100%;" border:"1">
<tr>
<td><asp:Label ID="lbluname" runat="server" Text="UserName" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbuname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblpass" runat="server" Text="Password" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbpass" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit" BackColor="#0099FF" "True" ForeColor="#000099" Height="27px" /></td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Registration Form">
<ContentTemplate>
<asp:Label ID="lblRegistration" runat="server" Text="Registration Here" "True" "True" "True" ForeColor="#660033"></asp:Label>
<table style="width: 100%;" border:"1">
<tr>
<td><asp:Label ID="lblUserName" runat="server" Text="UserName" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbUserName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblPassword" runat="server" Text="Password" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbPassword" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblFname" runat="server" Text="FirstName" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbFname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblLastName" runat="server" Text="LastName" "True" ForeColor="#000099"></asp:Label></td>
<td><asp:TextBox ID="tbLastName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td> </td>
<td><asp:Button ID="btnsave" runat="server" Text="Save" BackColor="#0099FF" "True" ForeColor="#000099" Height="27px"/></td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</div>
</form>
</body>
</html>

Now it is look like this in design view.

Now we will run the project and see the output for the Registration form panel.

Step 8: Now we will set some properties like AutoPostBack and BorderColor for the Tab Container.

The AutoPostBack is used when a tab is changed after a postback, we will get the same tab after postback.

It is all about how to use an Ajax Tab Container extender in ASP.NET.

Now we can provide some functionality for the submit button to collect all the information and bind it to a database.

Up Next

Ebook Download

View all

Top Azure PaaS Q & A

Read by 0 people

Download Now!

Learn

View all