Dynamically adding infinite text boxes on button click with same formatting

Question

0.00/5 (No votes)

See more:

Hello developers,

I need bit of your help.
I have an asp table which consist of 3 fields.. 'Name','Age' and 'Gender', these 3 fields are horizontally aligned and right below them there is a button 'Add More'
What i want is whenever a user clicks 'Add More' all 3 textboxes with the field names are added below and a 'Remove' button is also added (in case if the user wants to remove the text boxes).
The user can add an infinte amount of text boxes, there is no limitation.. but if a user reaches a specific amount of textboxes lets say 5.. then a scroll bar should be generated so that he can add more boxes and they are added in the same page and are visible once the user scrolls down.

Looking forward to your support.
Your help would be highly appreciated.

Thanks.

What I have tried:

I have already searched different sites.. i have found solutions similar but not exactly the same.

Posted 23-Sep-16 1:13am

Faran Saleem

Updated 23-Sep-16 1:22am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2016-09-23T01:22:00

This should help you get started: Dynamically Adding and Deleting Rows in GridView and Saving All Rows at Once[^]

The code above is entirely server-side approach. It also uses ViewState to hold the data across postbacks. You need to be careful when using ViewState to avoid page performance issue. Also ViewState has a limit when it comes to size, so make sure that you don't store a huge amount of data in it.

Another approach that you can do is to use JavaScript/jQuery to add dynamic controls at client. That way all interactions only happens at the browser, so you can have a fast response. Just google "adding dynamic textbox using jquery" to get more examples. Here's one I found: How to add / remove textbox dynamically with jQuery[^]

Quote:
The user can add an infinte amount of text boxes

You may need to re-think your requirements. You should think about page performance and user experience. What do you think will happen when you add 100,000 TextBox on the page?

Here's a quick example based on your latest comment:

ASPX:

ASP.NET

<asp:TextBox ID="TextBox1" runat="server"/>
<asp:TextBox ID="TextBox2" runat="server"/>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:GridView ID="GridView1" runat="server" >
</asp:GridView>

CODE BEHIND:

C#

//A method that will BIND the GridView based on the TextBox 
//values and retain its values on post backs.

private void BindGrid(int rowcount)
{
        DataTable dt = new DataTable();
        DataRow dr;
        dt.Columns.Add(new System.Data.DataColumn("Name", typeof(String)));
        dt.Columns.Add(new System.Data.DataColumn("Location", typeof(String)));
 
        if (ViewState["CurrentData"] != null)
        {
            for (int i = 0; i < rowcount + 1; i++)
            {
                dt = (DataTable)ViewState["CurrentData"];
                if (dt.Rows.Count > 0)
                {
                    dr = dt.NewRow();
                    dr[0] = dt.Rows[0][0].ToString();
 
                }
            }
            dr = dt.NewRow();
            dr[0] = TextBox1.Text;
            dr[1] = TextBox2.Text;
            dt.Rows.Add(dr);
 
        }
        else
        {
            dr = dt.NewRow();
            dr[0] = TextBox1.Text;
            dr[1] = TextBox2.Text;
 
            dt.Rows.Add(dr);
 
        }
 
        // If ViewState has a data then use the value as the DataSource
        if (ViewState["CurrentData"] != null)
        {
            GridView1.DataSource = (DataTable)ViewState["CurrentData"];
            GridView1.DataBind();
        }
        else
        {
        // Bind GridView with the initial data assocaited in the DataTable
            GridView1.DataSource = dt;
            GridView1.DataBind();
 
        }
        // Store the DataTable in ViewState to retain the values
        ViewState["CurrentData"] = dt;
 
    }

 protected void Button1_Click(object sender, EventArgs e)
 {
        // Check if the ViewState has a data assoiciated within it.
        if (ViewState["CurrentData"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentData"];
            int count = dt.Rows.Count;
            BindGrid(count);
        }
        else
        {
            BindGrid(1);
        }
        TextBox1.Text = string.Empty;
 
        TextBox1.Focus();
}