Ajax tabcontainer Example/Sample in asp.net | Change the Style of Ajax tabContainer in asp.net - ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview

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

By: Suresh Dasari 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

<title>Ajax Tab Container</title>

</head>

<body>

<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">

</ajax:ToolkitScriptManager>

<ajax:TabContainer ID="TabContainer1" runat="server">

<ajax:TabPanel ID="tbpnluser" runat="server" >

New User

</HeaderTemplate>

<asp:Panel ID="UserReg" runat="server">

<tr>

</td>

<b>Registration Form</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Password:

</td>

<td>

<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Location:

</td>

<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >

User Details

</HeaderTemplate>

<asp:Panel ID="Panel1" runat="server">

<tr>

</td>

<td>

<b>User Details</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<b>Suresh Dasari</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Suresh</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Dasari</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>sureshbabudasari@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnljobdetails" runat="server" >

Job Details

</HeaderTemplate>

<asp:Panel ID="Panel2" runat="server">

<tr>

</td>

<td>

<b>Job Details</b>

</td>

</tr>

<tr>

Job Type:

</td>

<td>

<b>Software</b>

</td>

</tr>

<tr>

Industry:

</td>

<td>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<b>Software Engineer</b>

</td>

</tr>

<tr>

Company:

</td>

<td>

<b>aspdotnet-suresh</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<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

<title>Ajax Tab Container</title>

.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>

<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">

</ajax:ToolkitScriptManager>

<ajax:TabContainer ID="TabContainer1" runat="server" CssClass="fancy fancy-green">

<ajax:TabPanel ID="tbpnluser" runat="server" >

New User

</HeaderTemplate>

<asp:Panel ID="UserReg" runat="server">

<tr>

</td>

<b>Registration Form</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Password:

</td>

<td>

<asp:TextBox ID="txtpwd" runat="server" TextMode="Password"></asp:TextBox>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Location:

</td>

<asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnlusrdetails" runat="server" >

User Details

</HeaderTemplate>

<asp:Panel ID="Panel1" runat="server">

<tr>

</td>

<td>

<b>User Details</b>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<b>Suresh Dasari</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Suresh</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Dasari</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>sureshbabudasari@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Hyderabad</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

<ajax:TabPanel ID="tbpnljobdetails" runat="server" >

Job Details

</HeaderTemplate>

<asp:Panel ID="Panel2" runat="server">

<tr>

</td>

<td>

<b>Job Details</b>

</td>

</tr>

<tr>

Job Type:

</td>

<td>

<b>Software</b>

</td>

</tr>

<tr>

Industry:

</td>

<td>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<b>Software Engineer</b>

</td>

</tr>

<tr>

Company:

</td>

<td>

<b>aspdotnet-suresh</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<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 Email

36 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; January 7, 2012 at 6:24 PM
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; January 7, 2012 at 6:37 PM
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.; February 29, 2012 at 2:32 AM
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; February 29, 2012 at 8:24 PM
Anonymous said...: How can I call the text box value in javascript and throw an alert on onblur event of textbox; May 4, 2012 at 5:36 AM
Suresh Dasari said...: check this post for textbox blur event
http://www.aspdotnet-suresh.com/2011/10/how-to-create-watermark-textbox-using.html; May 4, 2012 at 6:10 AM
Anonymous 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; July 10, 2012 at 11:08 PM
Anonymous said...: how to get the tab with vertical orientation and CSS styles?; July 16, 2012 at 2:01 AM
Anonymous said...: thanks man... it really helped in our project
Anthony Dass; July 17, 2012 at 9:04 PM
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; September 21, 2012 at 7:41 AM
Anonymous said...: Thanks..; December 4, 2012 at 10:10 PM
Anonymous said...: I used javascript validation but its not work if I used tab container.so just check it; December 21, 2012 at 1:51 AM
Anonymous said...: Excellent work; December 22, 2012 at 11:32 PM
Kalim.Paracha said...: This comment has been removed by the author.; January 24, 2013 at 10:24 AM
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....; March 11, 2013 at 5:15 AM
Unknown 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; March 19, 2013 at 5:16 AM
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; March 20, 2013 at 12:43 AM
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; March 20, 2013 at 1:47 AM
Anonymous said...: when click on submit using ajax tab container no operation can be perform; March 29, 2013 at 12:30 AM
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; March 29, 2013 at 3:55 AM
Unknown 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 ???; April 11, 2013 at 3:12 AM
harry said...: great work suress..u r a rockestar!!; July 16, 2013 at 6:21 AM
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; September 5, 2013 at 1:55 AM
Anonymous said...: fgtryhgfhghhhhhhhhhhhhhhhhhh
hjjjjjh; September 13, 2013 at 12:47 AM
Siddharth said...: My error is unknown server tag ajax:ToolkitScriptManager what I want to do now... ?; September 30, 2013 at 2:37 AM
Unknown said...: Hello button click event is not working .Please help me out..; October 1, 2013 at 4:02 AM
Anonymous said...: Submit button is not working.why?; November 14, 2013 at 2:03 AM
ALI RAJA 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; December 30, 2013 at 9:13 AM
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?; May 21, 2014 at 3:55 AM
Unknown said...: Hi Suresh,

Great work..!!!

Thanks,
Das; June 6, 2014 at 6:10 AM
Anonymous said...: Hi,
Good work!
Thanks; December 6, 2014 at 11:43 PM
Unknown said...: Always getting runat server error; February 5, 2015 at 11:08 PM
Unknown said...: i an not able to download this code, help me with this.; February 12, 2016 at 3:32 AM
Anonymous said...: i am not able to download this code, help me with this.; February 16, 2016 at 1:57 AM
Orbit Infotech said...: hii

I want to download this but not able to download .I just want the GIF Images which are used in this.; April 4, 2016 at 9:50 PM
Anonymous said...: Hi suresh,
everything is working fine. issue only is ajaxtab panel not showing in mac box safari browser. please help me for resolve this issue; October 5, 2017 at 12:34 AM