DOTNET POINT: Change the style of ajax TabContainer in asp.net

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

DOTNET POINT

Wednesday 22 February 2012

Change the style of ajax TabContainer in asp.net

No comments:

Post a Comment