Dynamically add a new text box on button click

I have textbox “tb1” on my page and I want users to be able to add another if they need to input 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 only add one text box each time and I also have a search button for the right panel on the page and if this button is clicked the created textbox will disappear. Any help would be appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could build your own TextBoxCollection CompositeControl which would enable you to achieve the functionality you require.

I have put together a basic example of how it could 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);
        }
    }
}

Example Markup

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>

Example Codebehind

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.

Method 2

You can’t do that easily using server-side code. You have to use jQuery/JavaScript for this purpose. Please read the asp.net Page and control life cycle from the MSDN.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0