How to create AJAX Tabcontainer Tab Panel in ASP.NET?
In this article I have explained in detail about AJAX Tab Container with multiple tab panels. For example we required lots of information from user during registration that time not able to display all textboxes one by one. So we can group it and display in tab panel.
Description:
If we use multiple tab panel in the tab container then validation must be followed as proper manner. For example I am placed submit button in second tab panel if user cannot enter text box value in the first tab panel then we need to focus first tab panel when user click submit in the second tab panel.
Client side:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 id="Head1" runat="server">
<title>AJAX Tab Panel Example with Validations</title>
<script language="javascript" type="text/javascript">
//Below function is used to change active tab
function ChangeTab(tabControl, tabNumber) {
var ctrl = $find(tabControl);
ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);
}
//Below function is used to validate all controls
function validateall() {
//First tab validate
if (Page_ClientValidate("empdet") == false) {
//Get Tabcontainer control
var ctrl = $find("TabContainer1");
//Find tab panel 1 in the tab container
var tabpanel = ctrl.get_tabs()[0];
//set active tab as validation error tab
ctrl.set_activeTab(tabpanel);
}
else {
//Second tab validate
if (Page_ClientValidate("addet") == false) {
//Get Tabcontainer control
var ctrl = $find("TabContainer1");
//Find tab panel 2 in the tab container
var tabpanel = ctrl.get_tabs()[1];
//set active tab as validation error tab
ctrl.set_activeTab(tabpanel);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td height="50">
<asp:Label ID="lblmsg" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
Visible="true" Width="600" Height="600" BackColor="#FAFDD9">
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="Employee Details">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" ></asp:PlaceHolder>
<br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="empdet"/>
<asp:RequiredFieldValidator ID="reqeno" runat="server" ErrorMessage="Enter Eno" ControlToValidate="txteno"
SetFocusOnError="true" Display="None" ValidationGroup="empdet"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="reqename" runat="server" ErrorMessage="Enter Empname"
ControlToValidate="txtfname" SetFocusOnError="true" Display="None" ValidationGroup="empdet"></asp:RequiredFieldValidator>
<table width="100%" align="center">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td height="40">
Emp No
</td>
<td>
<asp:TextBox ID="txteno" runat="server" />
</td>
</tr>
<tr>
<td height="40">
Firt Name
</td>
<td>
<asp:TextBox ID="txtfname" runat="server" />
</td>
</tr>
<tr>
<td height="40">
Last Name
</td>
<td>
<asp:TextBox ID="txtlname" runat="server" />
</td>
</tr>
<tr>
<td height="40">
Salary
</td>
<td>
<asp:TextBox ID="txtsal" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center" height="40">
<asp:Button ID="Button1" runat="server" OnClientClick="return ChangeTab('TabContainer1','1');"
Text="Next" Width="120px" CausesValidation="false" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="Address Details">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
<br />
<asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="addet"/>
<asp:RequiredFieldValidator ID="reqdoorno" runat="server"
ErrorMessage="Enter doorno" ControlToValidate="txtdoorno"
SetFocusOnError="True" Display="None" ValidationGroup="addet"></asp:RequiredFieldValidator>
<table width="100%" align="center">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td height="40">
Door No
</td>
<td>
<asp:TextBox ID="txtdoorno" runat="server" />
</td>
</tr>
<tr>
<td height="40">
Address
</td>
<td>
<asp:TextBox ID="txtadd" runat="server" TextMode="MultiLine" Columns="15" Rows="5" />
</td>
</tr>
<tr>
<td height="40">
Contact No
</td>
<td>
<asp:TextBox ID="txtPhone" runat="server" />
</td>
</tr>
<tr>
<td height="40">
Mobile No
</td>
<td>
<asp:TextBox ID="txtCellno" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center" height="40">
<asp:Button ID="Button3" runat="server" Text="Previous" OnClientClick="return ChangeTab('TabContainer1','0');" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" Width="120px"
OnClientClick="validateall();" onclick="btnSubmit_Click" />
</td>
</table>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Server side
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//If page is load first time select active tab is first one
TabContainer1.ActiveTabIndex = 0;
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Clear all text box values
txtfname.Text = "";
txtlname.Text = "";
txteno.Text = "";
txtdoorno.Text = "";
txtadd.Text = "";
txtCellno.Text = "";
txtPhone.Text = "";
txtsal.Text = "";
//write here your insert code
//Display sucess message
lblmsg.Text = "Data Insert successfully";
//Set active tab index is zero after insert data
TabContainer1.ActiveTabIndex = 0;
}
}
Output
Source Code Detail:
Here with I have attached source code of AJAX Tabcontainer with multiple tab panel example download and try to learn this concept.
Front End : ASP.NET
Conclusion:
I hope this article help to know AJAX Tabcontainer with multiple tab panel.
good one. thank you.