Adding aTabPanel dynamically and making its ContentTemplate from ASPX

Question

Context:

An AJAX Control Toolkit TabContainer, where each TabPanel is generated with code behind, and its ContentTemplate is a custom control.

The custom control corresponds to what goes directly in the TabPanel's ContentTemplate:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TabContentTemplateTest.ascx.cs" Inherits="WebGUI.Controls.TabContentTemplateTest" %>

<asp:Label runat="server" ID="TabText" />

And code behind:

public partial class TabContentTemplateTest : UserControl, ITemplate
{
    public string Number { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        TabText.Text = Number;
    }

    public void InstantiateIn(Control container)
    {
        container.Controls.Add(this);
    }
}

Creation (code behind of TabContainerTest, having a TabContainer named SamplesTabContainer):

public string[] Numbers = { "zero", "one", "two", "three", "four" };

protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 0; i < 5; i++)
    {
        var tabContent = LoadControl("~/Controls/TabContentTemplateTest.ascx") as TabContentTemplateTest;
        tabContent.Number = Numbers[i];
        SamplesTabContainer.Tabs.Add(new TabPanel
        {
            HeaderText = i.ToString(),
            ContentTemplate = tabContent
        });
    }
}

The problem is that the content (here simplified to a label) doesn't show.

How can I generate the custom control from ASPX as a ContentTemplate and display it?

Answer 1

Setting the TabPanel's OnDemandMode to OnDemandMode.None forces the addition of the controls right away, which makes them display.

Answer 2

If you're using the asp:ScriptManager control, try using the ajaxToolkit:ToolkitScriptManager control instead.

I put together a test project and when using the asp:ScriptManager the TabPanel wouldn't display, though they were in the source html. I was also getting a javascript error, 'Sys.Extended is undefined', which led to numerous web search results spanning multiple versions of the ajax toolkit. A common suggestion was to switch script managers. Doing so fixed the visibility of the TabPanel and eliminated the javascript error as well.

Specifics of test project:
VS2010
ASP.Net web app using .Net 4
IIS Express
Installed AjaxControlToolkit version 4.1.7.725 using Nuget
TabContentTemplateTest.ascx identical to code and markup in original question
Default.aspx codebehind identical to code in original question
Default.aspx markup as follows

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
         CodeBehind="Default.aspx.cs" Inherits="WebGUI.Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ajaxToolkit:ToolkitScriptManager runat="server" ID="ajaxScriptManager" />
    <ajaxToolkit:TabContainer runat="server" ActiveTabIndex="0" 
                              ID="SamplesTabContainer">
    </ajaxToolkit:TabContainer>
</asp:Content>

Answer 3

I just see two issue with the code you shared:

• I didn't see you calling InstantiateIn() function after adding the tab.
• I would suggest using InstantiateIn(ref Control container)

Hope this helps.