懒装载片与用户控件 [英] Lazy loading tabs with user controls

查看:80
本文介绍了懒装载片与用户控件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想用标签阿贾克斯标签容器的延迟加载。我已经实现了它。但是,我所面临的问题是,当我点击一个按钮,火灾在用户控件任何情况下,它不会触发;什么都没发生。

 < ASP:TabContainer的=服务器ID =TabContainerUp
        ActiveTabIndex =0的AutoPostBack =真OnActiveTabChanged =TabContainerUp_ActiveTabChanged>
        < ASP:一个tabpanel ID =tab1的=服务器>
            < HeaderTemplate中>
                < IMG SRC =图像/ uc1.pngALT =/>
            < / HeaderTemplate中>
            <的ContentTemplate>
                < ASP:面板ID =pnlUC1=服务器>
                < / ASP:面板>
            < /的ContentTemplate>
        < / ASP:一个tabpanel>
        < ASP:一个tabpanel ID =TAB2=服务器>
            < HeaderTemplate中>
                < IMG SRC =图像/ uc2.pngALT =/>
            < / HeaderTemplate中>
            <的ContentTemplate>
                < ASP:面板ID =pnlUC2=服务器>
                < / ASP:面板>
            < /的ContentTemplate>
        < / ASP:一个tabpanel>
    < / ASP:TabContainer的>
 

codebehind:

 保护无效TabContainerUp_ActiveTabChanged(对象发件人,EventArgs的)
    {
        字符串TABNAME = TabContainerUp.ActiveTab.ID;
        getActiveTab(TABNAME);
    }

    公共无效getActiveTab(字符串TABNAME)
    {
        用户控件UC;
        // UC。
        开关(TABNAME)
        {
            案TAB1:
                pnlUC1.Controls.Clear();
                UC = Page.LoadControl(〜/控制/ UC1.ascx)作为用户控件;
                pnlUC1.Controls.Add(UC);
                打破;
            案TAB2:
                pnlUC2.Controls.Clear();
                UC = Page.LoadControl(〜/控制/ UC1.ascx)作为用户控件;
                pnlUC2.Controls.Add(UC);
                打破;
        }
    }
 

解决方案

您需要重新创建在的Page_Load 每次回发的最新动态创建的控件,使用相同的ID像之前一样。所以,你可以加载,并将它们添加到您的面板 ActiveTabChanged ,但你需要重新创建它们在 Page_Init / Page_Load中。因此,你需要存储哪些地方重建(FE在会话)。

但我认为你正在做的事情比需要更复杂,你可以简单地甚至声明创建这些用户控件(在ASPX)与<$的初始可见状态C $ C>假。然后,你只需要在 ActiveTabChanged 根据需要切换控制的知名度。

注意:无形的服务器端器WebControls不会在所有呈现给客户端,也没有的ViewState 将被保存。因此,有没有缺点,宣布他们。

延迟加载并不意味着你尽可能晚地创建这些控件,但它意味着你数据绑定他们尽可能晚。所以永远不要从的Page_Load 将它们绑定到数据库(FE在该用户),但仅从将从 ActiveTabChanged )。因此,你可以在你的用户控件 UC1 公开实施办法 BindData

下面是一个简单的例子:

 开关(TABNAME)
{
    案TAB1:
        UC1_1.Visible = TRUE;
        UC1_1.BindData();
        UC1_2.Visible = FALSE;
        打破;
    案TAB2:
        UC1_1.Visible = FALSE;
        UC1_2.Visible = TRUE;
        UC1_2.BindData();
        打破;
}
 

和您的用户控件

 公共无效BindData()
{
    //这里把所有的数据绑定东西
    //这是在Page_Load中现在...
}
 

这是可能的延迟加载AJAX TabPanels最好的教程:

I want to use lazy loading of tabs in AJAX tab container. I have implemented it. But the problem that I am facing is that when I click a button or fire any event in that user control, it is not fired; nothing happens.

<asp:TabContainer runat="server" ID="TabContainerUp" 
        ActiveTabIndex="0" AutoPostBack="true" OnActiveTabChanged="TabContainerUp_ActiveTabChanged">
        <asp:TabPanel ID="tab1" runat="server">
            <HeaderTemplate>
                <img src="images/uc1.png" alt="" />
            </HeaderTemplate>
            <ContentTemplate>
                <asp:Panel ID="pnlUC1" runat="server">
                </asp:Panel>
            </ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="tab2" runat="server">
            <HeaderTemplate>
                <img src="images/uc2.png" alt="" />
            </HeaderTemplate>
            <ContentTemplate>
                <asp:Panel ID="pnlUC2" runat="server">
                </asp:Panel>
            </ContentTemplate>
        </asp:TabPanel>
    </asp:TabContainer>

codebehind:

    protected void TabContainerUp_ActiveTabChanged(object sender, EventArgs e)
    {
        string tabName = TabContainerUp.ActiveTab.ID;
        getActiveTab(tabName);
    }

    public void getActiveTab(string tabName)
    {
        UserControl uc;
        //uc.
        switch (tabName)
        {
            case "tab1":
                pnlUC1.Controls.Clear();
                uc = Page.LoadControl("~/Controls/UC1.ascx") as UserControl;
                pnlUC1.Controls.Add(uc);
                break;
            case "tab2":
                pnlUC2.Controls.Clear();
                uc = Page.LoadControl("~/Controls/UC1.ascx") as UserControl;
                pnlUC2.Controls.Add(uc);
                break;
        }
    }

解决方案

You need to recreate dynamically created controls on every postback in Page_Load at the latest, with the same ID as before. So you can load and add them to your panels in ActiveTabChanged, but you need to recreate them in the next postback in Page_Init/Page_Load. Therefor you need to store somewhere what to recreate (f.e. in Session).

But i assume that you're making things more complicated than necessary, you could simply create these UserControls even declaratively (on aspx) with an initial Visible state of false. Then you only need to switch visibility of the controls as necessary in ActiveTabChanged.

Note: invisible serverside webcontrols will not be rendered at all to the client and no ViewState will be saved. So there's no disadvantage in declaring them.

Lazy-Load does not mean that you create these controls as late as possible but it means that you databind them as late as possible. So never bind them to the database from page_load (f.e. in the UserControl), but only from methods that will be called when necessary from the page(here from ActiveTabChanged). Therefor you could implement a public method BindData in your UserControl UC1.

Here's a simple example:

switch (tabName)
{
    case "tab1":
        UC1_1.Visible = true;
        UC1_1.BindData();
        UC1_2.Visible = false;
        break;
    case "tab2":
        UC1_1.Visible = false;
        UC1_2.Visible = true;
        UC1_2.BindData();
        break;
}

and in your UserControl

public void BindData()
{
    // put here all your databinding stuff 
    // that is in page_load now ...
}

This is probably the best tutorial on lazy-loading ajax TabPanels:

这篇关于懒装载片与用户控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆