Working with dynamic controls - Basics

Working with dynamic controls is real pain for ASP.NET developer. First it require to create instance of the control, then manually configure various properties through code, and then to look for a container control where you can drop this dynamic control instance. With that, it also require to recreate same dynamic control again on every PostBack.

To start with a simple example for working with dynamic control:

Label dynamicLabel = new Label();
dynamicLabel.ID = "dynamicLabel";
dynamicLabel.Width = Unit.Pixel(200);
dynamicLabel.Text = "Test Text";
Page.Controls.Add(dynamicLabel);

Above code will simply add a dynamic label in Page.

But how about positioning dynamic control to the specific location in the page? That should be easy enough, we can use Top and Left property of this control. But if you review available properties of Label control we create above, there is no Top or Left property available. So then how can we set its location?? Well, through style attribute of control. To do that, you also have to set position attribute as absolute. Something like following:

Label dynamicLabel = new Label();
dynamicLabel.ID = "dynamicLabel";
dynamicLabel.Width = Unit.Pixel(200);
dynamicLabel.Style.Add("POSITION", "absolute");
dynamicLabel.Style.Add("TOP", "100px");
dynamicLabel.Style.Add("LEFT", "200px");
dynamicLabel.Text = "Test Text";
Page.Controls.Add(dynamicLabel)

Alternatively, if you already have a container control in predetermined position in the page, you can add this dynamic control to that control instead of adding it to page. Dynamic control will then render inside that container control.

For example, if page is already have well positioned TableRow and we want to add our dynamic control to this container, then we can modify our code as following:

Label dynamicLabel = new Label();
dynamicLabel.ID = "dynamicLabel";
dynamicLabel.Width = Unit.Pixel(200);
dynamicLabel.Text = "Test Text";
trTopHeader.Controls.Add(dynamicLabel);

So far it’s working great for Label control. Let’s use same code for adding TextBox control. Here the modified code:

TextBox dynamicTextBox = new TextBox();
dynamicTextBox.ID = "dynamicdynamicTextBox";
dynamicTextBox.Width = Unit.Pixel(200);
Page.Controls.Add(dynamicTextBox);

When you run this code, you will going to get a very weird error message:

Control ‘dynamicdynamicTextBox’ of type ‘TextBox’ must be placed inside a form tag with runat=server.

As error message clearly indicating, we can only add TextBox control inside Form tag and not in Page. We need to make the required modification in our code to that our dynamic control will add inside Form container instead of Page. Here is the modified code:

TextBox dynamicTextBox = new TextBox();
dynamicTextBox.ID = "dynamicdynamicTextBox";
dynamicTextBox.Style.Add("POSITION", "absolute");
dynamicTextBox.Style.Add("TOP", "100px");
dynamicTextBox.Style.Add("LEFT", "10px");
dynamicTextBox.Width = Unit.Pixel(200);
Page.FindControl("Form1").Controls.Add(dynamicTextBox);

With that, we also need to add runat attribute as server to Form control. Here is the modified rendered HTML code:

<form id="Form1" method="post">

</form>

I have added a Button control to see how dynamic control behaves with PostBack happens. So if you run this code, you see that application has dynamically added TextBox control on the page. Also check the location of rendered HTML code for dynamic control on page using View Source for browser. It's inside Form1 tag.

As I have mentioned before, if you place this dynamic creation code snippet inside IsPostBack if condition block, dynamic controls will not get rendered on the page after PostBack.