ARTICLE

Dynamically Loading UserControl Into Web Page Using ASP.NET

Posted by Lajapathy Arun Articles | ASP.NET Controls in C# April 08, 2012
In this article we are going to see how we can add a User Control dynamically to a web page with the help of ASP.Net and C#.
Reader Level:
 

Introduction

In this article we are going to see how we can add a User Control dynamically to a web page with the help of ASP.Net and C#.

Step 1: Go to File -> New ->Project

img01.gif

Step 2: Type the required name of the user control and click the Add button.

img02.gif

Step 3: You will get the markup for SampleUserControl.ascx as shown below:

Code

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

Step 4: You will get the code behind as follows:

Code

namespace UserControlSample
{
    public partial class SampleUserControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
    }
}

Step 5: Now add you controls into the User controls. Controls like TextBox and Label show a simple example. Note Controls can be placed just below the Control directive.

img03.gif

Step 6: Code Behind for dynamically loading a User Control:

using
System;

 namespace UserControlSample
  {
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        } 
        protected void Button1_Click(object sender, EventArgs e)
        {
            //Populate the form.
            SampleUserControl c1 =
            (SampleUserControl)LoadControl("SampleUserControl.ascx");
            c1.UserName = "Glenn";
             //Adding user control inside the form element.
            form1.Controls.Add(c1); 
           SampleUserControl c2 =
            (SampleUserControl)LoadControl("SampleUserControl.ascx"); form1.Controls.Add(c2);
        }
     }
  }

Step 7: Before clicking the Button shows below.

img04.1.gif

Step 8: After clicking the Button in default.aspx page, it dynamically adds the User Control twice as per the code written. Displays with Username in one control, to see the difference.

img05.gif

This helps to add the user control dynamically so we change the user control based on the user input.             

Login to add your contents and source code to this article
post comment
     

Hi,Thanks for the nice article.How do we handle post back from the user control? In the example how Say Hi button is not firing click event. Do you have example for that?Best Regards, Damodar

Posted by Damodar Karmacharya Mar 04, 2013

Have a nice day :)

Posted by Lajapathy Arun Apr 09, 2012

Really, Thanks for this article keep it up...

Posted by Jimmy Underwood Apr 08, 2012
COMMENT USING
PREMIUM SPONSORS
Over-C is a holistic consortium of communications and technology specialists. We build, deploy and market both business as well as consumer products and solutions.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts