DotNet-Jitendra(Asp.Net, C#, Sql Server, Linq, Ajax, Javascript, jQuery, Xml, MVC)

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.

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.

Designer Page :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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>Jitendra gangwar</b>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<b>Jitendra</b>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<b>Gangwar</b>

</td>

</tr>

<tr>

Email:

</td>

<td>

<b>gangwar.jitendra007@gmail.com</b>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Delhi</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>

</td>

</tr>

<tr>

Phone No:

</td>

<td>

</td>

</tr>

<tr>

Location:

</td>

<b>Delhi</b>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

</div>

</form>

</body>

</html>

Download Here

DotNet-Jitendra(Asp.Net, C#, Sql Server, Linq, Ajax, Javascript, jQuery, Xml, MVC)

Menu

Saturday 9 November 2013

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