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
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
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)