Article Options
Premium Sponsor
Premium Sponsor

 »  Home  »  Web Development  »  ASP.NET  »  Working With Dynamically Added Controls
Working With Dynamically Added Controls
by Gaidar Magdanurov | Published  03/21/2007 | ASP.NET | Rating:
Gaidar Magdanurov
Gaidar Magdanurov is the editor-in-chief of VBStreets (www.vbstreets.ru) - Russian web site dedicated to Microsoft Visual Basic. He is also a Microsoft MVP and member of Russian Speakers Bureau, the founder and the leader of VBStreets .NET User Group, active member of Russian GotDotNet community and author of dozen of articles and. Gaidar has wide expirience in Web and Windows development and likes to share his knowledge. 

View all articles by Gaidar Magdanurov...
Dynamic Controls

 Adding controls dynamically
It is very easy to use ASP.NET controls on a web form. You may drop a control on a form in the Visual Studio designer or type in markup code for a control manually. After that you may reference a control by its ID.

But what if you do not know how many controls will be used on a form? For example, your web application might present an unknown number of records to the user for review. Sometimes you can not just use something like GridView because you need some complex collection of controls. Then it is necessary to add controls to web form dynamically.

Suppose say we have a web form shown below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Dynamic Controls</title>
</head>
<body>
  <form id="formMain" runat="server">
  <div>
   <asp:PlaceHolder ID="phD" runat="server"></asp:PlaceHolder><br />
   <asp:Button ID="ButtonSubmit" runat="server" Text="Submit"
   OnClick="ButtonSubmit_Click" /><br /><br />
   <asp:PlaceHolder ID="phR" runat="server"></asp:PlaceHolder>
  </div>
  </form>
</body>
</html>

We are to add some controls to phD placeholder and after submit show some data from dynamically added controls in phR placeholder.

 



To have an opportunity to get values from dynamically added controls later on we should maintain control tree on a page between postbacks. So, we write code to add controls in Page_Load.

protected void Page_Load(object sender, EventArgs e)
{
  // add controls dynamically
 for (int i = 0; i < 10; i++)
 {
  CheckBox cb = new CheckBox();
  cb.ID = "cb" + i.ToString();
  phD.Controls.Add(cb);
  TextBox text = new TextBox();
  text.ID = "text" + i.ToString();
  phD.Controls.Add(text);
  phD.Controls.Add(new LiteralControl("<br />"));
  }
}

There is a for loop for simplicity. In a real-world application you may use DataReader to get data from database or loop through some data collection, etc.

Getting values from dynamically added controls
We can not use dynamically added controls as regular ones. You would get an error trying to run code like the following:

string test = text0.Text;

But we know IDs of controls in question and this is crucial knowledge, because we can use the FindControl method of any container control to get its child controls. So, in the ButtonSubmit_Click handler we loop through controls to get their values.

protected void ButtonSubmit_Click(object sender, EventArgs e)
{
  // get values from dynamic controls
  for (int i = 0; i < 10; i++)
  {
   CheckBox cb = phD.FindControl("cb" + i.ToString()) as CheckBox;
   if (cb != null)
   {
   string act = (cb.Checked) ? "Enabled" : "Disabled";
   phR.Controls.Add(new LiteralControl(act + " : "));
   }

   TextBox text = phD.FindControl("text" + i.ToString()) as TextBox;
   if (text != null)
    phR.Controls.Add(new LiteralControl(text.Text));

   phR.Controls.Add(new LiteralControl("<br />"));
  }
}

Note that dynamic controls are added in Page_Load handler every time page reloads, so you may even turn off View State and code above continues working properly and controls will have the same values they had before postback.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>

As name/value pairs are sent to server at postback and as control tree remains identical, ASP.NET restores values for every control.

How would you rate the quality of this article?
1 2 3 4 5
Poor Excellent
Tell us why you rated this way (optional):

Article Rating
The average rating is: No-one else has rated this article yet.

Article rating:3.46875 out of 5
 32 people have rated this page
Article Score11509
Sponsored Links