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: Working with Dynamically Created Controls Looks at how to find a particular dynamically created control, and how to set/read its properties. Also examines how to iterate through all dynamically created controls on a page. Dynamic Web Controls, Postbacks, and View State Examines using dynamic Web controls that can fully participate in the standard page lifecycle. Shows when to add controls programmatically so that their view state and values are persisted correctly across postback.

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? <asp:textbox runat="server" id="txtName" />

The code above specifies two Web controls:

1. 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
2. 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:

<script runat="server" language="VB"> sub Page_Load(sender as Object, e as EventArgs) Dim lblMessage as New Label() ...

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:

lblMessage.Text = "Hello, World!" lblMessage.Font.Bold = True

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:

Controls.Add(lblMessage) end sub </script>

[View a Live Demo!]

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:

Blah blah blah <hr> <hr> Blah blah blah

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:

Blah blah blah <hr> <asp:PlaceHolder runat="server" id="LabelPlaceHolder" /> <hr> Blah blah blah

[View a Live Demo!]

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!

Read Part 2!