Search code examples
c#asp.netuser-controlsdynamic-controlsasp.net-controls

Adding User Control dynamically


I have made a usercontrol to be used on a website. I am trying to add this user control on a click of a button. I was testing it by adding it dynamically to the page but nothing is showing.

my ascx file is

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

<table>
<tr>
    <td><asp:TextBox ID="txtsize" runat="server"></asp:TextBox></td>
    <td>
        <asp:DropDownList ID="ddlRoomType" runat="server">
            <asp:ListItem>Master Bedroom</asp:ListItem>
            <asp:ListItem>Bedroom</asp:ListItem>
            <asp:ListItem>Bathroom</asp:ListItem>
            <asp:ListItem>Kitchen</asp:ListItem>
            <asp:ListItem>Powder Room</asp:ListItem>
            <asp:ListItem>Dining Room</asp:ListItem>
            <asp:ListItem>Store Room</asp:ListItem>
            <asp:ListItem>Walkin Closet</asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList id="ddlLevel" runat="server">
            <asp:ListItem>Basement</asp:ListItem>
            <asp:ListItem>Ground Floor</asp:ListItem>
            <asp:ListItem>First Floor</asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:TextBox ID="txtFlooring" runat="server"></asp:TextBox>
    </td>
    <td>
        <asp:TextBox ID="txtclosetType" runat="server"></asp:TextBox>
    </td>
</tr>
</table>

with RoomsUserControl.ascx.cs file

public partial class RoomsUserControl : System.Web.UI.UserControl
{

    public string RoomSize
    {
        get
        {
            return txtsize.Text;
        }

        set
        {
            txtsize.Text = value;
        }
    }

    public string RoomType
    {
        get
        {
            return ddlRoomType.SelectedItem.ToString();
        }

        set
        {
            ddlRoomType.SelectedItem.Text = value;
        }
    }

    public string RoomLevel
    {
        get
        {
            return ddlLevel.SelectedItem.ToString();
        }

        set
        {
            ddlLevel.SelectedItem.Text = value;
        }
    }

    public string RoomFlooring
    {
        get
        {
            return txtFlooring.Text;
        }

        set
        {
            txtFlooring.Text = value;
        }
    }

    public string RoomCloset
    {
        get
        {
            return txtclosetType.Text;
        }

        set
        {
            txtclosetType.Text = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Test page code is

protected void Page_Load(object sender, EventArgs e)
    {
        RoomsUserControl r1 = new RoomsUserControl();
        r1.ID = "Room1";
        pl1.Controls.Add(r1);

        RoomsUserControl r2 = new RoomsUserControl();
        r2.ID = "Room2";
        pl1.Controls.Add(r2);

        RoomsUserControl r3 = new RoomsUserControl();
        r3.ID = "Room3";
        pl1.Controls.Add(r3);


    }

When I debug panel pl1 contains three usercontrols but it is not showing on the form.


Solution

  • You need to change the way you instantiate the user control.Here's how you should do it:

    protected void Page_Load(object sender, EventArgs e)
    {
        RoomsUserControl r1 = (RoomsUserControl)Page.LoadControl("~/RoomsUserControl.ascx");
        r1.ID = "Room1";
        pl1.Controls.Add(r1);
    
        RoomsUserControl r2 = (RoomsUserControl)Page.LoadControl("~/RoomsUserControl.ascx");
        r2.ID = "Room2";
        pl1.Controls.Add(r2);
    
        RoomsUserControl r3 = (RoomsUserControl)Page.LoadControl("~/RoomsUserControl.ascx");
        r3.ID = "Room3";
        pl1.Controls.Add(r3);
    }