ASP.NET-延迟加载动态选项卡
我在这件事上被难住了,希望有人也做过类似的事情 我有一个ASP.NET应用程序,它有许多AJAX工具箱选项卡。选项卡的数量因页面而异,因为它们是根据配置文件中的设置动态生成的 也就是说,一些选项卡是数据库驱动的。当页面上有许多这样的选项卡时,加载时间可能很长,所以我想实现延迟加载 我遵循Matt Berseth的模式,但当选项卡的数量是动态的(每个选项卡在页面上都需要自己的方法)时,它似乎会崩溃 如果有人对如何解决这个问题提出建议,我们将不胜感激 我已经开始使用一个小应用程序来实现延迟加载。这个延迟加载第二个选项卡(硬编码),但第三个选项卡是我正在努力解决的(它是动态添加的) 编辑以添加代码:ASPX页ASP.NET-延迟加载动态选项卡,asp.net,ajax,tabs,load,lazy-evaluation,Asp.net,Ajax,Tabs,Load,Lazy Evaluation,我在这件事上被难住了,希望有人也做过类似的事情 我有一个ASP.NET应用程序,它有许多AJAX工具箱选项卡。选项卡的数量因页面而异,因为它们是根据配置文件中的设置动态生成的 也就是说,一些选项卡是数据库驱动的。当页面上有许多这样的选项卡时,加载时间可能很长,所以我想实现延迟加载 我遵循Matt Berseth的模式,但当选项卡的数量是动态的(每个选项卡在页面上都需要自己的方法)时,它似乎会崩溃 如果有人对如何解决这个问题提出建议,我们将不胜感激 我已经开始使用一个小应用程序来实现延迟加载。这个
<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" />
标签的内容是否也像CMS一样由数据库驱动 您可以使用UserControls作为内容,让所有控件都使用函数
BindData
实现相同的界面f.e.IDataBindTable
。通过这种方式,您可以独立于这些用户控件的内容来懒散地加载它们
在
ActiveTabChanged
上,您只需调用此函数,然后在TabContainer的UpdatePanel上调用Update
。选项卡的内容是否也像CMS一样由数据库驱动
您可以使用UserControls作为内容,让所有控件都使用函数BindData
实现相同的界面f.e.IDataBindTable
。通过这种方式,您可以独立于这些用户控件的内容来懒散地加载它们
在
ActiveTabChanged
上,您只需调用此函数,然后在TabContainer的UpdatePanel上执行Update
。完成此操作的快速方法可能是在单击该选项卡之前,不加载默认选项卡之外的任何选项卡(即不实际为其提供任何内容)(在激活时检测到更改或客户端设置更改时检测到)
然而,Tim的方法允许
onActiviteabChanged
方法与相对于该选项卡的UserControl
数据绑定一样简单-这可能是最好的方法,尽管它更费劲。实现这一点的快速方法可能是不加载任何选项卡(即,实际上不给它们任何内容)除了默认设置,直到单击该选项卡为止(在激活选项卡更改期间检测到)
然而,Tim的方法允许
OnActiveTabChanged
方法与相对于该选项卡的UserControl
数据绑定一样简单-这可能是最好的方法,尽管它更费力。你能分享你当前使用的代码吗?你能分享你当前使用的代码吗?我的方法也不会加载除了用户单击另一个选项卡之前的第一个选项卡之外的任何数据。只有ActiveTab的UserControl可见并加载。除了用户单击另一个选项卡之前的第一个选项卡之外,我的方法也不会加载任何数据。只有ActiveTab的UserControl可见并加载。我将发布另一条消息,说明代码是如何结束的(如果其他人想这样做)我将发布另一条消息,说明代码是如何结束的(如果其他人想这样做)
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;
}