Welcome to this installment of the .NET Nuts & Bolts column. The focus of this article will be on lazy loading data into the ASP.NET AJAX TabContainer control. This ability can be very useful when you have a tabbed interface that contains a fair amount of data to display.
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.
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.