Ajax Tab Panel For Asp.Net

Click on any of the above tabs to switch between the corresponding tab pages.
Tab switching can also raise events to notify you before the requested tab is shown.
Enter text into the text box, and use the radio buttons to select the tab that will be used, then click "Change the tab name." or "Switch to Tab."

This is Tab 1.

Nullam at est ac turpis blandit ullamcorper. Sed non velit. Mauris aliquam. Curabitur feugiat sapien. Praesent dignissim bibendum felis. Proin id risus. Sed diam massa, pharetra id, luctus eget, varius vitae, quam. Praesent eu magna in neque ultrices venenatis. Vestibulum orci justo, commodo at, porttitor id, pharetra et, lorem. Proin aliquam libero placerat purus. Quisque ac metus sit amet augue volutpat fermentum. Maecenas rutrum feugiat lectus. Aenean volutpat ullamcorper quam. Ut id est. Suspendisse potenti. Praesent a augue ut tortor sollicitudin viverra. Nam id est vel arcu ultrices sagittis. Praesent consequat. Donec aliquam, ligula et rutrum lacinia, nibh risus sodales massa, ac sollicitudin ligula tortor non tortor. Sed blandit ante ac tellus. Cras ornare mauris nec risus. Suspendisse nisi. Nulla sed velit. Morbi sed velit quis eros congue pretium. Vestibulum fermentum augue in nisl. Quisque egestas lorem. In tristique auctor diam. Mauris est justo, nonummy non, sagittis eu, gravida sit amet, elit. Mauris auctor justo quis quam. Vivamus quis tellus ut leo accumsan eleifend. Nam non ligula at augue ultricies sagittis. Donec convallis libero vestibulum tortor.

Tab One Tab Two Tab Three

The AsyncTabPanel is a robust and Async-Enabled tabbing server control. Designed to increase your visual organizing abilities. Easy to setup and use, it is also fully customizable; from the look of the tabs to the position of the tabs. This control allows you to programmatically switch between AsyncTabPages and to show or hide tabs all during an AsyncCallback.

Fully customizable tab positioning, choose center|left|right aligned, and place the tabs at the top or the bottom of the panel.
Show/Hide AsyncTabPages during an AsyncCallback.
Allows you to easily receive OnTabChanging events.
Can be scrolled into view during an AsyncCallback.
Change the tab's name, CSS class, or visibility during an AsyncCallback.

<%@ Register Assembly="AsyncControls" Namespace="DelvingWare.AsyncControls" TagPrefix="dw" %>

<dw:AsyncTabPanel runat="server" ID="tabMain"
    TabAlign="Left" 
    TabType="AsyncButton"
    ActiveTabCssClass="activeTab" 
    Width="490"
    TabCssClass="inactiveTab" 
    CssClass="tabPanel"
    TabSwitch="true"
    OnTabChanging="tabMain_TabChanging">
    
    <dw:AsyncTabPage runat="server" ID="tbMain1" Activate="true" TabText="Tab 1">
    
    </dw:AsyncTabPage>

    <dw:AsyncTabPage runat="server" ID="tbMain2" TabText="Tab 2">
    
    </dw:AsyncTabPage>

    <dw:AsyncTabPage runat="server" ID="tbMain3" TabText="Tab 3">
    
    </dw:AsyncTabPage>

</dw:AsyncTabPanel>

<dw:AsyncLabel runat="server" ID="lblMain" RenderMode="Paragraph"/>

<dw:AsyncTextBox runat="server" ID="txtMain"
MaxLength="10"
EnableValidation="Enabled"
ErrorMessage="Please enter a name."
ErrorMessageCssClass="errorMsg" />

<dw:AsyncButton runat="server" ID="btMain"
CssClass="greyButton"
Text="Change the Tab Name"
OnClick="btMain_Click"
CausesValidation="true" />

<dw:AsyncButton runat="server" ID="btSwitch"
CssClass="greyButton"
OnClick="btSwitch_Click"
Text="Switch to Tab" />

<br/>
<dw:AsyncRadioButton runat="server" ID="rbOne"
Checked="true"
Text="Tab One" />

<dw:AsyncRadioButton runat="server" ID="rbTwo"
Text="Tab Two" />

<dw:AsyncRadioButton runat="server" ID="rbThree"
Text="Tab Three" />

using System;
using DelvingWare.AsyncControls;
...
protected void Page_Load( object sender, EventArgs e )
{
    // enable AsyncTabPanel usage
    AsyncPage.Invocation.EnableAsyncTabPanel = true;
}

protected void tabMain_TabChanging( object sender, AsyncTabEventArgs ae )
{
    // update the AsyncLabel text
    lblMain.Text = "Tab changed to: "+ ae.TabName;
}

protected void btMain_Click( object sender, AsyncEventArgs ae )
{
    // ensure validation passed
    if ( !txtMain.IsValid )
        return;

    int index = 0;

    // determine which tab name to update
    if ( rbOne.Checked )
        index = 0;
    else if ( rbTwo.Checked )
        index = 1;
    else if ( rbThree.Checked )
        index = 2;

    // update the AsyncTab name
    tabMain.TabPages[index].Name = txtMain.Text;

    // update the AsyncLabel text
    lblMain.Text = "Tab name updated.";
}

protected void btSwitch_Click( object sender, AsyncEventArgs ae )
{
    int index = 0;

    // determine which tab to activate
    if ( rbOne.Checked )
        index = 0;
    else if ( rbTwo.Checked )
        index = 1;
    else if ( rbThree.Checked )
        index = 2;

    // activate the tab index
    tabMain.ActiveTabIndex = index;

    // update the AsyncLabel text
    lblMain.Text = "Activated tab: "+ tabMain.TabPages[index].Name;
}

Imports System
Imports DelvingWare.AsyncControls
...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' enable AsyncTabPanel usage
    AsyncPage.Invocation.EnableAsyncTabPanel = true
End Sub

Protected Sub tabMain_TabChanging(ByVal sender As Object, ByVal ae As AsyncTabEventArgs)
    ' update the AsyncLabel text
    lblMain.Text = ("Tab changed to: " + ae.TabName)
End Sub

Protected Sub btMain_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    ' ensure validation passed
    If Not txtMain.IsValid Then
        Return
    End If
    Dim index As Integer = 0
    ' determine which tab name to update
    If rbOne.Checked Then
        index = 0
    ElseIf rbTwo.Checked Then
        index = 1
    ElseIf rbThree.Checked Then
        index = 2
    End If
    ' update the AsyncTab name
    tabMain.TabPages(index).Name = txtMain.Text
    ' update the AsyncLabel text
    lblMain.Text = "Tab name updated."
End Sub

Protected Sub btSwitch_Click(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    Dim index As Integer = 0
    ' determine which tab to activate
    If rbOne.Checked Then
        index = 0
    ElseIf rbTwo.Checked Then
        index = 1
    ElseIf rbThree.Checked Then
        index = 2
    End If
    ' activate the tab index
    tabMain.ActiveTabIndex = index
    ' update the AsyncLabel text
    lblMain.Text = ("Activated tab: " + tabMain.TabPages(index).Name)
End Sub

.tabPanel 

{
    font-family: Verdana, Arial, Serif;
    border: 1px solid black;
    background-color: white;
}
.tabPanel h3 

{
    font-size: 13pt;
}
.tabPanel p 

{
    font-size: 9pt;
}
.tabPanel .tab1, .tab2, .tab3

{
    padding: 1.5em;
}
.activeTab 

{
    background-image: url("images/bevActiveTab.gif");
    background-repeat: no-repeat;
    border: 0px;
    width: 120px;
    height: 30px;
    color: black;
    font-size: 9pt;
    font-weight: bold;
    position: relative;
    top: 1px;
}
.activeTab, .inactiveTab 

{
    padding-left: 4px;
    padding-right: 4px;
    text-decoration: none;
    font-family: verdana, tahoma, Serif;
}
.inactiveTab {
    background-image: url("images/bevInactiveTab.gif");
    background-repeat: repeat-x;
    border: 1px solid #717171;
    border: 0px;
    width: 120px;
    height: 25px;
    color: black;
    font-size: 9pt;
    font-weight: bold;
}
.inactiveTab:hover {
    background-image: url("images/bevInactiveTabHov.gif");
    background-repeat: repeat-x;
    cursor: pointer;
}

This is Tab 1.

This is Tab 2.

This is Tab 3.