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");
}
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));
}
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);
}
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);
}
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 AutoPostBackproperty 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
}
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;
}
}
}
}
}
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.
Comments
Post a Comment