title: ASP.NET - lazy loading dynamic tabs
body: <p>I'm stumped on this one and hope someone out there's done something similar.</p>
  
  <p>I have an ASP.NET application that has a number of AJAX toolkit tabs. The number of tabs varies page to page, since they're dynamically generated based on settings in a config file.</p>
  
  <p>That being said, some of the tabs are database-driven. The load time when a number of these tabs are on the page can be significant, so I want to implement lazy loading.</p>
  
  <p>I'm following Matt Berseth's pattern, but it seems to break down when the number of tabs is dynamic (each tab needs its own method on the page).</p>
  
  <p>If anyone has a suggestion on how to tackle this, it'd be much appreciated.</p>
  
  <p>I've started working with a small app to get the lazy loading to work. This lazy loads the second tab (which is hard coded), but the third tab is what I'm struggling with (it's dynamically added).</p>
  
  <p>Edited to add code:  ASPX page</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
      function clientActiveTabChanged(sender, args) {
  
          //  see if the table elements for the grids exist yet
          var isTab2Loaded = $get('&lt;%= this.lbl2.ClientID %&gt;');
          //  if the tab does not exist and it is the active tab, 
          //  trigger the async-postback
          if (!isTab2Loaded &amp;&amp; sender.get_activeTabIndex() == 1) {
              // load tab1
              __doPostBack('btnTrigger', '');
          }
          // else if (!isTab2Loaded &amp;&amp; sender.get_activeTabIndex() == 2)
              // load tab2
              // __doPostBack('btnEmployeesTrigger', '');
       }
  
  &lt;/script&gt;
  &lt;asp:scriptmanager ID="Scriptmanager1" runat="server"&gt;&lt;/asp:scriptmanager&gt;
  &lt;div&gt;
  &lt;cc1:TabContainer ID="tc1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged"&gt;
     &lt;cc1:TabPanel TabIndex="0" runat="server" HeaderText="Tab1" ID="Tab1"&gt;
          &lt;ContentTemplate&gt;
              &lt;asp:UpdatePanel ID="up1" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:Label ID="lbl1" text="I am here" runat="server" /&gt;
              &lt;/ContentTemplate&gt;
              &lt;/asp:UpdatePanel&gt;
          &lt;/ContentTemplate&gt;
     &lt;/cc1:TabPanel&gt; 
     &lt;cc1:TabPanel runat="server" HeaderText="Tab2" ID="Tab2"&gt;
      &lt;ContentTemplate&gt;
          &lt;asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server"&gt;
              &lt;ContentTemplate&gt;
                  &lt;asp:Label ID="lbl2" Text="Load when called" Visible="false" runat="server" /&gt;                
              &lt;/ContentTemplate&gt;
              &lt;Triggers&gt;
                  &lt;asp:AsyncPostBackTrigger ControlID="btnTrigger" /&gt;
              &lt;/Triggers&gt;
          &lt;/asp:UpdatePanel&gt;
      &lt;/ContentTemplate&gt;
     &lt;/cc1:TabPanel&gt;
  &lt;/cc1:TabContainer&gt;
  &lt;/div&gt;
  &lt;input ID="btnTrigger" style="display:none;" runat="server" type="button" onserverclick="btnTrigger_Click" /&gt;
  &lt;input id="btnTrigger2" style="display:none;" runat="server" type="button" onserverclick="btnTrigger2_Click" /&gt;
  </code></pre>
  
  <p>Codebehind:</p>
  
  <pre><code>protected void Page_Init(object sender, EventArgs e)
  {
      //TabPanel tp = new TabPanel();
      //tp.Controls.Add(new LiteralControl("Load first"));
      //tp.HeaderText = "Tab1";
      //tc1.Tabs.Add(tp);
      //tc1.ActiveTabIndex = 0;
  
      //TabPanel tp2 = new TabPanel();
      //UpdatePanel up1 = new UpdatePanel();
      //up1.Controls.Add(new LiteralControl("Load me when called"));
      ////up1.Triggers.Add(new AsyncPostBackTrigger());
  
      //AsyncPostBackTrigger trg = new AsyncPostBackTrigger();
  
      //tp2.Controls.Add(up1);
      //tp2.Controls.Add(new LiteralControl("Load when called"));
      //tp2.HeaderText = "Tab2";
      //tc1.Tabs.Add(tp2);
  
      TabPanel tp3 = new TabPanel();
      tp3.HeaderText = "Tab3";
      UpdatePanel up3 = new UpdatePanel();
      LiteralControl lc = new LiteralControl("Load me when needed");
      lc.ID = "lit3";
      lc.Visible = false;
      up3.ContentTemplateContainer.Controls.Add(lc);
      tp3.Controls.Add(up3);
      tc1.Controls.Add(tp3);
  
  }
  
  protected void btnTrigger_Click(object sender, EventArgs e)
  {
      System.Threading.Thread.Sleep(2500);
      this.lbl2.Visible = true;    
  }
  </code></pre>