ASP.NET - 延迟加载动态标签页

我很难过这个，并希望有人做了类似的事情。ASP.NET - 延迟加载动态标签页

我有一个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;  
}

来源

2011-03-31 Tim

你可以分享你目前使用的代码吗？ – 2011-03-31 19:44:48

是选项卡还数据库驱动的像一个CMS内容？

您可以使用UserControls作为内容并让所有实现相同的接口f.e. IDataBindable，功能BindData。通过这种方式，您可以延迟加载这些UserControl而不依赖其内容。

在ActiveTabChanged你只需调用这个函数，然后在TabContainer的UpdatePanel上调用Update。

来源

2011-03-31 19:50:07

我会发布另一条消息，说明代码如何结束（以防其他人想要这样做） – Tim 2011-04-04 14:13:40

执行此操作的快速方法可能是在默认情况下不加载任何选项卡（即实际上不会提供任何内容），直到单击该选项卡（在OnActiveTabChanged或OnClientActiveTabChanged期间检测到）。

但是，蒂姆的方法允许OnActiveTabChanged方法就像数据绑定UserControl相对于该选项卡一样简单 - 这可能是最好的方法，尽管它更加努力。

来源

2011-03-31 19:59:25

我的方法也不会加载任何数据，但用户在另一个选项卡上单击之前的第一个Tab。只有ActiveTab的用户控件是可见并加载的。 – 2011-03-31 20:47:36

ASP.NET - 延迟加载动态标签页

回答

相关问题