How to dynamically generate a TextBox control.

Question

How does one dynamically generate a TextBox control at run-time as a result of a button click? For each button click, I would like to create a TextBox control along with corresponding dynamic labels. I would like to do this within ASP.NET using the C# language.

Answer 1

To add multiple controls as you asked, use a for loop:

for (int i = 0; i < 2; ) {
    TextBox textBox = new TextBox();
    textBox.Text = "Hi";
    textBox.Name = "textBox" + i.ToString();
    form2.Controls.Add(textBox);
}

But the controls (textboxes) overlaps. You need to organize their locations.

EDIT: E.g

TextBox txt = new TextBox();
txt.Location = new Point(500, 100);

Answer 2

Well I would suggest you to first create a grid and to specify the wanted number of rows and columns, in order to have everything organized.

Your MainWindow.xaml should look like this:

 <TabItem.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#FFF0F0F0" Offset="1"/>
                    <GradientStop Color="#FF111111"/>
                    <GradientStop Color="#FF4F2B2B" Offset="0.946"/>
                </LinearGradientBrush>
            </TabItem.Background>

            <ScrollViewer HorizontalScrollBarVisibility="Visible" Margin="0,-1,0,2">

   <Grid Name="gridaxis"  x:FieldModifier="private" >
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />

                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                </Grid>


            </ScrollViewer>

        </TabItem>

Next we are trying to build two rows of textboxes which will be dynamically created on runtime. By using two different buttons, one for the first row textboxes and the other for the second row, we will be able to spawn the desired textboxes.

 int i = 0;
    private void add_in_grid(object sender, RoutedEventArgs e)
    {
        i = i + 1;
        System.Windows.Controls.TextBox newDepo = new System.Windows.Controls.TextBox();

        newDepo.Name = "new_Depo_" + i;
        newDepo.Text = "neue Depo" + i;

        newDepo.Width = 200;
        newDepo.Height = 200;

        Grid.SetColumn(newDepo, i);
        Grid.SetRow(newDepo, 1);

        gridaxis.Children.Add(newDepo);
    }

    int k = 0;
    private void add_row_depo(object sender, RoutedEventArgs e)
    {
        k = k + 1;
        System.Windows.Controls.TextBox newRowDepo = new System.Windows.Controls.TextBox();
        newRowDepo.Name = "newRowDepo" + k;
        newRowDepo.Text = "row depo" + k;



        newRowDepo.Width = 200;
        newRowDepo.Height = 200;

        Grid.SetColumn(newRowDepo, k);
        Grid.SetRow(newRowDepo, 2);
        gridaxis.Children.Add(newRowDepo);
    }

I hope it is clear enough. You just have to add one button for each of the two methods listed above. Just like this:

 <Button x:Name="grid_textbox" Content="add using grid" Click="add_in_grid" HorizontalAlignment="Left" Margin="802,537,0,0" VerticalAlignment="Top" Width="197" Height="60"/>
    <Button x:Name="rowgrid" Content="add row" Click="add_row_depo" HorizontalAlignment="Left" Margin="617,537,0,0" VerticalAlignment="Top" Width="159" Height="65"/>

Answer 3

The following will create the controls:

var newTextbox = new Textbox();   
var newLabel = new Label();

you can then set the properties etc that you want.

Then find somewhere on your page to add them to, say you have a panel called panel1, then do the following:

panel1.Controls.Add(newTextbox);
panel1.Controls.Add(newLabel);

However, doing this will not work after postback - you need to recreate the dynamic controls yourself on a postback.

Say you have the following page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

When you do a postback, only the controls that are defined in the above page will be generated for you. Controls you have dynamically added need to be re-created by you (for example in the Page_Load).

To do this, the simplest way is to remember the total number of controls you have added in the viewstate, then add that many controls back in when a postback occurs.

The following should get you started:

using System;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Add any controls that have been previously added dynamically
            for (int i = 0; i < TotalNumberAdded; ++i)
            {
                AddControls(i + 1);
            }

            // Attach the event handler to the button
            Button1.Click += new EventHandler(Button1_Click);
        }

        void Button1_Click(object sender, EventArgs e)
        {
            // Increase the number added and add the new label and textbox
            TotalNumberAdded++;
            AddControls(TotalNumberAdded);
        }

        private void AddControls(int controlNumber)
        {
            var newPanel = new Panel();
            var newLabel = new Label();
            var newTextbox = new TextBox();

            // textbox needs a unique id to maintain state information
            newTextbox.ID = "TextBox_" + controlNumber;

            newLabel.Text = "New Label";

            // add the label and textbox to the panel, then add the panel to the form
            newPanel.Controls.Add(newLabel);
            newPanel.Controls.Add(newTextbox);
            form1.Controls.Add(newPanel);
        }

        protected int TotalNumberAdded
        {
            get { return (int)(ViewState["TotalNumberAdded"] ?? 0); }
            set { ViewState["TotalNumberAdded"] = value; }
        }

    }
}

Answer 4

TextBox txt = new TextBox();
txt.ID = "textBox1";
txt.Text = "helloo";
form1.Controls.Add(txt);

Label lbl = new Label();
lbl.Text = "I am a label";
form1.Controls.Add(lbl);

Answer 5

The code below shows how to print a label and text box according to the value selected in the dropdownlist. The two placeholders are used so that they can be appropriately placed in two different table divisions

            int numlabels = System.Convert.ToInt32(ddlNumOfVolunteers.SelectedItem.Text);
            for (int i = 1; i <= numlabels; i++)
            {
                Label myLabel = new Label();
                TextBox txtbox = new TextBox();
                // Set the label's Text and ID properties.
                myLabel.ID = "LabelVol" + i.ToString();
                myLabel.Text = "Volunteer " + i.ToString();
                txtbox.ID = "TxtBoxVol" + i.ToString();
                PlaceHolder1.Controls.Add(myLabel);
                PlaceHolder2.Controls.Add(txtbox);
                // Add a spacer in the form of an HTML <br /> element.
                PlaceHolder2.Controls.Add(new LiteralControl("<br />"));
                PlaceHolder1.Controls.Add(new LiteralControl("<br />"));