In this article I will explain with an example, how to use dynamic controls using a completely dynamic page without using controls in ASP.Net using C# and VB.Net.
This article will also explain:
1. How to create dynamic Controls?
2. Why dynamic controls lost after PostBack?
3. How to get values of dynamic Controls on form submit?
4. How to retain values of dynamic Controls?
5. How to use dynamic Controls with Master Pages?
6. How to add Event Handler to dynamic Control?
HTML Markup
The HTML Markup consists of:
Panel – One for adding dynamic TextBoxes and another one for adding dynamic DropDownLists.
Dynamic TextBox<br />
<asp:Panel runat="server" ID="pnlTextBox" BorderWidth="1" Width="300"></asp:Panel>
<br />
Dynamic DropDownList<br />
<asp:Panel runat="server" ID="pnlDropDownList" BorderWidth="1" Width="300"></asp:Panel>
Adding Dynamic Button Controls
Inside the Page Load event handler, the dynamic Button for adding dynamic TextBoxes is created and the ID and Text properties are set and dynamic Click event handler is assigned to it and then added back to the Panel.
Then, another dynamic Button is created for adding dynamic DropDownList and its properties are set and dynamic Click event handler is assigned to it and then added back to the Panel.
Next, inside the IsPostBack condition, the RecreateControls method is called for both the controls i.e. dynamic TextBox and dynamic DropDownList.
Note: The RecreateControls method is called inside the Page Load event handler, It will be described later in the article.
Finally, another dynamic Button is created for submitting the Form and added back to the Form.
C#
protected void Page_Load(object sender, EventArgs e)
{
//Button to add TextBox.
Button btnAddTxt = new Button();
btnAddTxt.ID = "btnAddTxt";
btnAddTxt.Text = "Add TextBox";
btnAddTxt.Click += new EventHandler(OnAdd);
pnlTextBox.Controls.Add(btnAddTxt);
Literal lt = new Literal();
lt.Text = "<br />";
pnlTextBox.Controls.Add(lt);
//Button to add DropDownlist.
Button btnAddDdl = new Button();
btnAddDdl.ID = "btnAddDdl";
btnAddDdl.Text = "Add DropDown";
btnAddDdl.Click += new EventHandler(OnAdd);
pnlDropDownList.Controls.Add(btnAddDdl);
lt = new Literal();
lt.Text = "<br />";
pnlDropDownList.Controls.Add(lt);
if (this.IsPostBack)
{
this.RecreateControls("txtdynamic", "TextBox");
this.RecreateControls("ddldynamic", "DropDownList");
}
lt = new Literal();
lt.Text = "<br />";
this.form1.Controls.Add(lt);
//Dummy Button to do PostBack.
Button btnSubmit = new Button();
btnSubmit.ID = "btnSubmit";
btnSubmit.Text = "Submit";
btnSubmit.Click += new EventHandler(OnSubmit);
this.form1.Controls.Add(btnSubmit);
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
'Button to add TextBox.
Dim btnAddTxt As Button = New Button()
btnAddTxt.ID = "btnAddTxt"
btnAddTxt.Text = "Add TextBox"
AddHandler btnAddTxt.Click, AddressOf OnAdd
pnlTextBox.Controls.Add(btnAddTxt)
Dim lt As Literal = New Literal()
lt.Text = "<br />"
pnlTextBox.Controls.Add(lt)
'Button to add DropDownlist.
Dim btnAddDdl As Button = New Button()
btnAddDdl.ID = "btnAddDdl"
btnAddDdl.Text = "Add DropDown"
AddHandler btnAddDdl.Click, AddressOf OnAdd
pnlDropDownList.Controls.Add(btnAddDdl)
lt = New Literal()
lt.Text = "<br />"
pnlDropDownList.Controls.Add(lt)
If Me.IsPostBack Then
Me.RecreateControls("txtdynamic", "TextBox")
Me.RecreateControls("ddldynamic", "DropDownList")
End If
lt = New Literal()
lt.Text = "<br />"
Me.form1.Controls.Add(lt)
'Dummy Button to do PostBack.
Dim btnSubmit As Button = New Button()
btnSubmit.ID = "btnSubmit"
btnSubmit.Text = "Submit"
AddHandler btnSubmit.Click, AddressOf OnSubmit
Me.form1.Controls.Add(btnSubmit)
End Sub
Adding Dynamic TextBox and DropDownList Controls
When Add button is clicked, a check is performed to know which Button is clicked i.e. Add TextBox or Add DropDown.
If Button for adding TextBox or DropDownList is clicked then, the FindOccurrence method is called and new dynamic TextBox or DropDownList is added to the Panel control.
Note: The FindOccurrence method is called inside the button Add event. It will be described later in the article.
C#
protected void OnAdd(object sender, EventArgs e)
{
Button btn = (Button)sender;
if (btn.ID == "btnAddTxt")
{
int cnt = this.FindOccurrence("txtdynamic");
TextBox txt = new TextBox();
txt.ID = "txtdynamic_" + Convert.ToString(cnt + 1);
pnlTextBox.Controls.Add(txt);
Literal lt = new Literal();
lt.Text = "<br />";
pnlTextBox.Controls.Add(lt);
}
if (btn.ID == "btnAddDdl")
{
int cnt = this.FindOccurrence("ddldynamic");
DropDownList ddl = new DropDownList();
ddl.ID = "ddldynamic_" + Convert.ToString(cnt + 1);
ddl.Items.Add(new ListItem("One", "1"));
ddl.Items.Add(new ListItem("Two", "2"));
ddl.Items.Add(new ListItem("Three", "3"));
pnlDropDownList.Controls.Add(ddl);
Literal lt = new Literal();
lt.Text = "<br />";
pnlDropDownList.Controls.Add(lt);
}
}
VB.Net
Protected Sub OnAdd(ByVal sender As Object, ByVal e As EventArgs)
Dim btn As Button = DirectCast(sender, Button)
If btn.ID = "btnAddTxt" Then
Dim cnt As Integer = Me.FindOccurrence("txtdynamic")
Dim txt As New TextBox()
txt.ID = "txtdynamic_" & Convert.ToString(cnt + 1)
pnlTextBox.Controls.Add(txt)
Dim lt As New Literal()
lt.Text = "<br />"
pnlTextBox.Controls.Add(lt)
End If
If btn.ID = "btnAddDdl" Then
Dim cnt As Integer = Me.FindOccurrence("ddldynamic")
Dim ddl As New DropDownList()
ddl.ID = "ddldynamic_" & Convert.ToString(cnt + 1)
ddl.Items.Add(New ListItem("One", "1"))
ddl.Items.Add(New ListItem("Two", "2"))
ddl.Items.Add(New ListItem("Three", "3"))
pnlDropDownList.Controls.Add(ddl)
Dim lt As New Literal()
lt.Text = "<br />"
pnlDropDownList.Controls.Add(lt)
End If
End Sub
Finding Occurrence of Dynamic Controls
The FindOccurrence function is used to calculate the count of occurrences of the substring that is passed to it in the Request.Form collection.
C#
private int FindOccurrence(string substr)
{
string reqstr = Request.Form.ToString();
return ((reqstr.Length - reqstr.Replace(substr, "").Length) / substr.Length);
}
VB.Net
Private Function FindOccurrence(ByVal substr As String) As Integer
Dim reqstr As String = Request.Form.ToString()
Return ((reqstr.Length - reqstr.Replace(substr, "").Length) / substr.Length)
End Function
Recreating Dynamic Controls
The RecreateControls function consists of two parameters:
1.ctrlPrefix – The prefix used for the controls.
2. ctrlType – The type of control i.e. TextBox, DropDownList.
Inside the RecreateControls function, the FindOccurrence method is called and the control count is determined.
Based on the number of controls found, a FOR loop is executed over the controls and the controls are recreated with respective ID and Text and are added back to the Panel control.
C#
private void RecreateControls(string ctrlPrefix, string ctrlType)
{
string[] ctrls = Request.Form.ToString().Split('&');
int cnt = this.FindOccurrence(ctrlPrefix);
if (cnt > 0)
{
Literal lt;
for (int k = 1; k <= cnt; k++)
{
for (int i = 0; i < ctrls.Length; i++)
{
if (ctrls[i].Contains(ctrlPrefix + "-" + k.ToString()))
{
string ctrlName = ctrls[i].Split('=')[0];
string ctrlValue = ctrls[i].Split('=')[1];
//Decode the Value
ctrlValue = Server.UrlDecode(ctrlValue);
if (ctrlType == "TextBox")
{
TextBox txt = new TextBox();
txt.ID = ctrlName;
txt.Text = ctrlValue;
pnlTextBox.Controls.Add(txt);
lt = new Literal();
lt.Text = "<br />";
pnlTextBox.Controls.Add(lt);
}
if (ctrlType == "DropDownList")
{
DropDownList ddl = new DropDownList();
ddl.ID = ctrlName;
//Rebind Data
ddl.Items.Add(new ListItem("One", "1"));
ddl.Items.Add(new ListItem("Two", "2"));
ddl.Items.Add(new ListItem("Three", "3"));
//Select the Preselected Item
ddl.Items.FindByValue(ctrlValue).Selected = true;
pnlDropDownList.Controls.Add(ddl);
lt = new Literal();
lt.Text = "<br />";
pnlDropDownList.Controls.Add(lt);
}
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 = Me.FindOccurrence(ctrlPrefix)
If cnt > 0 Then
Dim lt As Literal
For k As Integer = 1 To cnt
For i As Integer = 0 To ctrls.Length - 1
If ctrls(i).Contains((ctrlPrefix & "_") + k.ToString()) Then
Dim ctrlName As String = ctrls(i).Split("="c)(0)
Dim ctrlValue As String = ctrls(i).Split("="c)(1)
'Decode the Value.
ctrlValue = Server.UrlDecode(ctrlValue)
If ctrlType = "TextBox" Then
Dim txt As New TextBox()
txt.ID = ctrlName
txt.Text = ctrlValue
pnlTextBox.Controls.Add(txt)
lt = New Literal()
lt.Text = "<br />"
pnlTextBox.Controls.Add(lt)
End If
If ctrlType = "DropDownList" Then
Dim ddl As New DropDownList()
ddl.ID = ctrlName
'Rebind Data.
ddl.Items.Add(New ListItem("One", "1"))
ddl.Items.Add(New ListItem("Two", "2"))
ddl.Items.Add(New ListItem("Three", "3"))
'Select the Preselected Item.
ddl.Items.FindByValue(ctrlValue).Selected = True
pnlDropDownList.Controls.Add(ddl)
lt = New Literal()
lt.Text = "<br />"
pnlDropDownList.Controls.Add(lt)
End If
Exit For
End If
Next
Next
End If
End Sub
Submitting the Form
Following event handler is executed, when the Submit button is clicked the TextBox values and the DropDownList selected values are retained.
C#
protected void OnSubmit(object sender, EventArgs e)
{
//OnClick Event Handler for btnSubmit.
}
VB.Net
Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)
'OnClick Event Handler for btnSubmit.
End Sub
Screenshot
![Dynamic Controls Made Easy in ASP.Net]()
Demo
Downloads
