TabContainer Control in AJAX Using ASP.NET


Introduction :

Ajax (Asynchronous JavaScript and XML) is a new web development technique for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

TabContainer

The TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. We can place our controls inside each TabPanel.

Property

  • ActiveTabIndex
  • CssClass
  • AutoPostBack
  • ClientIDMode

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag the following controls from the Toolbox:

  • Drag Panel, ScriptManager, TextBox, Button

Step 4 : Now go to the Toolbox option and drag a TabContainer.

myimage4.gif
Step 5 : Now we write the code and define properties.

code

   <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="TabHeaderCSS"  BackColor="#91D5C0">

Step 6 : Go to Default.aspx[Source]option and define a Tab Panel inside the TabContainer control.

Code

<style type="text/css">
        .TabHeaderCSS
        {
             font-family: @FangSong, Arial, "Courier New";
             font-size: 50px;
             background-color: Silver;
             text-align:center;
             cursor: pointer;
        }
    </style
>
</head>
<
body>
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager2" runat="server">
        </asp:ScriptManager>
    <div style="background-color: #8ADBD9">
        <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" CssClass="TabHeaderCSS"  BackColor="#91D5C0">
          <asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:TabPanel>
           <br />
           <br />
           <br />
           <Br />
            <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:TabPanel>
               <br />      
            <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" BackColor="#30CF9B"></asp:TextBox><br />
                    <asp:Button ID="Button3" runat="server" Text="Button" onclick="Button3_Click"
                        Height="25px" />
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br />
        <br />
        <br />
        <br />
    </div>
    </form
>
</body>
</
html>

Step 7 : Go to the Default.aspx[Design] option and click on the Button control and write the following code:

Code

AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
        foreach (object obj in container.Controls)
        {
            if (obj is AjaxControlToolkit.TabPanel)
            {
                AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
                foreach (object ctrl in tabPanel.Controls)
                {
                    if (ctrl is Control)
                    {
                        Control c = (Control)ctrl;
                        foreach (object innerCtrl in c.Controls)
                        {
                            if (innerCtrl is System.Web.UI.WebControls.TextBox)
                             Response.Write(((TextBox)innerCtrl).Text);

                       }

Step 8 : Go to Default.aspx.cs and write the following code.

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
        foreach (object obj in container.Controls)
        {
            if (obj is AjaxControlToolkit.TabPanel)
            {
                AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
                foreach (object ctrl in tabPanel.Controls)
                {
                    if (ctrl is Control)
                    {
                        Control c = (Control)ctrl;
                        foreach (object innerCtrl in c.Controls)
                        {
                            if (innerCtrl is System.Web.UI.WebControls.TextBox)
                            Response.Write(((TextBox)innerCtrl).Text);
                        }
                    }
                }
            }
        }
    }
}

Step 9 : The CSS code for the TabContainer control with Style tag is:

Code

<style type="text/css">
        .TabHeaderCSS
        {
             font-family: @FangSong, Arial, "Courier New";
             font-size: 50px;
             background-color: Silver;
             text-align:center;
             cursor: pointer;
        }
    </style
>

Step 10 : Now run the application by Pressing F5.

myimage.gif

Step 11 : Now we define any text inside Textbox and click on the Button.

myimage2.gif

Step 12 : Click on the TabControl2 option and define the text in the TextBox show following item.

myimage2.gif

Step 13 : Again click on the TabContainer3 and write any text inside the TextBox then click on the Button then the TabContainer text will look as shown below:

myimage3.gif

 Resource

CSS Style Sheet for Ajax TabContainer Control in ASP.NET 2.0

AJAX Rating Control

DropShadowExtender Control in AJAX Using ASP.NET

AJAX SlideShowExtender Control

Up Next
    Ebook Download
    View all
    Learn
    View all