Dynamically add a new text field when a button is clicked

Question

I have a “tb1” text box on my page, and I want users to be able to add others if they need to enter more data. I have the following code:

VB:

ViewState("num") = 2 Dim MyTextBox = New TextBox MyTextBox.ID = "tb" & ViewState("num") MyTextBox.Width = 540 MyTextBox.Height = 60 MyTextBox.TextMode = TextBoxMode.MultiLine AddScript.Controls.Add(MyTextBox) AddScript.Controls.Add(New LiteralControl("<br>")) ViewState("num") = ViewState("num") + 1 

ASP:

 <asp:PlaceHolder id="AddScript" runat="server"> <asp:Label ID="Label2" runat="server" Font-Bold="true" Text="Scripts: (Drag from right)"></asp:Label><br /> <asp:TextBox ID="tb1" runat="server" Width="90%" Height="60px" TextMode="MultiLine" Enabled="false"></asp:TextBox> </asp:PlaceHolder> 

My problem is that I can add only one text field each time, and I also have a search button on the right panel on the page, and if this button is clicked, the created text field will disappear. Any help would be appreciated.

Answer 1

You can create your own TextBoxCollection CompositeControl, which allows you to achieve the required functionality.

I have put together a basic example of how it can be achieved.

Control

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ASPNetWebApplication.Controls { public class TextBoxCollection : CompositeControl { private List<string> TextBoxes { get { if (ViewState["TextBoxes"] == null) { ViewState["TextBoxes"] = new List<string>(); } return (List<string>)ViewState["TextBoxes"]; } set { ViewState["TextBoxes"] = value; } } protected override void CreateChildControls() { foreach (string textBox in TextBoxes) { Controls.Add(new TextBox() { ID = textBox }); Controls.Add(new Literal() { Text = "<br/>" }); } } public TextBox GetTextBox(string id) { return (TextBox)Controls.Cast<Control>().Where(t => (t.ID == null ? "" : t.ID.ToLower()) == id.ToLower()).SingleOrDefault(); } public void AddTextBox(string id) { TextBoxes.Add(id); } } } 

Layout Example

Note. Change Assembly="ASPNetWebApplication" to the name of your assembly.

 <%@ Register Assembly="ASPNetWebApplication" Namespace="ASPNetWebApplication.Controls" TagPrefix="ASPNetWebApplication" %> ... <ASPNetWebApplication:TextBoxCollection ID="TextBoxCollection1" runat="server" /> <br /> <asp:Button ID="AddTextBoxesButton" runat="server" OnClick="AddTextBoxesButton_Click" Text="Add Some Text Boxes" /> <asp:Button ID="GetTextBoxValuesButton" runat="server" OnClick="GetTextBoxValuesButton_Click" Text="Get TextBox Values" Visible="false" /> <br /> <asp:Literal ID="TextBoxEntriesLabel" runat="server"></asp:Literal> 

Codebehind example

 protected void AddTextBoxesButton_Click(object sender, EventArgs e) { for (int i = 0; i < 10; i++) { TextBoxCollection1.AddTextBox(string.Format("TextBox{0}", i)); } AddTextBoxesButton.Visible = false; GetTextBoxValuesButton.Visible = true; } protected void GetTextBoxValuesButton_Click(object sender, EventArgs e) { TextBoxEntriesLabel.Text = string.Empty; for (int i = 0; i < 10; i++) { string textBoxId = string.Format("TextBox{0}", i); TextBoxEntriesLabel.Text += string.Format("TextBox: {0}, Value: {1}<br/>", textBoxId, TextBoxCollection1.GetTextBox(textBoxId).Text); } } 

Hope this helps.

Answer 2

You cannot do this easily using server-side code. For this you need to use jQuery / JavaScript. Please read the asp.net page and life cycle monitoring from MSDN.