How to Use TabContainer Control on ASP.NET Website

On By
Introduction :- The TabContainer control provides multiple views in web page. Microsoft  has released new products, such as window 7c , Internet Explorer, Microsoft Office 2007/2010 ,with tabbed version. This version is released for graphics purpose only. The TabContainer Control enables you to create a tabbed interface,where clicking each tab displays different contents.Switching from one tab to other does not need a postback. If you are not install AjaxToolKit then first install it from Here .
There are some properties of TabContainer control as given below:-
  • ActiveTabChanged :- It sets an event that is fired on the server-side when a tab is changed after a postback.
  • OnClientActiveTabChanged:- It attaches a JavaScript function to the client-side tab-changed event.
  • ActiveTabIndex :- It sets the tab index that remains visible when the page renders for the first time.
  • CssClass : - It sets the CSS class to define custom look fr tabs.It overrides the already defined custom look settings.
  • ScrollBars:- It determines whether or not the scrollbars should be displayed.-
  • Hieght :- It sets the height of the body of tabs.
  • Width :- It sets the width of the body of tabs.
The TabContainer control is a collection of the TabPanel control represents an individual tab within the web page. It is similar to AccordionPane control. The TabPanel control has a HeaderTemplate template for the tab and a ContentTemplate for the body.We can add a JavaScript to  be attached  to the tab using  the OnClientClick Property. The click even is fired when the user clicks the tabs.
There are some important properties of TabPanel Control as given below:-
  • HeaderText :- It sets the text to display in the tab.
  • HeaderTemplate :- It sets a template that is used to render the tab header.
  • ContentTemplate :- It sets a template that is used to render  the tab body.
  • OnClientClick :- It Attaches a JavaScript function to the client-side click event of the tab.
  • Enabled :- It determines whether or not the tab should be displayed by default.
The are some steps to implement this whole concepts on your visual studio as given below:-
Step 1 :- First open your visual studio --> File --> New -->Website --> Select ASP.NET Empty Website ---> OK --> Open Solution Explorer --> Add a New Web form (Default.aspx) --> Drag and Drop ToolKitScript Manager on the page.
webform

Step 2 :- Now Open Source File --> Drag and Drop TabContainer control --> Inside TabContainer  Add TabPanel control  as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TabContainer ID="TabContainer1" runat="server">
        <asp:TabPanel runat="server" ID="TabPanel1" HeaderText="Learn More">
  <ContentTemplate>
          <p>
  <p>
This Website (http://www.msdotnet.co.in) is provide simple and point to point tutorials on .Net Technology.
This is helpful for learners and developers.The students who are very weak in language,they can refer rhis website.
They can learn lots of technology without any money waste.Please give your views about this website.    
  </p>
  There are some technology of .NET as given below:
  <ul>
   <li>C# and F#</li>
   <li>ASP.NET</li>
   <li>MVC</li>
   <li>WPF</li>
   <li>ADO.NET</li>
   <li>SQL SERVER</li>
   <li>LINQ</li>
   <li>XML</li>
  </ul>
  </p>
        </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel runat="server" ID="TabPanel2" HeaderText="Go Following">
  <ContentTemplate>
  <ul>
   <a href=""><li>Learn C# Language</li></a>
   <a href=""><li>Learn ASP.NET Technology</li></a>
   <a href=""><li>Learn SQL Server</li></a>
   <a href=""><li> Learn MVC Technology</li></a>
   <a href=""><li>Learn WPF Technology</li></a>
            <a href=""><li>Learn AJAX Technology</li></a>
  </ul>
  </ContentTemplate>
  </asp:TabPanel>
         <asp:TabPanel runat="server" ID="TabPanel3" HeaderText="Login">
  <ContentTemplate>
   <div style="background-color:Silver">
            &nbsp;User Name&nbsp;
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br/>
                &nbsp;Password&nbsp;
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                <asp:Button ID="Button1" runat="server" Text="Login" />
   </div> 
  </ContentTemplate>
  </asp:TabPanel>
        </asp:TabContainer>
    </div>
    </form>
</body>
</html>
Step 3 :- Now Run the Application (press F5) --> You will see following output as given below:-
output

 For More...
Download Whole Attached File
           Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.