Make ASP.NET AJAX Tab control panel load 'on-demand'

Overview

ASP.NET AJAX Control Toolkit is surely a very useful toolbox for ASP.NET web developer. However, some of the Toolkit's controls are not fully "AJAX" enabled in my point of view.

"AJAX Tabs" is one of the controls that I like the most but also want it to be better. One of the feature I want to (must) have is to make a control panel load 'on-demand' in order to reflect changes made on previous control panels.

Shawn Burke have a post showing a implementation on this feature. I copy it and change it a bit, mainly because I don't need a button to reload the panel. Instead I can just call "__doPostBack('<%=UpdatePanelControl.ClientID%>','')" to reload the update panel.

Reference

How To: Make Tab control panels load "on-demand"

Steps

Build the "AJAX Tab Control"

Building the Tab Control is pretty easy, provided that you have your AJAX Control Toolkit setup properly. (If you don't please go to Here to download the components need to setup ASP.NET AJAX and Here to download the AJAX Control Toolkit)

Code Snippet:

<ajaxToolKit:TabContainer ID="TabContainer" runat="server" OnClientActiveTabChanged="ActiveTabChanged">

 

    <ajaxToolKit:TabPanel runat="server" ID="TabPanel1">

        <ContentTemplate>

            <asp:TextBox ID="TextBox1" runat="server" />

        </ContentTemplate>

    </ajaxToolKit:TabPanel>

 

    <ajaxToolKit:TabPanel runat="server" ID="TabPanel2">

        <ContentTemplate>

 

            <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load" UpdateMode="Conditional">

                <ContentTemplate>

 

                    <asp:Label ID="Label1" runat="server" />

 

                </ContentTemplate>

            </asp:UpdatePanel>

 

        </ContentTemplate>

    </ajaxToolKit:TabPanel>

 

</ajaxToolKit:TabContainer>

 

There are several things that make it works:

1. First of all, an "Update Panel" inside the Tap Panel you want to load on-demand. Set the "UpdateMode" attribute to "Conditional" is the key to make it reload only when it is supposed to.
2. A Javascript function which tell server side to load the Update Panel. In this example the function is "ActiveTabChanged" and it is set to "OnClientActiveTabChanged" attribute of the Tab Container, so that it is fired whenever active tab is changed.
3. A server-side on-load event handler "UpdatePanel1_Load" for the Update Panel in step 1.

Javascript function "ActiveTabChagned" to load the Update Panel

As stated above, a Javascript function attached to "OnClientActiveTabChanged" event of the Tab Container is used to load the Update Panel. Basically it will check the active tab index and do postback of the corresponding Update Panel.

 Code Snippet:

function ActiveTabChanged(sender, e)

        {

            // Change Tab

            switch(sender.get_activeTabIndex())

            {

                case 1:

                    // Reload "UpdatePanel1"

                    __doPostBack('<%=UpdatePanel1.ClientID%>','');

                    break;

            }

        }

In the function I use get_activeTabIndex() method provided by the AJAX Tab Container (the sender) to get the active tab index. On the other hand you may use set_activeTabIndex() method to change active tab at client side.

Update Panel on-load event handler

At this time I have successfully make the Update Panel to load on-demand. Now in order to make sure that it actually reloaded, let's write an on-load event handler to change the text of the Label inside it.

 Code Snippet:

protected void UpdatePanel1_Load(object sender, EventArgs e)

        {

            if (Page.IsPostBack)

            {

                Label1.Text = "On".Equals(Label1.Text) ? "Off" : "On";

            }

        }

 

That's it, Happy Coding ;-)