How can i add labels with text boxes dynamically in Asp.net

Question

User-1797368610 posted

Hi,

i was able to create text boxes dynamically Using below code. Now problem with labels, i want to have labels before text boxes like when i click first time label should be User1 then textbox and 2nd click will add another textbox with label User2 and so on.. please have a look at below link example.

Thanks in Advanced.

Example Image

Aspx Page:
<asp:Panel ID="pnlTextBoxes" runat="server">
    </asp:Panel>
    <hr />
    <asp:Button ID="btnAdd" runat="server" Text="Add New" OnClick="AddTextBox" />
    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="Save" />

Code Behind:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace HDCDeveloper_IntakeForm
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_PreInit(object sender, EventArgs e)
        {
            List<string> keys = Request.Form.AllKeys.Where(key => key.Contains("txtDynamic")).ToList();
            int i = 1;
            foreach (string key in keys)
            {
                this.CreateTextBox("txtDynamic" + i);
                i++;
            }            
        }

        protected void AddTextBox(object sender, EventArgs e)
        {            
            int index2 = pnlTextBoxes.Controls.OfType<TextBox>().ToList().Count + 1;
            this.CreateTextBox("txtDynamic" + index2);
        }        

        private void CreateTextBox(string id)
        {
            TextBox txt = new TextBox();
            txt.ID = id;
            pnlTextBoxes.Controls.Add(txt);

            Literal lt = new Literal();
            lt.Text = "<br />";
            pnlTextBoxes.Controls.Add(lt);
        }
        protected void Save(object sender, EventArgs e)
        {
            foreach (TextBox textBox in pnlTextBoxes.Controls.OfType<TextBox>())
            {
                string constr = ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
                    using (SqlCommand cmd = new SqlCommand("INSERT INTO Names(Name) VALUES(@Name)"))
                    {
                        cmd.Connection = con;
                        cmd.Parameters.AddWithValue("@Name", textBox.Text);
                        con.Open();
                        cmd.ExecuteNonQuery();
                        con.Close();
                    }
                }
            }
        }
    }
}

Answer 1

User475983607 posted

The standard method in ASP.NET Web Forms is to use a DataBound control.  

You can add controls dynamically but then you take the responsibility to manage state.  You'll need to write code to add the dynamic controls every time the page posts back.  Keep in mind this programming problem has been around a long long time and there's quite a lot of information on the subject.  See the FAQs on this forum; https://forums.asp.net/t/1360420.aspx

Answer 2

User-1797368610 posted

Hey,

Thanks for your reply. i understood what you are saying but for this project i am just looking how to achieve label title with respective text boxes. such as User1 and then Textbox to enter user1 name. User2 then Textbox2 to enter User2 name and so on..

Answer 3

User475983607 posted

Rakib1

Hey,

Thanks for your reply. i understood what you are saying but for this project i am just looking how to achieve label title with respective text boxes. such as User1 and then Textbox to enter user1 name. User2 then Textbox2 to enter User2 name and so on..

Your response does not change anything.   The standard ASP.NET Web Forms pattern is using data bound controls.  If you do not wish to use the standard tooling then it is up to you to write code that creates the labels on every post back.  Labels are not posted back to the server so you'll need to write code to manage state.

Why are you have trouble adding labels to your existing code?

Answer 4

User-719153870 posted

Hi Rakib1,

when i click first time label should be User1 then textbox and 2nd click will add another textbox with label User2 and so on..

I'm not so sure if i understood the requirement correctly, since if you knew how to dynamically create textboxes, you shall already knew how to create dynamic labels.

What issue did you encounter when you say "Now problem with labels"?

Below is a simple demo which is built based on your code:

aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Panel ID="pnlTextBoxes" runat="server">
            </asp:Panel>
            <hr />
            <asp:Button ID="btnAdd" runat="server" Text="Add New" OnClick="AddTextBox" />
            <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="Save" />
        </div>
    </form>
</body>
</html>

cs:

        protected void Page_PreInit(object sender, EventArgs e)
        {
            List<string> keys = Request.Form.AllKeys.Where(key => key.Contains("txtDynamic")).ToList();
            int i = 1;
            foreach (string key in keys)
            {
                this.CreateLabel("lblDynamic" + i);
                this.CreateTextBox("txtDynamic" + i);
                i++;
            }
        }

        protected void AddTextBox(object sender, EventArgs e)
        {
            int index2 = pnlTextBoxes.Controls.OfType<TextBox>().ToList().Count + 1;
            this.CreateLabel("lblDynamic" + index2);
            this.CreateTextBox("txtDynamic" + index2);
        }

        private void CreateTextBox(string id)
        {
            TextBox txt = new TextBox();
            txt.ID = id;
            pnlTextBoxes.Controls.Add(txt);

            Literal lt = new Literal();
            lt.Text = "<br />";
            pnlTextBoxes.Controls.Add(lt);
        }

        private void CreateLabel(string id)
        {
            Label lbl = new Label();
            lbl.ID = id;
            lbl.Text = "User" + id.Substring(10);
            pnlTextBoxes.Controls.Add(lbl);

            Literal lt = new Literal();
            lt.Text = "    ";
            pnlTextBoxes.Controls.Add(lt);
        }

result:

Best Regard,

Yang Shen