Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use AJAX TabContainer Control in ASP.NET

Author: Jeff Nava
Download Source Code : 1338_TabContainer.zip

In this article, we will see how we can use AJAX TabContainer Control in ASP.NET.

 

TabContainer control in AJAX ToolKit provides tabs to use page space efficiently. It is used to create a set of tabs to place and organize content in every tab. TabContainer is very simple and easy to use control that provides tab facility using AJAX functionality.
 
You can add multiple tabs in a TabContainer control and can use the HeaderTemplate property to define the text on every tab. ContentTemplate property is used to add other controls and show data in every tab. You have to add a TabPanel control for every tab. You can retrieve information from controls in the tab and display data in the tabs. You can show tab header at the top, bottom, right or left by using TabContainer layout properties.
 
Tab Css classes are provided with TabContainer control to set the look and feel.
 
.ajax__tab_header
.ajax__tab_hover
.ajax__tab_outer
.ajax__tab_inner
.ajax__tab_body
.ajax__tab_active
.ajax__tab_tab
 

You have to download AJAX Control Toolkit and include it in your Visual Studio Toolbox to use TabContainer control.

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > Add New Item > Web Form
  5. Open Toolbox > Right Click > Add Tab
  6. Name the Tab As “AJAX Control Toolkit”
  7. Click on Tab > Choose Items
  8. Browse the “AjaxControlToolkit.dll” > Click Ok
  9. I have downloaded and extracted AJAX Control Toolkit in “Ajax” folder in “C” Drive so my path to the file is “C:\Ajax\ AjaxControlToolkit.dll”
  10. Open web form and add a ScriptManager control from “AJAX Extensions” tab. 

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
     
    ScriptManager control is necessary when you are using Ajax functionality in your web site.

     
  11. Add a TabContainer control “AJAX Control Toolkit” tab and write code below in it

    <Ajax:TabContainer ID="TabContainer1" runat="server">
            <Ajax:TabPanel ID="TabPanel1" runat="server">
            <HeaderTemplate>Personal Detail</HeaderTemplate>
            <ContentTemplate>
            <table>
                <tr>
                <td>First Name</td>
                <td><asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>Last Name</td>
                <td><asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>Age</td>
                <td><asp:TextBox ID="txtAge" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>Marital Status</td>
                <td><asp:TextBox ID="txtMaritalStatus" runat="server"></asp:TextBox></td>
                </tr>
            </table>
            </ContentTemplate>
            </Ajax:TabPanel>
            <Ajax:TabPanel ID="TabPanel2" runat="server">
            <HeaderTemplate>Contact Detail</HeaderTemplate>
            <ContentTemplate>
           <table>
                <tr>
                <td>Phone</td>
                <td><asp:TextBox ID="txtPhone" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>Email</td>
                <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>City</td>
                <td><asp:TextBox ID="txtCity" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                <td>Country</td>
                <td><asp:TextBox ID="txtCountry" runat="server"></asp:TextBox></td>
                </tr>
            </table>
           </ContentTemplate>
            </Ajax:TabPanel>
            <Ajax:TabPanel ID="TabPanel3" runat="server">
            <HeaderTemplate>See Your Detail</HeaderTemplate>
            <ContentTemplate>
                <asp:Label ID="lblName" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblAge" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblStatus" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblPhone" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblEmail" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblCity" runat="server" ></asp:Label>
                <br />
                <asp:Label ID="lblCountry" runat="server" ></asp:Label>
           </ContentTemplate>
            </Ajax:TabPanel>
    </Ajax:TabContainer>

     We have added a TabPanel for every tab and in each TabPanel we need to add HeaderTemplate to show header and ContentTemplate to show content. You have to set runat property of TabPanel as server otherwise it will not work. You can add css classes to TabContainer but I have left it simple.
     
  12. Add a button in the web form

    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />

     
  13. Open code behind file and write code below in button click event

    C#
     
    protected void btnSave_Click(object sender, EventArgs e) {
        lblName.Text = txtFirstName.Text + " " + txtLastName.Text;
        lblAge.Text = txtAge.Text;
        lblPhone.Text = txtPhone.Text;
        lblEmail.Text = txtEmail.Text;
        lblCity.Text = txtCity.Text;
        lblCountry.Text = txtCountry.Text;
    }
     
     
    VB.NET
     
    Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click
        lblName.Text = txtFirstName.Text & " " & txtLastName.Text
        lblAge.Text = txtAge.Text
        lblPhone.Text = txtPhone.Text
        lblEmail.Text = txtEmail.Text
        lblCity.Text = txtCity.Text
        lblCountry.Text = txtCountry.Text
    End Sub
     
  14. Now see the web site in browser.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to Encrypt and Decrypt connection string in web.config file in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net