Click here to Skip to main content
15,884,472 members
Articles / Web Development / ASP.NET / ASP.NET4.0
Tip/Trick

Dynamically create multiple web user controls and use them on a page

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
16 Jan 2012CPOL2 min read 25.1K   3   2
Dynamically create multiple web user controls and use them on a page
We generally create web user controls when we need to user same group of controls and appearance in multiple pages.
We simply register the control in page and use that like any other control. However there are situations when we can't decide it during design-time whether we need this control or not and conditionally during run-time we may need to show a web user control.
This tip is for the same purpose
  • To Add web user control on a page in run-time.
  • To Access the properties (control and custom) of such user control in run-time.
  • To Search and access this dynamically added control.

Adding a web user control on a page in run-time.

First we need a container which can contain another control.
We can add controls to page itself however for better placement we can add a container at the appropriate location and then add controls dynamically into this per your requirements and conditions. Here we will take panel [^] for this purpose.

Generally when we want to add a control in run-time, we just create an object of that class, set the properties and add that control to control collection of container.
However in case of web user control, this approach will not work and will give us null reference exception if we try to access properties exposed by web user control.

For web user control, we need to first load it in page through LoadControl function of Page Class.
C#
Control objCtrl = Page.LoadControl("UserControl/MyWebUserControl.ascx");


Now we have loaded the control in our page, we need to set properties for this.

Accessing properties of dynamically added web user control

We can directly set the generic control properties like ID or visibility.
C#
objCtrl.ID = "MyControl1";
objCtrl.Visible=false;


However if we have any custom property exposed in web user control, it won't list in intellisense, for that we need to typecast this control object with the class of web user control.

C#
((UserControl_MyWebUserControl)(objCtrl)).CustomProperty="Value";

Here my control class name is "UserControl_MyWebUserControl" and I have exposed a property in that with name "CustomProperty".

After setting all the required properties, we need to add this control object to control collection of parent control (panel in our case):
C#
pnlControlContainer.Controls.Add(objCtrl);


We are done with dynamically adding web user control on our page. This was all done at declaration time, now we can have a requirement to access and manipulate this control later in code.

Searching and Accessing dynamically added web user control in run-time.

We know the parent control, we can access our web user control based on its index in control collection of parent control however using ID is the best practice (we have already set the ID "MyControl1" for our control).

Searching for control and using it.
C#
if (pnlControlContainer.FindControl("MyControl1") != null)
{
    UserControl_MyWebUserControl objControl = ((UserControl_MyWebUserControl)pnlCouponArea.FindControl("MyControl1"));
    objControl.Visible = true;
}

License

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


Written By
Team Leader
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalgyutyutyuyu Pin
sdf sd17-Jan-12 19:03
sdf sd17-Jan-12 19:03 
Generalfghfhfghgfh Pin
sdf sd17-Jan-12 19:03
sdf sd17-Jan-12 19:03 

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

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