使用相同的格式在按钮单击上动态添加无限文本框 [英] Dynamically adding infinite text boxes on button click with same formatting

问题描述

你好开发者，



我需要你的帮助。

我有一个asp桌子由3个字段组成..'名称'，'年龄'和'性别'，这3个字段水平对齐，正下方有一个按钮'添加更多'

我想要的是每当一个用户单击添加更多，下面添加了所有3个带有字段名称的文本框，并且还添加了删除按钮（如果用户想要删除文本框）。

用户可以添加无限量的文本框，没有限制..但如果用户达到特定数量的文本框，可以说5 ..然后应该生成一个滚动条，以便他可以添加更多的框，并添加它们相同页面并在用户向下滚动时可见。



期待您的支持。

我们将非常感谢您的帮助。



谢谢。



我尝试过：



我有alrea dy搜索了不同的网站..我找到了相似但不完全相同的解决方案。

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.

推荐答案

这应该可以帮助你入门：在GridView中动态添加和删除行并一次保存所有行 [ ^ ]



上面的代码完全是服务器端方法。它还使用 ViewState 来保存回发中的数据。使用 ViewState 时需要小心，以避免页面性能问题。此外 ViewState 在大小方面有限制，因此请确保不要在其中存储大量数据。



你可以做的另一种方法是使用JavaScript / jQuery在客户端添加动态控件。这样，所有交互只发生在浏览器上，因此您可以快速响应。只需谷歌使用jquery添加动态文本框来获取更多示例。这是我发现的一个：如何使用jQuery动态添加/删除文本框 [ ^ ]

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：

用户可以添加infinte文本框的数量

The user can add an infinte amount of text boxes

您可能需要重新考虑您的要求。您应该考虑页面性能和用户体验。当您在页面上添加100,000个TextBox时，您认为会发生什么？



这是基于您最新评论的快速示例：



ASPX：

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: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:

//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();
}

这篇关于使用相同的格式在按钮单击上动态添加无限文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！