RSS
Facebook
Twitter

Wednesday 2 January 2013


Ajax tab container Example/Sample in asp.net | Change the Style of Ajax tab Container in asp.net
Introduction: 

Here I will explain how to use Ajax Tabcontainer in asp.net and how to change the appearance of TabContainer using CSS styles in asp.net.

Description:


I have one web page that page contains lot of information about user like user profile details, job details and new user registration details because of that huge controls and data I was unable to maintain the webpage effectively. 

At that time I decided to use Ajax Tabcontainer to use web page space effectively. Tab container contains set of tabs that can be used to organize the page content. Tab Container is a host for number of TabPanels. Each TabPanel defines its HeaderText or HeaderTemplate as well as aContentTemplate that defines its content. 

One more thing don't hesitate to learn the post completely after seen the length of the post because it's huge for looking but nothing is there just design only the page contains 3 TabPanels that's why code is more and it's very easy to work with TabContainer 
Now we can see how we can use ajax tab container in our application First add AjaxControlToolkitreference to your application and add 

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Tab Container</title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div style=" width:40%">
<ajax:TabContainer ID="TabContainer1" runat="server">
<ajax:TabPanel ID="tbpnluser" runat="server" >
<HeaderTemplate>
New User
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="UserReg" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right" >
</td>
<td align="center">
<b>Registration Form</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="left" ><asp:Button ID="btnsubmit" runat="server" Text="Save"/>
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >
<HeaderTemplate>
User Details
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<table align="center">
<tr>
<td align="right" colspan="2" >
</td>
<td>
<b>User Details</b>
</td>
</tr>
<tr>

<td align="right" colspan="2">
UserName:
</td>
<td>
<b>Suresh Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
FirstName:
</td>
<td>
<b>Suresh</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
LastName:
</td>
<td>
<b>Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Email:
</td>
<td>
<b>sureshbabudasari@gmail.com</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnljobdetails" runat="server" >
<HeaderTemplate>
Job Details
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right" >
</td>
<td>
<b>Job Details</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Job Type:
</td>
<td>
<b>Software</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Industry:
</td>
<td>
<b>IT</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Designation:
</td>
<td>
<b>Software Engineer</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Company:
</td>
<td>
<b>aspdotnet-suresh</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</div>
</form>
</body>
</html>
After completion of our page design run application and see the output that should be like this
This is normal tab container we can change the appearance of tab container by using CSSClass properties. Here I will explain list of available CSS classes for Tab. 

.ajax__tab_header: By using this CSS class we can set the style for header of tab.

.ajax__tab_outer: This CSS class is used to set the left-side background image of the tab.

.ajax__tab_inner: This CSS class is used to set the right-side image of the tab. 

.ajax__tab_tab: An element of the tab that contains the text content.

.ajax__tab_body: This CSS class is used to apply style for container of TabPanel. 

ajax__tab_hover . This is CSS class is used to apply style for a tab when the mouse is hovering over. 

.ajax__tab_active: This CSS class is used to apply style for currently selected tab. 

Here we need to use all the CSSclasses like this format .fancy-green .ajax__tab_header

If we declare the CSS class like this we can assign CssClass="fancy-green" to Tabcontainer automatically all the css classes applied for tab container.

Now again here I am designing the ajaxtab container with CSS class check the code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Tab Container</title>
<style type="text/css">
.fancy-green .ajax__tab_header
{
background: url(green_bg_Tab.gif) repeat-x;
cursor:pointer;
}
.fancy-green .ajax__tab_hover .ajax__tab_outer, .fancy-green .ajax__tab_active .ajax__tab_outer
{
background: url(green_left_Tab.gif) no-repeat left top;
}
.fancy-green .ajax__tab_hover .ajax__tab_inner, .fancy-green .ajax__tab_active .ajax__tab_inner
{
background: url(green_right_Tab.gif) no-repeat right top;
}
.fancy .ajax__tab_header
{
font-size: 13px;
font-weight: bold;
color: #000;
font-family: sans-serif;
}
.fancy .ajax__tab_active .ajax__tab_outer, .fancy .ajax__tab_header .ajax__tab_outer, .fancy
.ajax__tab_hover.ajax__tab_outer
{
height: 46px;
}
.fancy .ajax__tab_active .ajax__tab_inner, .fancy .ajax__tab_header .ajax__tab_inner, .fancy
.ajax__tab_hover .ajax__tab_inner
{
height: 46px;
margin-left: 16px; /* offset the width of the left image */
}
.fancy .ajax__tab_active .ajax__tab_tab, .fancy .ajax__tab_hover .ajax__tab_tab, .fancy
.ajax__tab_header .ajax__tab_tab
{
margin: 16px 16px 0px 0px;
}
.fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_active .ajax__tab_tab
{
color: #fff;
}
.fancy .ajax__tab_body
{
font-family: Arial;
font-size: 10pt;
border-top: 0;
border:1px solid #999999;
padding: 8px;
background-color: #ffffff;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div style=" width:40%">
<ajax:TabContainer ID="TabContainer1" runat="server" CssClass="fancy fancy-green">
<ajax:TabPanel ID="tbpnluser" runat="server" >
<HeaderTemplate>
New User
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="UserReg" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right" >
</td>
<td align="center">
<b>Registration Form</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
UserName:
</td>
<td>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Password:
</td>
<td>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td align="left" ><asp:Button ID="btnsubmit" runat="server" Text="Save"/>
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >
<HeaderTemplate>
User Details
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<table align="center">
<tr>
<td align="right" colspan="2" >
</td>
<td>
<b>User Details</b>
</td>
</tr>
<tr>

<td align="right" colspan="2">
UserName:
</td>
<td>
<b>Suresh Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
FirstName:
</td>
<td>
<b>Suresh</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
LastName:
</td>
<td>
<b>Dasari</b>
</td>
</tr>
<tr>
<td align="right" colspan="2">
Email:
</td>
<td>
<b>sureshbabudasari@gmail.com</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td align="right" colspan="2" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tbpnljobdetails" runat="server" >
<HeaderTemplate>
Job Details
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server">
<table align="center">
<tr>
<td></td>
<td align="right" >
</td>
<td>
<b>Job Details</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Job Type:
</td>
<td>
<b>Software</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Industry:
</td>
<td>
<b>IT</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Designation:
</td>
<td>
<b>Software Engineer</b>
</td>
</tr>
<tr>
<td></td>
<td align="right">
Company:
</td>
<td>
<b>aspdotnet-suresh</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Phone No:
</td>
<td>
<b>1234567890</b>
</td>
</tr>
<tr>
<td></td>
<td align="right" >
Location:
</td>
<td align="left">
<b>Hyderabad</b>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</div>
</form>
</body>
</html>
Aftercompletion this page check the tab how it look like it’s looking very nice
A Very Very Thank's to Mr. Suresh Dasari sir.................................

3 comments: