Lazy loading tabs with user controls

Question

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;
        }
    }

Answer 1

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:

• http://mattberseth.com/blog/2007/07/how_to_lazyload_tabpanels_with.html