Lazy Loading the ASP.NET AJAX TabContainer Control
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.
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.
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.
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 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.