How to dynamically generate a TextBox control.

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.

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);

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; }
        }

    }
}

How to dynamically generate a TextBox control.

Related

Recent Posts