Question

我不想使用gridview，因为表单的其余部分不是。

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

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

我有什么痛苦的简单吗？

Answer 1

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

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

请参阅：Dynamically add a new text box on button click

希望这有帮助。

Answer 2

您可以使用jquery添加/删除输入[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"];

Answer 3

有两种方法。以下是使用纯WebForm功能。永远不要在生产中这样做。它使用太多的viewstate和太多的updatepanel

这是背后的代码

    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。

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

3 个答案: