Webforms：允许用户添加/删除文本框的最简单方法？答案

【问题标题】：Webforms : Simplest way to allow a user to add/remove textboxes?Webforms：允许用户添加/删除文本框的最简单方法？
【发布时间】：2011-11-03 20:41:16
【问题描述】：

我不想使用网格视图，因为表单的其余部分不是。

我只需要能够创建一个控件来动态添加/删除文本框并将值作为对象列表或逗号分隔的字符串取回。事实证明，这比它应该的要困难得多。

我尝试使用 Jquery + 一个常规的 asp.net 文本框，但这只有在他们从头开始时才能很好地工作——用他们的信息预先填充 DOM 变得很痛苦。

我是否缺少一些非常简单的东西？

【问题讨论】：

标签： asp.net webforms viewstate user-controls

【解决方案1】：

听起来您可以从创建 CompositeControl 中受益。

我最近回答了一个基于动态创建文本框的类似问题，我在其中提供了一个相当详细的示例。

见：Dynamically add a new text box on button click

希望这会有所帮助。

【讨论】：

【解决方案2】：

您可以使用 jquery 添加/删除 input[type=text] 元素，然后在后面的代码中使用 Request.Form 通过元素名称获取值。

javascript：

var itemCount = 0;
$("#list .add").click(function(){ 
  itemCount++;
  $(this).append("<input type='text' name='item"+itemCount+"'/><button class='remove'>Remove</button>");
});

$("#list .remove").click(function(){ 
  $(this).prev().remove();
});

后面的代码：

string value1 = Request.Form["item1"];
string value2 = Request.Form["item2"];

【讨论】：

【解决方案3】：

有两种方法。以下是使用纯 WebForm 功能制作的。永远不要在生产中这样做。它使用了太多的视图状态和太多的更新面板

这是后面的代码

    public List<String> ValueContainer {
        get {
            return (List<String>)ViewState["ValueContainer"];
        }
        set {
            ViewState["ValueContainer"] = value;
        }
    }
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            ValueContainer = new List<string>();
        }
    }
    private void PopulateRepeater() {
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }

    protected void lbAdd_Click(object sender, EventArgs e) {
        ValueContainer.Add("");
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }
    protected void rp1_ItemCommand(Object Sender, RepeaterCommandEventArgs e) {
        ValueContainer.RemoveAt(e.Item.ItemIndex);
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }

这是标记

 <asp:ScriptManager runat="server" ID="sm1" />
    <asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate>
        <asp:Repeater runat="server" OnItemCommand="rp1_ItemCommand" ID="rp1">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="myTextBox" /> <asp:LinkButton Text="Remove" runat="server" ID="lbRemove" />
            </ItemTemplate>
        </asp:Repeater>
        <asp:LinkButton runat="server" ID="lbAdd" onclick="lbAdd_Click" Text="Add" />
    </ContentTemplate>
    </asp:UpdatePanel>

这是更轻量级的版本

<asp:HiddenField runat="server" ID="hfMyField" ClientIDMode="Static" />
<script type="text/javascript">
    //<![CDATA[
    function addTextBox() {
        $("#myTextboxesContainer").append($("<input type='text' />").keyup(function () {
            var Data = "";
            $("#myTextboxesContainer input").each(function () {
                Data += $(this).val() + ","; 
            });
            $("#hfMyField").val(Data);
        }));
    }
    //]]>
</script>
<div id="myTextboxesContainer">

</div>
<a href="javascript:;" onclick="addTextBox();">Add textbox</a>

这里的想法是使用客户端脚本进行所有 dom 操作并将所有内容存储在隐藏字段中。回发数据后，您可以以标准方式检索隐藏字段的值，即hfMyField.Value。在本例中为 CSV。

【讨论】：