Dynamic Controls in ASP.NET
By Scott Mitchell
For More Information on Working with Dynamically Created Controls... |
---|
After you have read this article, consider reading the following articles for a more in-depth look at working with dynamically
created controls in an ASP.NET Web page:
|
Introduction
If you're reading this article, you've no doubt created an ASP.NET Web page with various Web controls. Typically one creates Web controls statically, by explicitly specifying them in the HTML section of an ASP.NET Web page. For example, one might create an ASP.NET Web page that contains an HTML message and a TextBox, which would contain the following code:
What is your name?
|
The code above specifies two Web controls:
- A LiteralControl (the "What is your name" HTML gets converted into a LiteralControl when the ASP.NET Web page is requested from a browser for the first time), and
- A TextBox Web control
The above code explicitly specifies the controls that should appear on the ASP.NET Web page (granted, the HTML being converted into a LiteralControl is a bit implicit). Did you know that you can dynamically add controls to an ASP.NET Web page? In this article we'll look at how to create controls, add them to an ASP.NET page dynamically, and, finally, how to enumerate through the controls on a page.
The Page
Class
When an ASP.NET Web page is first visited by a user it is converted into a class that inherits the
Page
class. If you use code-behind you're already aware of this - your code-behind class
has to explicitly inherit the Page
class. By inheriting the Page
class,
the ASP.NET Web page has access to the various useful properties, methods, and events of the
Page
class.
For example, the Page_Load
event handler is triggered when the
Page
class's Load
event is fired. Similarly, you've no doubt used a number
of the Page
class's properties, such as IsPostBack
, IsValid
,
Request
, Response
, Session
, Cache
, etc.
The Page
class is derived (indirectly) from the Controls
class, which
has a property called Controls
, which is a collection representing the controls contained
by the Page
class, which is simply the controls on the ASP.NET Web page. Hence, to
add controls to an ASP.NET Web page we will add them to this collection.
If the above three paragraphs have utterly confused you, don't worry! A couple examples should help clear things up.
Adding a Dynamic Control to an ASP.NET Web Page
In order to add a control to an ASP.NET Web page we first need to create an instance of the control we wish to add. For our example, we'll add a Label control to the Web page. Hence, we first need to create the Label control, which we can do in our
Page_Load
event handler like so:
|
Pretty simple, eh? Next, we need to set the various Label properties we're interested in. For this
example, let's set the Text
and the Font.Bold
property:
|
Finally, we need to add this control to the Web page. Not surprisingly, the Controls
property
has an Add
method, which is demonstrated in the following code:
|
Take a moment to check out the live demo. Note that the control is
added to the end of the Web page. This is because by the time the Page_Load
handler
has fired the other controls on the page (the LiteralControl that comprises the HTML markup) have already been
added. The Add
method adds the Label control to the end of the Controls
collection.
While the Controls
collection contains an AddAt
method, allowing the developer
to specify specifically where in the Controls
collection the new control should be added,
if we want the control to appear in a fixed location within the Web page (say, between the two
<HR>
s (horizontal lines) in the live demo), we have to somehow break up the
HTML markup so that it is comprised of two LiteralControls instead of one, so we can place our
Label control in the correct spot (as opposed to the very end of the HTML content or the very beginning).
To accomplish this, we need to use a PlaceHolder Web control, specifying explicitly where in the ASP.NET Web page it belongs. For example, imagine we have the following HTML in our Web page:
|
and we want to add our Label control to the Web page such that it appears between the two <HR>
tags. To accomplish this, we first add a PlaceHolder control specifically where we want the Label
control to appear:
|
To complete this exercise, in the Page_Load
event handler we replace
Controls.Add(lblMessage)
with LabelPlaceHolder.Controls.Add(lblMessage)
.
This adds the Label control to the PlaceHolder's Controls
collection. The reason the
PlaceHolder control has a Controls
property is because it is derived from the Control
class - in fact, all ASP.NET controls are. As aforementioned, the Control
class
has a Controls
property, which is a collection of all of the children controls in the
control at hand. Hence, we are adding the Label control lblMessage
to the PlaceHolder control.
(See the live demo for the complete source code...)
In Part 2 we'll look at how to enumerate through the controls in an ASP.NET Web page. Also, we'll look at some real-world applications for dynamically adding controls!