http://aspnet.4guysfromrolla.com/articles/081402-1.aspx
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!
Dynamic Controls in ASP.NET, Part 2
In Part 1 we examined how to add controls to an ASP.NET Web page, and how to specify the precise location of the control using a PlaceHolder control. In this part we'll examine how to enumerate through the controls on a page and some real-world uses of dynamically adding controls to an ASP.NET Web page.
Enumerating through the Controls on an ASP.NET Web Page
Since the Controls
property is a collection that supports the IEnumerable
interface, you can simple iterate through the collection using a For Each ... Next
loop in VB.NET or a foreach
loop in C#. (For the remainder of this article I will be using C# code samples.) To loop through the controls in the Page
, simply use the following code:
|
Take a moment to view the live demo. You'll note that the controls listed to be in the page are:
- LiteralControl
- Label
- LiteralControl
- HtmlForm
- ResourceBasedLiteralControl
You may be wondering where the TextBox control is, and why it isn't listed on the live demo. This is because the TextBox is a child control of the Web Form control (the HtmlForm control). In order to view all of the controls on the Web page, we must iterate through the Controls
collection, and at each control, check to see if the control has any children controls; if it does, we need to iterate recursively through its children controls, applying the same logic. (In order to determine if a control has children controls, we can simply check to see if the control's Controls
collection's Count
property is greater than 0.)
What is the ResourceBasedLiteralControl? |
---|
I found myself wondering this very thing when I first viewed the live demo. There's no mention of a ResourceBasedLiteralControl in the docs and a search on Google revealed nothing helpful. I turned to the ASP.NET Forums and got an answer from DmitryR, an ASP.NET Team member. DmitryR said:
[The choice of using a ResourceBasedLiteralControl vs. a LieralControl is] based on size, it is a perf optimization -- static HTML of size over 1K(?) ends up as a utf-8 encoded resource, saving the conversion cost and string size. |
The following code example illustrates how to recursively iterate through all of the controls on the page. It utilizes recursion - if you are unfamiliar or rusty with recursion, I'd recommend that you read Recursion - Why It's Cool first.
|
Ok, this is Neat, but is it Useful?
Hopefully you've found the material that we've covered thus far to be interesting, if nothing else. But, if you're like me, when you first hear about this topic you may find yourself thinking, "Well, yeah, this is neat and all, but when in the world would I use it?" Personally I have yet to use it in a real-world application, but can envision a number of potential uses.
Imagine that you want to have surveys or questionnaires on your Web site. Ideally each survey would have a database record, and a set of rows indicating what the questions were and what types of questions they were. For example, you might have a survey that had three questions: one a Yes/No, one a write-in, and one being a selection from five potential options. (In this case you'd need a couple of DropDownLists and a TextBox.) In any event, rather than have to create a new ASP.NET Web page for each potential survey, you could create one generic page that accepts a survey ID through the querystring, and then dynamically adds the appropriate questions and controls accompanying the questions. See? A useful, real-world application of the material we just covered! ;-)
Conclusion
In this article we examined how to dynamically add controls to an ASP.NET Web page. Furthermore, we looked at how to iterate through the Controls
collection as well as how to recursively iterate through the entire set of controls on a page. For more information on working with dynamically added controls, be sure to read: Working with Dynamically Created Controls.
Happy Programming!