You may add controls to a web page dynamically as needed at run time rather than at design time. This short article shows you how.
By: John Kilgo 
Date: April 5, 2003 
Download the code. Printer Friendly Version
Sometimes when building a web form you do not know exactly how many controls of a certain type you will need on the form at run time. This problem can be easily solved by dynamically adding the forms at run time rather than adding them at design time. In this example we will use a simple interface to allow the user to state how many DropDownLists he or she wants on the web form. In real life you will probably determine based upon input from some other control(s) on the page. Either way the solution to the problem is the same.
As usual, lets get straight to the code. The .aspx file contains our
1<form> and allows the user to enter the number of DropDownLists to be created by the code-behind program. Following is the code for the .aspx page. The only thing of note here is the OnClick event for the button. It is here (in the code-behind page) that our controls will be created.
@ Page Language="vb" AutoEventWireup="false" Src="DynamicDropDowns.aspx.vb" Inherits="DynamicDropDowns"
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2
3<html>
4<head>
5<title>DynamicDropDowns</title>
6<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR"/>
7<meta content="Visual Basic 7.0" name="CODE_LANGUAGE"/>
8<meta content="JavaScript" name="vs_defaultClientScript"/>
9<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"/>
10</head>
11<body ms_positioning="GridLayout">
12<form id="Form1" method="post" runat="server">
13<h4>Enter Number of DropDownLists:</h4>
14<asp:textbox id="txtNumControls" runat="server"></asp:textbox>
15<asp:button id="btnControls" onclick="btnControls_Click" runat="server" text="OK"></asp:button>
16</form>
17</body>
18</html>
19---
20
21Now for the code-behind page. As promised, all of the code to produce our DropDownLists appears in the button's Click event. Here we have two For...Next loops. The outer loop (I) creates the DropDownLists, sets their ID's, and then, below the inner loop (J) adds a <p> paragraph tag to add spacing between the controls, adds the litheral controls and adds the DropDownList controls themselves. The inner loop (J) simply adds some list items for each of the DropDownList controls. If you run the example program you will better see the list items that were added.
22
23Public Class DynamicDropDowns : Inherits System.Web.UI.Page
24
25Protected WithEvents txtNumControls As System.Web.UI.WebControls.TextBox
26Protected WithEvents btnControls As System.Web.UI.WebControls.Button
27Protected WithEvents Form1 As System.Web.UI.HtmlControls.HtmlForm
28
29Public Sub btnControls_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
30Dim I, J As Integer
31
32For I = 1 to txtNumControls.Text
33Dim ctrlDropDown = New System.Web.UI.WebControls.DropDownList
34ctrlDropDown.ID = "ddlDynamic" & I
35For J = 1 To 4
36Dim listItem As New System.Web.UI.WebControls.ListItem
37listItem.Text = "DropDownList " & I & " : " & J
38ctrlDropDown.Items.Add(listItem)
39Next
40Dim literalControl = New System.Web.UI.LiteralControl
41literalControl.Text = "<p>"
42form1.Controls.Add(literalControl)
43form1.Controls.Add(ctrlDropDown)
44Next
45End Sub
46
47End Class
48---
49
50There you have it. DropDownLists added dynamically at runtime. You can, of course, add most any other type of control using this same method. You can also use panels to add even more controls and to better control their formatting.
51
52You may run the program here.
53You may download the code here.</p></p></form>