How do I load two ASP.NET UserControls on Demand?

Question

I want load two user controls on demand.

 asp:UpdatePanel ID="UpdatePanel1" runat="server"
    ContentTemplate
        asp:Button ID="Button1" runat="server" Text="Button" UseSubmitBehavior="false"
         OnClick="Button1_Click" /
        div id='Div_UserControlPlace' enableviewstate="true" runat="server" 
        /div
    /ContentTemplate
    Triggers
        asp:PostBackTrigger ControlID="Button1" /
    /Triggers
/asp:UpdatePanel
asp:UpdatePanel ID="UpdatePanel2" runat="server"
    ContentTemplate
        asp:Button ID="Button2" runat="server" Text="Button" UseSubmitBehavior="false" 
        OnClick="Button2_Click" /
        div id='Div_UserControlPlace2' enableviewstate="true" runat="server" 
        /div
    /ContentTemplate

aspx.cs

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
    Control FeaturedProductUserControl = new Control();
    FeaturedProductUserControl = LoadControl("WebUserControl1.ascx");
    FeaturedProductUserControl.EnableViewState = true;
    Div_UserControlPlace.Controls.Add(FeaturedProductUserControl);
}

protected void Button2_Click(object sender, EventArgs e)
{
    Control FeaturedProductUserControl2 = new Control();
    FeaturedProductUserControl2 = LoadControl("WebUserControl2.ascx");
    FeaturedProductUserControl2.EnableViewState = true;
    Div_UserControlPlace2.Controls.Add(FeaturedProductUserControl2);

}

I load the first user control by clicking on the first button - this works properly but when I click on the other button to load the second UserControl, the first UserControl disappears and the second UserControl loads.

Thanks IFA_User

Answer 1

You should use the Placeholder control to dynamically add your controls to the form.

Answer 2

Take a look at my last responses about dynamic controls:

OnClick event of dynamically created LinkButtons is not working

Dynamically Added DropDownlists Are Not Firing SelectedIndexChanged Event

Dynamically create an ImageButton

Now I already have some code working for demo purpose, each dynamic user controls keeps its state across post backs

This is the output:

ASPX

    <asp:PlaceHolder runat="server" ID="addresses" /><br />
    <asp:Button Text="Add Address" runat="server" ID="addAddress" OnClick="addAddress_Click" />

ASPX Code behind

    protected void Page_PreLoad(object sender, EventArgs e)
    {
        for (int i = 0; i < this.DynamicControlsCount; i++)
        {
            var c = this.LoadControl("~/AddressControl.ascx");
            this.addresses.Controls.Add(c);
        }
    }

    protected void addAddress_Click(object sender, EventArgs e)
    {
        this.DynamicControlsCount++;
        var c = this.LoadControl("~/AddressControl.ascx");
        this.addresses.Controls.Add(c);
    }

    protected int DynamicControlsCount
    {
        get
        {
            if (this.ViewState["ac"] == null)
            {
                return 0;
            }
            return (int)this.ViewState["ac"];
        }
        set
        {
            this.ViewState["ac"] = value;
        }
    }

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddressControl.ascx.cs" Inherits="WebApplication1.AddressControl" %>

<asp:Panel ID="Panel1" runat="server" GroupingText="Address" DefaultButton="btnSave">
    Street: <asp:TextBox runat="server" ID="txtStreet" /><br />
    City: <asp:TextBox runat="server" ID="txtCity" /><br />
    <asp:Button Text="Save" runat="server" ID="btnSave" OnClick="btnSave_Click" />
</asp:Panel>

<asp:Panel runat="server" GroupingText="Address Summary" Visible="false" ID="summary">
    <asp:Label ID="lblStreet" runat="server" /><br />
    <asp:Label ID="lblCity" runat="server" />
</asp:Panel>

ASCX Code behind

    protected void btnSave_Click(object sender, EventArgs e)
    {
        this.summary.Visible = true;
        this.lblCity.Text = "Selected city: " + this.txtCity.Text;
        this.lblStreet.Text = "Selected street: " + this.txtStreet.Text;
    }

Answer 3

When a user control is created in the HTML, asp.net will persist across postbacks without any user interaction. But if you are loading them programatically (dynamically), they will not persist accross postbacks. So if you load them programmatically, you have the added task of persisting them programmatically as well. Use the ViewState (or Session I suppose) to store what has been loaded and perhaps any other necessary information that needs to be loaded between postbacks. Every single postback will require you to reload every control or else they will disappear.

Answer 4

There are couple of ways of doing it:

1. U can load the UserControls using Ajax. Benefit of using Ajax, is ur page does not get post back, thus for example, on click event of Button1, call a ajax(traditional/Jquery) to load UserControl1, and on button click of Button2 User control2.

2. Put the two button in two different updated panel, by doing this the click event will only refresh a part of ur page.

3. U have to save somewhere (ViewState/Session),which buttons are clicked, and upon clicking of any button check the value of that variable, and explicit load the control.

Points to note - If u want to get ur data back when ur page made a complete postback, then u have to add the controls keeping in mind the Page load event cycle.