Lazy Loading the ASP.NET AJAX TabContainer Control

ASP.NET AJAX

Asynchronous JavaScript and XML (AJAX) is a bundling/simplification of technology that has existed for a while. It is a framework for building interactive Web applications that work across the popular browsers. It auto generates the necessary client-side scripting to provide a more robust user experience than native ASP.NET alone. ASP.NET AJAX originated as a separate download for ASP.NET 2.0 and Visual Studio 2005. It is now built into ASP.NET 3.5 and Visual Studio 2008.

ASP.NET AJAX Control Toolkit

The AJAX Control Toolkit is a joint project between Microsoft and the community. It extends the ASP.NET AJAX framework to provide a rich variety of free prebuilt AJAX controls to make building rich web experiences easier. Full source code is available to extend or modify the control set as necessary. (Note: Although you can edit the controls, I tend to try not to modify the controls unless really necessary to make it easy to upgrade to new versions of the Control Toolkit when it is released.) A list of commonly used AJAX controls includes but is not limited to:

• Update Panel: Most common control used. Only the contents of the UpdatePanel post back. The post back (screen flicker) is not visible to the user; this helps create a richer experience by providing behavior similar to a Windows-based application.
• TextBoxWatermark: Adds additional text to a textbox. The message is displayed only when the textbox is empty and not in focus.
• Collapsible Panel: Expand or collapse a panel. You define the panel to expand or collapse.
• TabContainer: Client-side tab container that can contain anything.

There is plenty of information on how to get to get started with both ASP.NET AJAX and the AJAX Control Toolkit. For the balance of this article, I'll assume you already have AJAX set up and the AJAX Control Toolkit plugged in to your application and functional. If you don't, now would be a good time to pause reading this and get it set up.

TabContainer Control

The TabContainer is the focus of this article. It is a host for any number of tabs within the user interface. The tabs can contain anything you want. The most recent tab remains selected after a postback along with the enabled state of any tab.

The following sample code demonstrates a simple display with three tabs. You can insert any actual content you would like into the ContentTemplate in each tab.

<asp:scriptmanager ID="Scriptmanager1"                   runat="server"></asp:scriptmanager><ajax:TabContainer runat="server" ID="tabsModManager">   <ajax:TabPanel  runat="server" ID="tabpnlApproveNew"                   Enabled="true"                   HeaderText="Review Requests to be Moderator"                   Width="100%">      <ContentTemplate>[put your content here #0]</ContentTemplate>   </ajax:TabPanel>   <ajax:TabPanel runat="server" ID="tabpnlAddNew" Enabled="true"                  HeaderText="Add New Moderator" Width="100%">      <ContentTemplate>         [put your content here #1...]      </ContentTemplate>   </ajax:TabPanel>   <ajax:TabPanel runat="server" ID="tabpnlEditExisting"                  Enabled="true"                  HeaderText="Edit Existing Moderators"                  Width="100%">      <ContentTemplate>         [put your content here #2....]      </ContentTemplate>   </ajax:TabPanel></ajax:TabContainer>

The following diagram shows what the above sample code for the TabContainer would look like when displayed inside a web page.

Click here for a larger image.

Figure 1 TabContainer Example Display

Additionally, you can refer to the tabs demonstration on the live toolkit demonstration site to see the tabs in action first hand along with related documentation.

Lazy Loading

A common use of the TabContainer is to have multiple tabs that display different lists of data retrieved from a database. All of the tabs load regardless of which tab is selected and being displayed. This behavior can lead to performance issues within your application if each of the tabs contains large lists of data and they are all loaded at once. At times, it is desirable to have a tab load its contents only on demand when they are requested. This behavior is commonly referred to as lazy loading. The TabContainer itself does not natively allow for lazy loading. Fortunately, it has client-side events it exposes that can be combined with other AJAX and HTML controls to provide the desired behavior. The general approach is as follows:

• Add a button input control to the form with a style="display:none" and an onserver click event. The purpose of this control will be explained later.
• Add an UpdatePanel to the desired tab in the TabContainer with an AsynchPostBackTrigger property with the value set to the ID of the input button added in the step above. This will tie the UpdatePanel to the input button. When the input button is triggered, the UpdatePanel will also postback.
• Add OnClientActiveTabChanged setting on the TabContainer to point to a JavaScript method for when the tab changes.
• Add script to cause a postback when the tab changes. This is done by triggering the input button when necessary. In the example, you'll check for a specific tab to have become active before initiating the postback.
• Have a label on the tab that is lazy loading that indicates a message such as "Loading..." that gets replaced when the tab is fully loaded.

The following code snippet builds upon the prior example to provide a full example using the approach described earlier. It is the code that would belong in the user interface. Notice how the 3^rd tab now has an UpdatePanel within it. It includes a label for displaying a "Loading..." message that will display while the UpdatePanel loads new content in the background.

<script language="javascript" type="text/javascript">   function clientActiveTabChanged(sender, args) {      // Post back if it is the 3rd tab (0 based)      if(sender.get_activeTabIndex() == 2) {         __doPostBack('<%= this.btnTrigger.UniqueID %>', '');      }</script><input id="btnTrigger" runat="server" style="display:none;"       type="button" onserverclick="btnTrigger_Click" /><ajax:TabContainer runat="server" ID="tabsModManager"   OnClientActiveTabChanged="clientActiveTabChanged">   <ajax:TabPanel runat="server" ID="tabpnlApproveNew"                  Enabled="true"                  HeaderText="Review Requests to be Moderator"                  Width="100%">      <ContentTemplate>         [put your content here...]      </ContentTemplate>   </ajax:TabPanel>   <ajax:TabPanel runat="server" ID="tabpnlAddNew" Enabled="true"                  HeaderText="Add New Moderator" Width="100%">      <ContentTemplate>         [put your content here...]      </ContentTemplate>         </ajax:TabPanel>   <ajax:TabPanel runat="server" ID="tabpnlEditExisting"                  Enabled="true"                  HeaderText="Edit Existing Moderators"                  Width="100%">      <ContentTemplate>         <ajax:UpdatePanel ID="updpnlArticles" runat="server"                           UpdateMode="Conditional">            <Triggers>               <ajax:AsyncPostBackTrigger                     ControlID="btnTrigger" />            </Triggers>            <ContentTemplate>               <asp:Label runat="server" ID="lblTabLoadStatus"                          Text="Loading..."></asp:Label>               <!--- Rest of the controls here --->            </ContentTemplate>         </ajax:UpdatePanel>      </ContentTemplate>   </ajax:TabPanel></ajax:TabContainer>

Here is a very basic code snippet for the code that would appear in the code behind. The first assignment removes the "Loading..." that appears in the user interface. Any other code afterwards would retrieve data from the database or other data source and display it to the screen.

protected void btnTrigger_Click(object sender, EventArgs args){   this.lblTabLoadStatus.Text = "";   // Code to load data from database or other data source here}

Summary

You've been introduced to the ASP.NET AJAX Control Toolkit and a few of the controls. You looked more in depth at the TabContainer control and how to use it to load tabs on demand; this is also known as lazy loading. You'll need to change the sample code to include your specific display, but hopefully the example gives you enough of an idea of how it works to implement it within your own application.

Future Columns

The topic of the next column is yet to be determined. If you have something in particular that you would like to see explained here, you could reach me at mstrawmyer@crowechizek.com.

About the Author

Mark Strawmyer, MCSD, MCSE, MCDBA is a Senior Architect of .NET applications for large and mid-size organizations. Mark is a technology leader with Crowe Chizek in Indianapolis, Indiana. He specializes in architecture, design, and development of Microsoft-based solutions. Mark was honored to be named a Microsoft MVP for application development with C# for the fifth year in a row. You can reach Mark at mstrawmyer@crowechizek.com.