In this article I will explain how to create dynamic TextBox 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 TextBox control in asp.net
![Creating Dynamic TextBoxes in ASP.Net]()
To start with I added a PreInit event to the Page and added the following snippet in it
C#
Panel pnlTextBox;
protected void Page_PreInit(object sender, EventArgs e)
{
//Create a Dynamic Panel
pnlTextBox = new Panel();
pnlTextBox.ID = "pnlTextBox";
pnlTextBox.BorderWidth = 1;
pnlTextBox.Width = 300;
this.form1.Controls.Add(pnlTextBox);
//Create a LinkDynamic Button to Add TextBoxes
LinkButton btnAddtxt = new LinkButton();
btnAddtxt.ID = "btnAddTxt";
btnAddtxt.Text = "Add TextBox";
btnAddtxt.Click += new System.EventHandler(btnAdd_Click);
this.form1.Controls.Add(btnAddtxt);
//Recreate Controls
RecreateControls("txtDynamic", "TextBox");
}
VB.Net
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) Handles Me.PreInit
'Create a Dynamic Panel
pnlTextBox = New Panel()
pnlTextBox.ID = "pnlTextBox"
pnlTextBox.BorderWidth = 1
pnlTextBox.Width = 300
Me.form1.Controls.Add(pnlTextBox)
'Create a LinkDynamic Button to Add TextBoxes
Dim btnAddtxt As New LinkButton()
btnAddtxt.ID = "btnAddtxt"
btnAddtxt.Text = "Add TextBox"
AddHandler btnAddtxt.Click, AddressOf btnAdd_Click
Me.form1.Controls.Add(btnAddtxt)
'Recreate Controls
RecreateControls("txtDynamic", "TextBox")
End Sub
As you will notice above I have created the following controls
1 Dynamic panel pnlTextBox and added it to the form control on the page
2. Dynamic LinkButton btnAddTxt 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("txtDynamic");
CreateTextBox("txtDynamic-" + Convert.ToString(cnt + 1));
}
VB.Net
Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim cnt As Integer = FindOccurence("txtDynamic")
CreateTextBox("txtDynamic-" & Convert.ToString(cnt + 1))
End Sub
As you will notice I am calling two functions
1. FindOccurence
2. CreateTextBox
The FindOccurence function as the name suggests gets the occurrence of the Dynamic TextBox 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 CreateTextBox as the name suggests is used to create dynamic TextBox. The function accepts ID as parameter
C#
private void CreateTextBox(string ID)
{
TextBox txt = new TextBox();
txt.ID = ID;
txt.AutoPostBack = true;
txt.TextChanged += new EventHandler(OnTextChanged);
pnlTextBox.Controls.Add(txt);
Literal lt = new Literal();
lt.Text = "<br />";
pnlTextBox.Controls.Add(lt);
}
VB.Net
Private Sub CreateTextBox(ByVal ID As String)
Dim txt As New TextBox()
txt.ID = ID
txt.AutoPostBack = True
AddHandler txt.TextChanged, AddressOf OnTextChanged
pnlTextBox.Controls.Add(txt)
Dim lt As New Literal()
lt.Text = "<br />"
pnlTextBox.Controls.Add(lt)
End Sub
As you will notice I am creating a new TextBox and adding Items to it. Once done that I am attaching TextChanged Event Handler and setting the AutoPostBack property to true. Finally I am adding it to the panel pnlTextBox.
The SelectedIndexChanged Event Handler is given below.
C#
protected void OnTextChanged(object sender, EventArgs e)
{
TextBox txt = (TextBox)sender;
string ID = txt.ID;
ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert",
"<script type = 'text/javascript'>alert('" + ID +
" fired OnTextChanged event');</script>");
//Place the functionality here
}
VB.Net
Protected Sub OnTextChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim txt As TextBox = DirectCast(sender, TextBox)
Dim ID As String = txt.ID
'Place the functionality here
ClientScript.RegisterClientScriptBlock(Me.GetType(), _
"Alert", "<script type = 'text/javascript'>alert('" & ID _
& " fired OnTextChanged event');</script>")
End Sub
In the above event I am finding the ID of the caller TextBox based by Type Casting the Sender parameter and then firing a JavaScript alert to notify which TextBox fired the event as shown in figure below
![Dynamic TextBox TextChanged Event Handler attached to the Dynamic TextBox]()
Now the most important function is RecreateControls whose job is to recreate all the TextBox 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 == "TextBox")
{
CreateTextBox(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 = "TextBox" Then
CreateTextBox(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 txtDynamic in the Request.Form collection and then I loop through each item and keep adding the TextBox using the CreateTextBox function described earlier.
This completes the article download the sample code in VB.Net and C# using the link below
DynamicTextBoxes.zip (3.95 kb)
