Change the style of ajax TabContainer in asp.net

By: Suresh Dasari Mar 28, 2011

Introduction:

Here I will explain how to show the use Ajax Tab container in asp.net effectively and how to change appearance of TabContainer by applying CSS styles in asp.net.

Description:

I have one web page that page contains lot of information about user that contains user profile details, job details and new user registration details because of that huge controls and data on webpage I face problem to maintain the webpage effectively. At that time I decided to use Ajax Tab container by using this container we can 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 nothing is there just design only the page contains 3 TabPanels that's why code is more for looking 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

7 comments :

Anonymous said...: excellent work..keep posing latest technology articles..; August 12, 2011 at 6:36 AM
Anonymous said...: How to perform an onclick event in the button which is present in the tab container?; March 27, 2012 at 9:21 PM
Unknown said...: hi suresh how are you
the article is helping alot in my project.suresh ive one doubt in this control ive keep one gridview in this control im not seeing the gridview columns when records is not available in my datasource,if records are availabe in my data source ive seen gridview columns and records.

thanks&regards
hareesh.a; May 7, 2012 at 3:30 AM
Unknown said...: Hi suresh

I need one information. any is other way to load only content instead of master page concept? it should change only content page. rest of the things should load only once. i dont want to use master page concept? do u have any idea?? please tell me if so.; February 14, 2013 at 11:25 PM
Unknown said...: Excellent tab; May 10, 2017 at 11:58 PM
Rushikesh said...: Excellent Tab Nice Trick; July 29, 2017 at 12:12 AM
SABPERP said...: Nice css for ajax tab control need other color button.; January 21, 2018 at 11:01 AM