Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Ajax tabcontainer Example/Sample in asp.net | Change the Style of Ajax tabContainer in asp.net

Nov 19, 2011
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 a ContentTemplate 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 AjaxControlToolkit reference 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

Demo

 Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

30 comments :

Vigneshvaran said...

Error Creating control- Script Manager1
Unknown Server tag 'ajax:ToolkitScriptmanager'.

Error Creating Control - Tab Container1
Unknown server tag 'ajax:TabContainer'.

Help Me for this error

Mail me
Vigneshvaran.p@gmail.com

Suresh Dasari said...

@vigneshvaran..
Error Creating control- Script Manager1
this problem because of your asp.net version i think your using asp.net 2.0 version for you need to replace ajax:toolkitscriptmanager with
asp:ScriptManager

Error Creating Control - Tab Container1
this problem because of missing ajaxcontrol toolkit reference in your application. In ajax:tabContainer name ajax is tagprefix name of ajaxcontrol toolkit chek firstline <%@ Register . To get this Register reference you need to install ajaxcontroltoolkit in visualstudio if you don't know how to install ajaxcontrol toolkit check this post Install AjaxControlToolki

Anonymous said...

Hi...
i want to fetch data from database to the container, can u help out in fetching data from the database to the particular container like UserDetails.
thank you.

harini said...

hello suresh,
can u help me out in fetching data from database to the particular container.
thank you.
mail me @yourname355@gmail.com

Anonymous said...

How can I call the text box value in javascript and throw an alert on onblur event of textbox

Suresh Dasari said...

check this post for textbox blur event
http://www.aspdotnet-suresh.com/2011/10/how-to-create-watermark-textbox-using.html

kishoress said...

can any one help me. I want to modify this ajax tax control to my own, like rectangular button, moves over white color, and actual button in blue color, is it possible to change in this ajax tab control.

Please help me

Anonymous said...

how to get the tab with vertical orientation and CSS styles?

Anonymous said...

thanks man... it really helped in our project
Anthony Dass

Santosh Pal said...

Hello suresh sir

when i run i am getting this error:

Error 1 It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.

Please help me for this error

Anonymous said...

Thanks..

Anonymous said...

I used javascript validation but its not work if I used tab container.so just check it

Anonymous said...

Excellent work

Kalim.Paracha said...
This comment has been removed by the author.
Anonymous said...

hello....sir how should i store data from tab control...like u gave a registration form when i click on save button the data should save in data base that how can i do....

santosh chhotaray said...

Hi Sir
Actually I have 6 tabs about employee details and i want to fetch all the data from data base and
want to display all the data in respective tabs. I have empdetails tab,familydetails tab,contact details tab,emloyement tab etc like this. So how to write the code for that. Please mail me on hellosantoshchhotaray@gmail.com

Narendran said...

Hi Sir,

I wish to change the tab header background dynamically

by clicking the button placed in the previous tab

For that I tried the code as given below for Hyperlink tag
HtmlLink lnk = new HtmlLink();
lnk.Attributes.Add("rel", "stylesheet");
lnk.Attributes.Add("type", "text/css");
lnk.Href = "../App_Themes/Css/pnl.css";
Page.Header.Controls.Add(lnk);

Code used for Tab Control
AjaxControlToolkit.TabPanel tabpnl = new AjaxControlToolkit.TabPanel();
tabpnl.Attributes.Add("rel", "stylesheet");
tabpnl.Attributes.Add("type", "text/css");
tabpnl.Href = "../App_Themes/Css/pnl.css"; // not working (showing error)
Page.Header.Controls.Add(tabpnl);*/


Please do the needful.

And CSS I used for the tab container is :

.MyTabStyle .ajax__tab_header
{
font-size: 14px;
font-weight:100;
border-bottom:solid 4px #0399d4;

}
.MyTabStyle .ajax__tab_header .ajax__tab_outer
{
padding-left: 8px;
padding-right: 8px;
margin-right: 3px;
}

.MyTabStyle .ajax__tab_header
{
color: #fff;
padding: 3px 10px 2px 0px;
}
.MyTabStyle .ajax__tab_hover .ajax__tab_outer
{
background: #0399d4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0399d4', endColorstr='#0399d4');
background: -webkit-gradient(linear, left top, left bottom, from(#0399d4), to(#0399d4));
background: -moz-linear-gradient(top, #0399d4, #0399d4);
color:#fff;
border:solid 1px #0399d4;
-moz-border-radius:4em 1em 4em 1em;
-webkit-border-radius: 4em 4em 1em 1em;
border-radius: 4em 1em 4em 4em #fff;
font-size: 14px;
}
.MyTabStyle .ajax__tab_hover
{
color: #fff;
}
.MyTabStyle .ajax__tab_active
{

background: #0399d4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0399d4', endColorstr='#0399d4');
background: -webkit-gradient(linear, left top, left bottom, from(#0399d4), to(#0399d4));
background: -moz-linear-gradient(top, #0399d4, #0399d4);
border:solid 1px #0399d4;
-moz-border-radius:4em 1em 4em 1em;
-webkit-border-radius: 4em 4em 1em 1em;
border-radius: 4em 1em 4em 4em #fff;
font-size: 14px;
border-bottom:solid 4px #0399d4;
}

.MyTabStyle .ajax__tab_body
{
border-top-width: 0;
border: solid 1px #0399d4;
-moz-border-radius:4em 3em 4em 3em;
-webkit-border-radius:1px 1px 1em 1em;
border-radius: 4em 4em 4em 4em #fff;
}




Thanks in advance,

Narendran N

Narendran said...

Hi Sir,

And I found the solution for disable the tabpanel refer, http://forums.asp.net/post/5337889.aspx

But I got a new problem, I want to find the disabled tabpanel, so that only I can do the style stuff for that disabled panel, to do that I need a solution for the above comment.

Thanks in advance,
Narendran N

Anonymous said...

when click on submit using ajax tab container no operation can be perform

Anonymous said...

Helo sir,

i m facing problem with css class.i tried so many style for the tabcontainer but no result...i dont know the solution.
i have also used css class but still facing same problem..
i need solution for this.
Thanks in advance.
Aysa

yokesh vimalachandiran said...

Hello sir,

I want to make tabcontainer visible and invisible while clicking the button.. i tried a lot by using the properties 'activetabindex' and 'visible'.. but i cant.. is there any solution to solve this issue ???

harry said...

great work suress..u r a rockestar!!

Anonymous said...

Hello sir,
Actually I have 4 tabs about question answer and i want to save all the four answer for one question from data base.
Please mail me on
rakesh.patil299@gmail.com

Anonymous said...

fgtryhgfhghhhhhhhhhhhhhhhhhh
hjjjjjh

siddharth sawant said...

My error is unknown server tag ajax:ToolkitScriptManager what I want to do now... ?

RAJNISH TIWARI said...

Hello button click event is not working .Please help me out..

Anonymous said...

Submit button is not working.why?

ALI RAJA JAMALUDDIN HEMANI said...

hi Suresh,
I just wanted to know about is there any event by which i can clear all the field data on tab change I actually have 4 tabs, which have several textfields when i enter some data in the field i dont want it to be displayed when i change the tab.
Thanks in Advance .
Ali Raja

Anonymous said...

HI Suresh,

Good Work!
Hos its possible to change color from green to gray in the header content? Do u have similar Gifs in gray or any other format?

Penchal Das said...

Hi Suresh,

Great work..!!!

Thanks,
Das

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.