Browse DevX
Sign up for e-mail newsletters from DevX


Dynamically Adding Controls : Page 3

Adding controls at runtime provides the flexibility to design user interfaces that can be different things to different users. By the end of this article you'll be using multiple Placeholder controls to build a fexible template page.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Dynamically Adding User Controls
To start, you'll create a new Web Form and you'll add three controls: a descriptive label, a button that will contain the code to add the user control, and a Placeholder control (see Figure 2).

Next, you'll create a user control named PlaceHolderDemoUserControl that you'll dynamically add to the page you just created. The user control consists of an HTML table and Web controls to create a typical data entry form (see Figure 3).

Figure 2. The PlaceholderDemo Page: This page contains the phDemo Placeholder control and a button that, when clicked, adds a user control to phDemo.
Figure 3. The PlaceholderDemoUserControl: This user control will be loaded into the phDemo placeholder control at runtime.
With your user control created it's time to write the code that will add it to your form at runtime (see Listing 1).

There are three key lines in Listing 1. The first creates the oCtrlDemo variable.

Public oCtrlDemo As Control

The oCtrlDemo variable is the control that is added to the Placeholder control. The second line loads the user control into the oCtrlDemo variable.

Me.oCtrlDemo = _ LoadControl("PlaceholderDemoUserControl.ascx")

And the third key line adds the oCtrlDemo control into the phDemo placeholder.


That's it. When the user clicks on the button the PlaceholderDemoUserControl is loaded into the oCtrlDemo control and then it is added to the phDemo placeholder by calling the Add method on the phDemo Controls collection.

While the Add method is great for adding a control at runtime, it doesn't offer you a lot of help in designating where the control will appear on the page.
Sooner or later you are going to want to reference properties on the user control. Working with properties native to the Control class that the oCrtlDemo control is based on is very straightforward. You just assign or retrieve the property value like you would with any other object.

Private Sub Button1_Click(_ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles Button1.Click Me.oCtrlDemo = _ LoadControl("PlaceholderDemoUserControl.ascx") Me.oCtrlDemo.Visible = False Me.phDemo.Controls.Add(Me.oCtrlDemo) End Sub

You can see in the code above that the Visible property of the oCtrlDemo object has been set to False. Since Visible is a native property of the Control class this will work fine. The end result of this code is that the oCtrlDemo control will be added to the placeholder but it will not be visible.

Working with the properties native to the Control class is all well and good, but let's add a custom property named DemoProp to the PlaceholderDemoUserControl (see Listing 2). It just takes a simple step in order to access the DemoProp property. You'll covert the oCtrlDemo class to the type of class you added to it, namely the PlaceholderDemoUserControl. The following code demonstrates how to do this.

Private Sub Button1_Click(_ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles Button1.Click Me.oCtrlDemo = _ LoadControl("PlaceholderDemoUserControl.ascx") CType(Me.oCtrlDemo, _ PlaceholderDemoUserControl).DemoProp = 10 Me.phDemo.Controls.Add(Me.oCtrlDemo) End Sub

In this code, the key is to make sure that you convert the oCtrlDemo object from a plain Control object into an object of type PlaceholderDemoUserControl, so you'll use the CType() function. Once you're done you can access the custom property, DemoProp.

I'll suggest one more change here just to drive home the point of working with properties on user controls. In this next code snippet, I'll add a line to the Page_Load method of the PlaceholderDemoControl user control that will set the Age textbox to the value in the DemoProp property.

Private Sub Page_Load(_ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load Me.txtAge.Text = Me.DemoProp End Sub

As you've seen so far, working with the Placeholder control and dynamically adding controls at runtime is not that difficult. Next, you can take what you've learned and extend it into a page template.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date