How To Create Dynamic Textbox In Asp Net

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

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

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.

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

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.

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

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

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)

<< Creating Dynamic DropDownList Controls in ASP.Net