TabContainer Control in AJAX Using ASP.NET

Davin Martyn
Feb 22, 2012
92.1k
0
0
Article

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.

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:

Step 10 : Now run the application by Pressing F5.

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

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

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: