In this article I will explain how to create dynamic DropDownList control in asp.net. I will also explain how to retain value across postbacks and also how to recreate the controls on each postback. In addition I will explain how to dynamically attach event handlers to DropDownList control in asp.net
To start with I added a PreInit event to the Page and added the following snippet in it
C#
Panel pnlDropDownList;
protected void Page_PreInit(object sender, EventArgs e)
{
//Create a Dynamic Panel
pnlDropDownList = new Panel();
pnlDropDownList.ID = "pnlDropDownList";
pnlDropDownList.BorderWidth = 1;
pnlDropDownList.Width = 300;
this.form1.Controls.Add(pnlDropDownList);
//Create a LinkDynamic Button to Add TextBoxes
LinkButton btnAddDdl = new LinkButton();
btnAddDdl.ID = "btnAddDdl";
btnAddDdl.Text = "Add DropDownList";
btnAddDdl.Click += new System.EventHandler(btnAdd_Click);
this.form1.Controls.Add(btnAddDdl);
//Recreate Controls
RecreateControls("ddlDynamic", "DropDownList");
}
VB.Net
Private pnlDropDownList As Panel
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit 'Create a Dynamic Panel
pnlDropDownList = New Panel()
pnlDropDownList.ID = "pnlDropDownList"
pnlDropDownList.BorderWidth = 1
pnlDropDownList.Width = 300
Me.form1.Controls.Add(pnlDropDownList)
'Create a LinkDynamic Button to Add TextBoxes
Dim btnAddDdl As New LinkButton()
btnAddDdl.ID = "btnAddDdl"
btnAddDdl.Text = "Add DropDownList"
AddHandler btnAddDdl.Click, AddressOf btnAdd_Click
Me.form1.Controls.Add(btnAddDdl)
'Recreate Controls
RecreateControls("ddlDynamic", "DropDownList")
End Sub
As you will notice above I have created the following controls
1 Dynamic panel pnlDropDownList and added it to the form control on the page
2. Dynamic LinkButton btnAddDdl attached a Click event btnAdd_Click to it and added to the form control.
3. A function called RecreateControls is being called which I’ll explain later in the article
On the Click event of the dynamic LinkButton I have added the following event
C#
protected void btnAdd_Click(object sender, EventArgs e)
{
int cnt = FindOccurence("ddlDynamic");
CreateDropDownList("ddlDynamic-" + Convert.ToString(cnt + 1));
}
VB.Net
Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim cnt As Integer = FindOccurence("ddlDynamic")
CreateDropDownList("ddlDynamic-" & Convert.ToString(cnt + 1))
End Sub
As you will notice I am calling two functions
1. FindOccurence
2. CreateDropDownList
The FindOccurence function as the name suggests gets the occurrence of the Dynamic DropDownList in the Request.Form collection. The basic idea is that I have given ID is a common pattern that is all IDs are of the form txtDynamic e.g. txtDynamic-1, txtDynamic-2 and so on.
C#
private int FindOccurence(string substr)
{
string reqstr = Request.Form.ToString();
return ((reqstr.Length - reqstr.Replace(substr, "").Length)
/ substr.Length);
}
VB.Net
Private Function FindOccurence(ByVal substr As String) As Integer
Dim reqstr As String = Request.Form.ToString()
Return ((reqstr.Length - reqstr.Replace(substr, "").Length) & _
/ substr.Length)
End Function
Now the CreateDropDownList as the name suggests is used to create dynamic DropDownList. The function accepts ID as parameter
C#
private void CreateDropDownList(string ID)
{
DropDownList ddl = new DropDownList();
ddl.ID = ID;
ddl.Items.Add(new ListItem("--Select--", ""));
ddl.Items.Add(new ListItem("One", "1"));
ddl.Items.Add(new ListItem("Two", "2"));
ddl.Items.Add(new ListItem("Three", "3"));
ddl.AutoPostBack = true;
ddl.SelectedIndexChanged += new EventHandler(OnSelectedIndexChanged);
pnlDropDownList.Controls.Add(ddl);
Literal lt = new Literal();
lt.Text = "<br />";
pnlDropDownList.Controls.Add(lt);
}
VB.Net
Private Sub CreateDropDownList(ByVal ID As String)
Dim ddl As New DropDownList()
ddl.ID = ID
ddl.Items.Add(New ListItem("--Select--", ""))
ddl.Items.Add(New ListItem("One", "1"))
ddl.Items.Add(New ListItem("Two", "2"))
ddl.Items.Add(New ListItem("Three", "3"))
ddl.AutoPostBack = True
AddHandler ddl.SelectedIndexChanged, AddressOf OnSelectedIndexChanged
pnlDropDownList.Controls.Add(ddl)
Dim lt As New Literal()
lt.Text = "<br />"
pnlDropDownList.Controls.Add(lt)
End Sub
As you will notice I am creating a new DropDownList and adding Items to it. Once done that I am attaching SelectedIndexChanged Event Handler and setting the AutoPostBack property to true. Finally I am adding it to the panel pnlDropDownList.
The SelectedIndexChanged Event Handler is given below.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
string ID = ddl.ID;
ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert",
"<script type = 'text/javascript'>alert('" + ID +
" fired SelectedIndexChanged event');</script>");
//Place the functionality here
}
VB.Net
Protected Sub OnSelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim ddl As DropDownList = DirectCast(sender, DropDownList)
Dim ID As String = ddl.ID
'Place the functionality here
ClientScript.RegisterClientScriptBlock(Me.GetType(), _
"Alert", "<script type = 'text/javascript'>alert('" & ID _
& " fired SelectedIndexChanged event');</script>")
End Sub
Now the most important function is RecreateControls whose job is to recreate all the DropDownList on each postback
C#
private void RecreateControls(string ctrlPrefix, string ctrlType)
{
string[] ctrls = Request.Form.ToString().Split('&');
int cnt = FindOccurence(ctrlPrefix);
if (cnt > 0)
{
for (int k = 1; k <= cnt; k++)
{
for (int i = 0; i < ctrls.Length; i++)
{
if (ctrls[i].Contains(ctrlPrefix + "-" + k.ToString())
&& !ctrls[i].Contains("EVENTTARGET"))
{
string ctrlID = ctrls[i].Split('=')[0];
if (ctrlType == "DropDownList")
{
CreateDropDownList(ctrlID);
}
break;
}
}
}
}
}
VB.Net
Private Sub RecreateControls(ByVal ctrlPrefix As String, ByVal ctrlType As String)
Dim ctrls As String() = Request.Form.ToString().Split("&"c)
Dim cnt As Integer = FindOccurence(ctrlPrefix)
If cnt > 0 Then
For k As Integer = 1 To cnt
For i As Integer = 0 To ctrls.Length - 1
If ctrls(i).Contains((ctrlPrefix & "-") + k.ToString()) _
AndAlso Not ctrls(i).Contains("EVENTTARGET") Then
Dim ctrlID As String = ctrls(i).Split("="c)(0)
If ctrlType = "DropDownList" Then
CreateDropDownList(ctrlID)
End If
Exit For
End If
Next
Next
End If
End Sub
As you will notice above I first find the occurrence of a particular string here ddlDynamic in the Request.Form collection and then I loop through each item and keep adding the DropDownList using the CreateDropDownList function described earlier.
One important thing I need to point out which people overlook is always give unique IDs to dynamic controls when you create them
This completes the article download the sample code in VB.Net and C# using the link below
DynamicDrpDownList.zip (4.13 kb)