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

Tabs的内容是否也像CMS一样受数据库驱动？

您可以将UserControls用作内容，并让所有实现相同的接口f.e. IDataBindable，函数为BindData。通过这种方式，您可以独立于其内容延迟加载这些UserControl。

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

Answer 2

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

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

ASP.NET - 延迟加载动态选项卡

2 个答案: