January 21, 2021
Hot Topics:

Lazy Loading the ASP.NET AJAX TabContainer Control

  • By Mark Strawmyer
  • Send Email »
  • More Articles »

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 3rd 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}


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.

Page 2 of 2

This article was originally published on April 4, 2008

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date