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 用作 Content 并让所有人都实现相同的接口 f.e. IDataBindable 带有函数 BindData。通过这种方式，您可以独立于其内容延迟加载这些 UserControl。

在ActiveTabChanged 上，您只需调用此函数，然后在 TabContainer 的 UpdatePanel 上调用Update。

Answer 2

执行此操作的快速方法可能是在单击该选项卡之前不加载任何选项卡（即实际上不给它们任何内容），直到单击该选项卡（在OnActiveTabChanged 或OnClientActiveTabChanged 期间检测到）。

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