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, 2003Download the code. Printer Friendly VersionSometimes 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 Public Sub btnControls_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) For I = 1 to txtNumControls.Text 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
