Issues with dynamic loading of controls

[Kurt]

I am a newer web developer.  I am working with ASP.NET 4  and C# in visual studio 2012. Also, I am using the latest version of the UI controls for ASP.NET.

I have a page where I need to be able to load a bunch of user controls(ascx pages).  I used the following example :
http://demos.telerik.com/aspnet-ajax/ajax/examples/common/loadingusercontrols/defaultcs.aspx
to start building what I needed. I have 6-7 different controls but for this question I am going to relate to only 3 of them.

I have a master page that I am building off of.  That master page has the RadScriptManager and RadAjaxPanel.  The panel is set up as follows:

<div class="contentContainer">
    <div class="contentPanel">
        <telerik:RadAjaxPanel runat="server">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </telerik:RadAjaxPanel>
    </div>
</div>

Then, in my page I have the following:

<telerik:RadAjaxPanel runat="server">
    <div class="tabsContainer">
        <asp:LinkButton ID="lblDetails" runat="server" CssClass="headerTabItem" Text="Details"  />
        <asp:LinkButton ID="lblDrafts" runat="server" CssClass="headerTabItem" Text="Drafts"/>
        <asp:LinkButton ID="lblFees" runat="server" CssClass="headerTabItem" Text="Fees"/>
    </div>
    <div class="contentContainer">
        <div class="panelContent">
            <asp:Panel ID="displayPanel" runat="server"/>
        </div>
    </div>
        <div class="controlsContainer">
        </div>
</telerik:RadAjaxPanel>

Then my code behind is as follows:

    private string LatestLoadedControlName
    {
        get
        {
            return (string)ViewState["LatestLoadedControlName"];
        }
        set
        {
            ViewState["LatestLoadedControlName"] = value;
        }
    }

    #endregion


    #region Events

    /// <summary>
    /// Required method for Designer support - do not modify
    /// the contents of this method with the code editor.
    /// </summary>
    private void InitializeComponent()
    {
        lblDetails.Click += new System.EventHandler(this.lb_Details_Click);
        lblDrafts.Click += new System.EventHandler(this.lb_Drafts_Click);
        lblFees.Click += new System.EventHandler(this.lb_Fees_Click);
        lblPayments.Click += new System.EventHandler(lb_Payments_Click);
        lblDeposits.Click += lb_Deposits_Click;
        lblTransactions.Click += lb_Transactions_Click;
        lblNotes.Click += lb_Notes_Click;
        lblStatements.Click += lb_Statements_Click;

    }



    /// <summary>
    /// Handles the Load event of the Page control.
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadUserControl(LatestLoadedControlName ?? "ClientDetail.ascx");
        }


    }

    override protected void OnInit(EventArgs e)
    {
        InitializeComponent();
        base.OnInit(e);
    }


    protected void Page_PreRender(object sender, EventArgs e)
    {

    }

    #endregion Events

    private void lb_Details_Click(object sender, System.EventArgs e)
    {
        LoadUserControl("ClientDetail.ascx");
    }

    private void lb_Drafts_Click(object sender, System.EventArgs e)
    {
        LoadUserControl("Drafts.ascx");
    }

    private void lb_Fees_Click(object sender, System.EventArgs e)
    {
        LoadUserControl("Fees.ascx");
    }

    /// <summary>
    /// Loads the user control.
    /// </summary>
    /// <param name="controlName">Name of the control.</param>
    public void LoadUserControl(string controlName)
    {

        if (!controlName.Contains(".ascx"))
        {
            //TODO: Make this better with substring
            controlName = controlName.Replace("MainContent_", "");
            controlName += ".ascx";
        }

        if (LatestLoadedControlName != null)
        {
            Control previousControl = displayPanel.FindControl(LatestLoadedControlName.Split('.')[0]);

            if (!Object.Equals(previousControl, null))
            {
                this.displayPanel.Controls.Remove(previousControl);
            }
        }

        string userControlID = controlName.Split('.')[0];

        Control targetControl = displayPanel.FindControl(userControlID);

        if (Object.Equals(targetControl, null))
        {
            UserControl userControl = (UserControl)this.LoadControl(controlName);

            //slashes and tildes are forbidden
            userControl.ID = userControlID.Replace("/", "").Replace("~", "");

            this.displayPanel.Controls.Add(userControl);

            LatestLoadedControlName = controlName;
        }

    }

}

It will load pages the first time.  I can then also swap drafts and fees but I can not return to the details page.  In my debugging I am not seeing it ever finding the old control and removing it.  At this point I am at a loss.  

Am I going down the right path?  Should I do this a different way?

Thanks for your time in advance.

[Andrey]

Hello,

Most probably the problem comes from the nested RadAjaxPanel controls. Could you try to remove the RadAjaxPanel control around the ContentPlaceHolder control and check whether the issue still replicates? Another thing is to set the EnableAjax property of the inner RadAjaxPanel to false and check again.

Regards,
Andrey
Telerik