ASP.NET - 延遲加載動態標籤頁

Question

我很難過這個，並希望有人做了類似的事情。

我有一個ASP.NET應用程序有一些AJAX工具包選項卡。選項卡的數量因頁面而異，因爲它們是根據配置文件中的設置動態生成的。

這就是說，一些選項卡是數據庫驅動的。加載時間當這些標籤在頁面上的數量可能很大，所以我想實現延遲加載。

我遵循Matt Berseth的模式，但當選項卡的數量是動態的時候（每個選項卡在頁面上都需要它自己的方法）它似乎分解了。

如果任何人有關於如何解決這個問題的建議，將不勝感激。

我已經開始使用一個小應用程序來讓延遲加載工作。這個懶加載第二個選項卡（這是硬編碼），但第三個選項卡是我掙扎（它是動態添加）。

編輯補充代碼：ASPX頁面

<script language="javascript" type="text/javascript"> 
    function clientActiveTabChanged(sender, args) { 

     // see if the table elements for the grids exist yet 
     var isTab2Loaded = $get('<%= this.lbl2.ClientID %>'); 
     // if the tab does not exist and it is the active tab, 
     // trigger the async-postback 
     if (!isTab2Loaded && sender.get_activeTabIndex() == 1) { 
      // load tab1 
      __doPostBack('btnTrigger', ''); 
     } 
     // else if (!isTab2Loaded && sender.get_activeTabIndex() == 2) 
      // load tab2 
      // __doPostBack('btnEmployeesTrigger', ''); 
    } 

</script> 
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager> 
<div> 
<cc1:TabContainer ID="tc1" runat="server" OnClientActiveTabChanged="clientActiveTabChanged"> 
    <cc1:TabPanel TabIndex="0" runat="server" HeaderText="Tab1" ID="Tab1"> 
     <ContentTemplate> 
      <asp:UpdatePanel ID="up1" runat="server"> 
      <ContentTemplate> 
       <asp:Label ID="lbl1" text="I am here" runat="server" /> 
      </ContentTemplate> 
      </asp:UpdatePanel> 
     </ContentTemplate> 
    </cc1:TabPanel> 
    <cc1:TabPanel runat="server" HeaderText="Tab2" ID="Tab2"> 
    <ContentTemplate> 
     <asp:UpdatePanel ID="up2" UpdateMode="Conditional" runat="server"> 
      <ContentTemplate> 
       <asp:Label ID="lbl2" Text="Load when called" Visible="false" runat="server" />     
      </ContentTemplate> 
      <Triggers> 
       <asp:AsyncPostBackTrigger ControlID="btnTrigger" /> 
      </Triggers> 
     </asp:UpdatePanel> 
    </ContentTemplate> 
    </cc1:TabPanel> 
</cc1:TabContainer> 
</div> 
<input ID="btnTrigger" style="display:none;" runat="server" type="button" onserverclick="btnTrigger_Click" /> 
<input id="btnTrigger2" style="display:none;" runat="server" type="button" onserverclick="btnTrigger2_Click" /> 

代碼隱藏：

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;  
} 

Answer 1

是選項卡還數據庫驅動的像一個CMS內容？

您可以使用UserControls作爲內容並讓所有實現相同的接口f.e. IDataBindable，功能BindData。通過這種方式，您可以延遲加載這些UserControl而不依賴其內容。

在ActiveTabChanged你只需調用這個函數，然後在TabContainer的UpdatePanel上調用Update。

Answer 2

執行此操作的快速方法可能是在默認情況下不加載任何選項卡（即實際上不會提供任何內容），直到單擊該選項卡（在OnActiveTabChanged或OnClientActiveTabChanged期間檢測到）。

但是，蒂姆的方法允許OnActiveTabChanged方法就像數據綁定UserControl相對於該選項卡一樣簡單 - 這可能是最好的方法，儘管它更加努力。