In this Example Iam Going to Explain how to use Ajax Tab Container Control in asp.net
If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example HTML Tab Container example.
Demo:
 |
what is Ajax Tab container extender?
TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.
Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.
When Ever You Want to Use Ajax Controls in your website First you need Add AjaxControlToolkit reference to your application
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp"
and also You can add ToolkitScriptManager Control under <form> Tag
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1"
runat="server"></ajax:ToolkitScriptManager>
Your Aspx Page Code Should be like this :
<head runat="server">
<title>Tab Container</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<ajax:TabContainer ID="TabContainer1" runat="server">
<ajax:TabPanel ID="tbpnluser" runat="server">
<HeaderTemplate>
Registration
</HeaderTemplate>
<ContentTemplate>
<table>
<tr>
<b>Registration Form</b>
</tr>
<tr>
<td>
UserName:
</td>
<td>
<asp:TextBox ID="txtuser"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server"
TextMode="Password"> </asp:TextBox>
</td>
</tr>
<tr>
<td>
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
LastName:
</td>
<td>
<asp:TextBox ID="txtlname"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnsubmit"
runat="server"
Text="Save"
/>
</td>
</tr>
</table>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnlusrdetails" runat="server">
<HeaderTemplate>
Profile
</HeaderTemplate>
<ContentTemplate>
<table>
<tr>
<b>User Details</b>
</tr>
<tr>
<td>
UserName:
</td>
<td>
<b>Sairam VVS</b>
</td>
</tr>
<tr>
<td>
FirstName:
</td>
<td>
<b>sai</b>
</td>
</tr>
<tr>
<td>
LastName:
</td>
<td>
<b>Ram</b>
</td>
</tr>
</table>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnljobdetails" runat="server">
<HeaderTemplate>
Job Information
</HeaderTemplate>
<ContentTemplate>
<table>
<tr>
<b>Job Details</b>
</tr>
<tr>
<td>
Job Type:
</td>
<td>
<b>Software</b>
</td>
</tr>
<tr>
<td>
Industry:
</td>
<td>
<b>IT</b>
</td>
</tr>
<tr>
<td>
Designation:
</td>
<td>
<b>Software Engineer</b>
</td>
</tr>
<tr>
<td>
Company:
</td>
<td>
<b>Sterlings</b>
</td>
</tr>
</table>
:
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</div>
</form>
</body>
</html>
|
