按钮点击动态添加一个新的文本框

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> 

我的问题是，我可以每次只添加一个文本框，我也有一个搜索按钮为页面上的右侧面板，如果点击此按钮，则创建的文本框将消失。任何帮助，将不胜感激。

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

希望这有助于。

Answer 2

使用服务器端代码无法轻松做到这一点。你必须为此使用jQuery/JavaScript。请阅读MSDN的asp.net Page和控制生命周期。