Click here to Skip to main content
Click here to Skip to main content

Dynamic Loading of ASP.NET User Controls

, 4 Jun 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Demonstrates how to dynamically add User Controls to pages at runtime using the LoadControl method

Introduction

In addition to using Web Server controls in your ASP.NET web pages, you can create your own custom, reusable controls using the same techniques you use for creating ASP.NET web pages. These controls are called User Controls. A User Control is a kind of composite control that works much like an ASP.NET web page - you can add existing web server controls and markup to a User Control, and define properties and methods for the control. You can then embed them in ASP.NET web pages, where they act as a unit.

User Controls are semi-autonomous pages of HTML and underlying ASP.NET code that can be inserted into ASP.NET pages. As such, they are useful for adding blocks of functionality to pages.

Typical uses of User Controls are for use as page headers and footers. Unlike ASP.NET pages that have the .aspx file extension, User Controls typically have the .ascx file extension. Once created, in Visual Studio .NET, they can be included in a specific page by simply dragging the User Control onto the Design view of that page. Alternatively, they can be added to a page at Design time by including the following in the page's HTML. For example, the following line includes a SimpleControl User Control from the SimpleControl.ascx file:

<%@ Register src="~/usercontrols/SimpleControl.ascx" 
    tagname="SimpleControl" tagprefix="SimpleControl" %>

The User Control is then positioned on the page using the following tag:

<SimpleControl:SimpleControl id="ucSimpleControl" 
         runat="server"></SimpleControl:SimpleControl>

Although this procedure is satisfactory for content like headers and footers that will always be required on specific pages, it would be useful if there was a way of dynamically loading specific User Controls at run time.

Fortunately, it is possible to load User Controls onto a page by making use of the LoadControl method. This function has a straightforward syntax - it takes a single argument - the virtual path to the User Control page. For example, to load the SimpleControl User Control, the following C# code would be used within the Page_Load method, or you can use this on the Click event of the button:

usercontrols_SimpleControl ucSimpleControl = 
  LoadControl("~/usercontrols/SimpleControl.ascx") 
  as usercontrols_SimpleControl;

Once the User Control has been loaded, it can be added to the page by adding it to the Controls collection:

Placeholder1.Controls.Add(ucSimpleControl);

Using the Code

First, let's create a User Control and populate it with several controls. The User Control content looks like this:

<table>
    <tr>
        <td><asp:Label ID="label1" runat="server" 
            Text="First Name" ></asp:Label></td>
        <td> <asp:TextBox ID="txtFirstName" 
            runat="server"></asp:TextBox></td>
    </tr>
     <tr>
        <td><asp:Label ID="label2" runat="server" 
           Text="Last Name" ></asp:Label></td>
        <td> <asp:TextBox ID="txtLastName" 
           runat="server"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Button ID="btnPost"  runat="server" 
            Text="Send Info" OnClick="btnPost_Click" />
        </td>
    </tr>
</table>

Create a delegate just under the namespaces to handle the Click event in the Default.aspx page. After declaring the delegate, create the delegate instance which will be called from the virtual method of the btnPost's click.

public delegate void btnPost_Click(object sender, System.EventArgs e);

public partial class usercontrols_SimpleControl : 
       System.Web.UI.UserControl
{
    #region Public Event

    public event btnPost_Click btnPostClk;

    #endregion

    #region Public Properties

    public TextBox FirstName
    {
        get
        {
            return txtFirstName;
        }
        set
        {
            txtFirstName = value;
        }
    }

    public TextBox LastName
    {
        get
        {
            return txtLastName;
        }
        set
        {
            txtLastName = value;
        }
    }
    #endregion

    #region Vitual Methods

    protected virtual void OnbtnDelQtnMrClk(EventArgs e)
    {
        // Call btnPost_Click event delegate instance
        btnPostClk(this, e);
    }

    #endregion

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnPost_Click(object sender, EventArgs e)
    {
        //Call Virtual Method
        OnbtnDelQtnMrClk(e);
    }
}

Now, go to the ASPX page where you want to add the User Control and register the User Control by registering the tag in HTML view. The ASPX page content looks like this:

<%@ Register src="~/usercontrols/SimpleControl.ascx" 
    tagname="SimpleControl" tagprefix="SimpleControl" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>This is example of how to add usercontrol dynamically</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:Button ID="btnAddControl" runat="server" 
              Text="Click to add SimpleControl" 
              onclick="btnAddControl_Click" />
            <br />
            <asp:PlaceHolder runat="server" 
               ID="Placeholder1" ></asp:PlaceHolder>
            <br />
            <asp:Label ID="lblUser" 
              runat="server"></asp:Label>

    </div>
    </form>
</body>
</html>

To add the User Control on the Click event of "btnAddControl", add the following code to the code-behind:

protected void btnAddControl_Click(object sender, EventArgs e)
{
    // Create instance of the UserControl SimpleControl
    usercontrols_SimpleControl ucSimpleControl = 
      LoadControl("~/usercontrols/SimpleControl.ascx") 
      as usercontrols_SimpleControl;
    
    // Set the Public Properties
    ucSimpleControl.FirstName.Text = "Milind";
    ucSimpleControl.LastName.Text = "Chavan";

    //Create Event Handler for btnPost Click 
    ucSimpleControl.btnPostClk += 
            new btnPost_Click(ucSimpleControl_btnPostClk);

    //Add the SimpleControl to Placeholder
    Placeholder1.Controls.Add(ucSimpleControl);

    // Add the instance of the SimpleControl to Session Variable
    Session.Add((Session.Count + 1).ToString(), ucSimpleControl);

    // Set createAgain = true
    createAgain = true;
}

void ucSimpleControl_btnPostClk(object sender, EventArgs e)
{
   usercontrols_SimpleControl ucSimpleControl = 
               ((usercontrols_SimpleControl)(sender));
   lblUser.Text = "Welcome " + ucSimpleControl.FirstName.Text + 
                  " " + ucSimpleControl.LastName.Text;
}

The most important thing is, after the postback, the User Control vanishes from the page. So to maintain the User Control and its controls' properties as well as events, we need to add this instance of the User Control to the session variable shown above. To generate the User Control again on postback, we use the OnPreInit event:

// Declare 2 variable to handle user control after postback
const string controlID = "MyUserControl";
static bool createAgain = false;

protected Control GetPostBackControl(Page page)
{
    Control control = null;
    try
    {
        string ctrlName = page.Request.Params.Get("__EVENTTARGET");

        if (ctrlName != null && ctrlName != String.Empty)
        {
            control = page.FindControl(ctrlName);
        }
        else
        {
            ContentPlaceHolder cph = 
              (ContentPlaceHolder)page.FindControl("Main");
            for (int i = 0, len = page.Request.Form.Count; i < len; i++)
            {
                string[] ctl = page.Request.Form.AllKeys[i].Split('$');
                if (ctl.Length > 2)
                {
                    control = cph.FindControl(ctl[2]) 
                              as System.Web.UI.WebControls.Button;
                }

                if (control != null) break;
            }
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
    return control;
}

protected override void OnPreInit(EventArgs e)
{
    base.OnPreInit(e);

    Control control = GetPostBackControl(this.Page);

    // Check if the postback is caused by the button 
    // Titled "Click to Create a Dynamic Control"
    // OR
    // createAgain field is true 
    // which means a call is made to the server while the 
    // user control is active  

    if ((control != null && control.ClientID == 
                    btnAddControl.ClientID) || createAgain)
    {
        //should be set before the CreateUserControl method
        createAgain = true;

        CreateUserControl(controlID);
    }
}

protected void CreateUserControl(string controlID)
{
    // createAgain field is set to true in the OnPreInit method
    // when the 'Create User Control' button is clicked 

    // the createAgain field is used to check if the
    // user control is on the page before the call 
    // if so create the control again and add it to the
    // Control Hierarchy again
    try
    {
        if (createAgain && Placeholder1 != null)
        {
            if (Session.Count > 0)
            {
                Placeholder1.Controls.Clear();
                for (int i = 0; i < Session.Count; i++)
                {
                    switch (Session[i].ToString())
                    {
                        case "ASP.usercontrols_simplecontrol_ascx":
                        {
                            // Create instance of the UserControl SimpleControl
                            usercontrols_SimpleControl ucSimpleControl = 
                              LoadControl("~/usercontrols/SimpleControl.ascx") 
                              as usercontrols_SimpleControl;

                            // Set the Public Properties
                            ucSimpleControl.FirstName.Text = 
                              ((usercontrols_SimpleControl)(Session[i])).FirstName.Text;
                            ucSimpleControl.LastName.Text = 
                              ((usercontrols_SimpleControl)(Session[i])).LastName.Text;

                            //Create Event Handler for btnPost Click 
                            ucSimpleControl.btnPostClk += 
                              new btnPost_Click(ucSimpleControl_btnPostClk);

                            //Add the SimpleControl to Placeholder
                            Placeholder1.Controls.Add(ucSimpleControl);
                            break;
                        }
                    }
                }
            }
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

I know this is one of the known techniques, but I hope it has given you another way to think about dynamically adding controls. Enjoy!

History

  • 18th February, 2010: Initial post
  • 4th June, 2010: Uploaded VB source code

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Milind R Chavan
Software Developer (Senior)
Netherlands Netherlands
No Biography provided

Comments and Discussions

 
QuestionFor adding and deleting use uc name instead of a number PinmemberZath14-Feb-14 8:59 
QuestionHow to delete the one of the usercontrol when multiple usercontrols are available in the page Pinmemberrahul_saud10-Sep-13 2:48 
AnswerRe: How to delete the one of the usercontrol when multiple usercontrols are available in the page PinmemberZath14-Feb-14 9:02 
SuggestionStatic UserControls vs. dynamic UserControls? PinmemberPham Dinh Truong17-Apr-13 22:11 
QuestionBetter loading speed or just adding complexities for coding? PinmemberPham Dinh Truong17-Apr-13 22:05 
GeneralMy vote of 3 PinmemberEhsan yazdani rad26-Mar-13 12:55 
QuestionDynamic User control Pinmemberparichha837-Aug-12 3:38 
AnswerRe: Dynamic User control PinmemberMilind R Chavan7-Aug-12 4:03 
GeneralRe: Dynamic User control PinmemberNutan Ranee26-Sep-12 4:31 
GeneralRe: Dynamic User control PinmemberSURFThru18-Nov-12 1:14 
QuestionDynamically loading user controls.. Theory to be reinvented Pinmemberblpandya26-Jul-12 9:57 
AnswerRe: Dynamically loading user controls.. Theory to be reinvented PinmemberMilind R Chavan26-Jul-12 10:42 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya26-Jul-12 11:17 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya27-Jul-12 5:01 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented PinmemberMilind R Chavan27-Jul-12 5:10 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya27-Jul-12 5:23 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented PinmemberMilind R Chavan27-Jul-12 6:04 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya31-Jul-12 8:35 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya1-Aug-12 8:55 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented PinmemberMilind R Chavan1-Aug-12 9:28 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented Pinmemberblpandya1-Aug-12 11:06 
GeneralRe: Dynamically loading user controls.. Theory to be reinvented PinmemberMahesh_Bhosale25-Mar-13 21:11 
QuestionDynamiccaly Loading User Control PinmemberMember 816375525-Mar-12 22:42 
QuestionAdding a User Control dynamically to a user control. Pinmemberabhishek salvi16-Mar-12 21:59 
hi,
 
How can i add a user control to a another user control on click of a button which is present in the parent user control.
 
eg:
UC1 is a parent user control.
UC1 has some text boxes and a button.on click of the button in UC1 another user control UC2 should open up.and this should repeat when i click the button evrytime.
Can u please help....and provide me the code...
 
Thank in Advance....
AnswerRe: Adding a User Control dynamically to a user control. PinmemberMilind R Chavan17-Mar-12 0:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 4 Jun 2010
Article Copyright 2010 by Milind R Chavan
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid