zoukankan      html  css  js  c++  java
  • Ajax tabcontainer Example/Sample in asp.net | Change the Style of Ajax tabContainer in asp.net

    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=" 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=" 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
     
  • 相关阅读:
    初解DLL基本知识
    读《暗时间》笔记
    红队 Cobalt Strike 安全加固
    《天书夜读 —— 从汇编语言到Windows内核编程》3.3 汇编反C语言练习 参考答案
    记录一次从WordPress后台到拿下主机shell的渗透
    今日记 2019.6.19
    解决Termux无法通过metasploit.sh安装Metasploit的问题
    解决ajax中文乱码问题
    jsp开发知识
    第一个Java web项目:员工管理系统
  • 原文地址:https://www.cnblogs.com/happy-Chen/p/3640463.html
Copyright © 2011-2022 走看看