Working with dynamic controls – Basics

Working with dynamic controls in ASP.NET is real pain for developer. First you have to create instance of control, then to configure all properties of control through code and then to look for any container control where you can drop this dynamic control. Interestingly, you also have to recreate same dynamic control on every PostBack.

Let’s start will simple example to work with dynamic control:

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

This code will simply add a dynamic label in Page.

But how we can position this control to specific location in the page? That should be easy, we can use Top & Left property of this control! But if you check the properties of Label, there is no Top or Left property available. So then how we can set its location?? Well, using style attribute of control. But for that you also have to set control position style as absolute. Like this:

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 any 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 render inside that container control.

Suppose page is already having well positioned TableRow and we want to add our dynamic control to this container then we can modify our code as:

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 snippet for adding TextBox control in the page. 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 very weird error message:

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

As error message clearly indicating that we can only add TextBox control inside Form tag and not in Page, we need to make 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 at runat attribute as server for Form control. Here is the modified Form tag:

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

<asp:Button ID="buttonTest" Runat=server Text="Post Page"></asp:Button>
</form>

I have added a Button control to see how dynamic control behaves with page PostBack. 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.

Ok, now enter some dummy text in the rendered dynamic control on page and click on the “buttonTest” button. And check the how it’s behaving.

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