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.
IE 7
Firefox 2.0
