在按钮点击时动态添加新的文本框

Question

我在网页上有一个文本框"tb1"，希望用户能够在需要输入更多数据时添加另一个文本框。我有以下代码：

VB:

ViewState("num") = 2            
Dim MyTextBox = New TextBox
MyTextBox.ID = "tb" & ViewState("num")
MyTextBox.Width = 540
MyTextBox.Height = 60
MyTextBox.TextMode = TextBoxMode.MultiLine
AddScript.Controls.Add(MyTextBox)
AddScript.Controls.Add(New LiteralControl("<br>"))
ViewState("num") = ViewState("num") + 1

ASP:

<asp:PlaceHolder id="AddScript" runat="server">
    <asp:Label ID="Label2" runat="server" Font-Bold="true" 
        Text="Scripts: (Drag from right)"></asp:Label><br />
    <asp:TextBox ID="tb1" runat="server" Width="90%" Height="60px" 
        TextMode="MultiLine" Enabled="false"></asp:TextBox>
</asp:PlaceHolder>

我的问题是我每次只能添加一个文本框，同时页面右侧还有一个搜索按钮。如果点击该按钮，则创建的文本框将消失。希望得到帮助。

- Gavin Crawley

Answer 1

你可以构建自己的TextBoxCollection CompositeControl，以实现所需功能。

我已经提供了一个基本示例来说明如何实现。

控件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ASPNetWebApplication.Controls
{
    public class TextBoxCollection : CompositeControl
    {
        private List<string> TextBoxes
        {
            get
            {
                if (ViewState["TextBoxes"] == null)
                {
                    ViewState["TextBoxes"] = new List<string>();
                }

                return (List<string>)ViewState["TextBoxes"];
            }
            set
            {
                ViewState["TextBoxes"] = value;
            }
        }

        protected override void CreateChildControls()
        {
            foreach (string textBox in TextBoxes)
            {
                Controls.Add(new TextBox() { ID = textBox });
                Controls.Add(new Literal() { Text = "<br/>" });
            }
        }

        public TextBox GetTextBox(string id)
        {
            return (TextBox)Controls.Cast<Control>().Where(t => (t.ID == null ? "" : t.ID.ToLower()) == id.ToLower()).SingleOrDefault();
        }

        public void AddTextBox(string id)
        {
            TextBoxes.Add(id);
        }
    }
}

示例标记

注意：将Assembly="ASPNetWebApplication"更改为您的程序集名称。

<%@ Register Assembly="ASPNetWebApplication" Namespace="ASPNetWebApplication.Controls" TagPrefix="ASPNetWebApplication" %>

...

<ASPNetWebApplication:TextBoxCollection ID="TextBoxCollection1" runat="server" />
<br />
<asp:Button ID="AddTextBoxesButton" runat="server" OnClick="AddTextBoxesButton_Click" Text="Add Some Text Boxes" />
<asp:Button ID="GetTextBoxValuesButton" runat="server" OnClick="GetTextBoxValuesButton_Click" Text="Get TextBox Values" Visible="false" />
<br />
<asp:Literal ID="TextBoxEntriesLabel" runat="server"></asp:Literal>

代码示例

protected void AddTextBoxesButton_Click(object sender, EventArgs e)
{
    for (int i = 0; i < 10; i++)
    {
        TextBoxCollection1.AddTextBox(string.Format("TextBox{0}", i));
    }

    AddTextBoxesButton.Visible = false;
    GetTextBoxValuesButton.Visible = true;
}

protected void GetTextBoxValuesButton_Click(object sender, EventArgs e)
{
    TextBoxEntriesLabel.Text = string.Empty;
    for (int i = 0; i < 10; i++)
    {
        string textBoxId = string.Format("TextBox{0}", i);
        TextBoxEntriesLabel.Text += string.Format("TextBox: {0}, Value: {1}<br/>", textBoxId, TextBoxCollection1.GetTextBox(textBoxId).Text);
    }
}

希望这能有所帮助。

- jdavies

Answer 2

在服务器端代码中很难做到这一点。您必须使用 jQuery/JavaScript来实现此目的。请阅读 MSDN 中的 asp.net 页面和控件生命周期。

- KV Prajapati

---

有没有办法在我点击其他按钮时阻止文本框被移除？ - Gavin Crawley