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
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 <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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>DynamicDropDowns</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<h4>Enter Number of DropDownLists:</h4>
<asp:TextBox ID="txtNumControls" Runat="server" />
<asp:Button ID="btnControls" Text="OK" OnClick="btnControls_Click" Runat="server" />
</form>
</body>
</html>
Now 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.
Public Class DynamicDropDowns : Inherits System.Web.UI.Page
Protected WithEvents txtNumControls As System.Web.UI.WebControls.TextBox
Protected WithEvents btnControls As System.Web.UI.WebControls.Button
Protected WithEvents Form1 As System.Web.UI.HtmlControls.HtmlForm
Public Sub btnControls_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
Dim I, J As Integer
For I = 1 to txtNumControls.Text
Dim ctrlDropDown = New System.Web.UI.WebControls.DropDownList
ctrlDropDown.ID = "ddlDynamic" & I
For J = 1 To 4
Dim listItem As New System.Web.UI.WebControls.ListItem
listItem.Text = "DropDownList " & I & " : " & J
ctrlDropDown.Items.Add(listItem)
Next
Dim literalControl = New System.Web.UI.LiteralControl
literalControl.Text = "<p>"
form1.Controls.Add(literalControl)
form1.Controls.Add(ctrlDropDown)
Next
End Sub
End Class
There 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.
You may run the program here.
You may download the code here.
