如何删除动态添加的文本框? [英] How do I remove my dynamically added textbox?

问题描述

在我的代码隐藏中，我创建了一种动态添加 asp:Textbox 的方法

here in my codebehind I have created a way to add asp:Textbox dynamically

创建按钮操作以创建文本字段

Create button action to create text field

List<string> controlIdList = new List<string>();
int counter = 0;
protected override void LoadViewState(object savedState)
{
    base.LoadViewState(savedState);
    controlIdList = (List<string>)ViewState["controlIdList"];
    foreach (string Id in controlIdList)
    {
        counter++;
        TextBox tb = new TextBox();
        tb.ID = Id;
        LiteralControl linebreak = new LiteralControl("<br />");
        LiteralControl openLI = new LiteralControl("<li>");
        LiteralControl closeLI = new LiteralControl("</li>");

        PlaceHolder1.Controls.Add(openLI);
        PlaceHolder1.Controls.Add(tb);
        PlaceHolder1.Controls.Add(closeLI);
        PlaceHolder1.Controls.Add(linebreak);
    }
}


protected void btnAddTextBox_Click(object sender, EventArgs e)
{
    foreach (Control control in PlaceHolder1.Controls)
    {               

        counter++;
        TextBox tb = new TextBox();
        tb.ID = "Textbox" + counter;

        LiteralControl linebreak = new LiteralControl("<br />");
        PlaceHolder1.Controls.Add(tb);
        PlaceHolder1.Controls.Add(linebreak);
        controlIdList.Add(tb.ID);
        ViewState["controlIdList"] = controlIdList;
    }
}

现在，当我尝试删除按钮时，所有发生的都是回发.控件不会被删除.这是我尝试过的:

Now when I try to remove the button all that happens is a postback. The control does not get removed. Here is what I have tried:

已编辑这现在有效，但由于某种原因文本框不会在我第一次单击第二次单击按钮时删除文本框被删除

Edited This works now but for some reason the textbox does not delete the first time I click the button on the second click the textbox gets removed

protected void btnRemoveTextBox_Click(object sender, EventArgs e)
{
    foreach (Control control in PlaceHolder1.Controls)
    {
        var tb = new TextBox();
        tb.ID = "Textbox" + counter;
        if ((control.ID == tb.ID.ToString()) && (control.ID != null))
        {
            controlIdList.Remove(tb.ID);
            ViewState["controlIdList"] = controlIdList;
        }
    }
}       

推荐答案

您需要将数据包装在更新面板中，否则每次您的页面都必须转到服务器回传将会发生.这样，当您的逻辑到达服务器时，您的删除逻辑确实可以在没有回发的情况下执行.

You'll need to have your data wrapped in an Update Panel, otherwise every time your page has to go to the server a Postback will occur. That way when your logic hits the server, your remove logic can indeed execute without the Postback.

您也可以简单地将控件可见性设置为 false.

You could also simply set the control visibility to false.

另一种可能性是通过客户端完成大部分工作，就像 .hide(); 或 .show(); 一样简单jQuery.

Another possibility would be to do a large chunk of this via the Client, which would be as simple as .hide(); or .show(); with jQuery.

还要记住，您的方法会在维护视图状态时造成困难.所提议的解决方案的另一个问题是，更新面板将页面存储在内存中，然后通过 Ajax 重新创建它.

Also keep in mind your approach will create difficulties in maintaining the View State. Another issue with the proposed solution, an Update Panel stores the page in memory then recreates it via Ajax.

将是您避免回发所需要的.

<asp:UpdatePanel> would be what you need to avoid a Postback.

老实说，你可以很简单地这样做:

Honestly you could do it quite simply like:

... btnRemoveTextbox_Click(..., ...)
{
     txtDynamic.Visibility = false;
}

正如我所说，虽然你可以用服务器来做到这一点，但你最好使用客户端然后调用一个服务.

As I said, though you can do this with the server you may be better off with Client Side then call, a Service.

重要提示:如果这些是您的事件处理程序名称，那么当您为它们设计了两个单独的任务时，它们不应相同.

Important: If those are your Event Handler names, you shouldn't have both be identical when you have two separate task designed for them.

更新/示例

// Front-End:
<asp:ScriptManager ID="scmPage" runat="server" ></asp:ScriptManager>
<asp:UpdatePanel ID="updDemo" runat="server">
    <ContentTemplate>
        <asp:PlaceHolder ID="plhControl" runat="server"></asp:PlaceHolder>
        <asp:Button ID="btnCreateText" runat="server" Text="Create" OnClick="btnCreateText_Click" />
        <asp:Button ID="btnRemoveText" runat="server" Text="Remove" OnClick="btnRemoveText_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

// Backend:
protected void btnCreateText_Click(object sender, EventArgs e)
{
    var text = new TextBox();
    text.ID = "txtDynamic";

    plhControl.Controls.Add(text);

}

protected void btnRemoveText_Click(object sender, EventArgs e)
{
    var text = new TextBox();
    text.ID = "txtDynamic";
    text.Visible = false;
}

这确实有效，我刚刚试过了.这里需要注意的一件事是，您需要确保拥有有效的 ID 并填充正确的控件.

And that actually works, I just tried it. One thing to note here, you need to ensure you have a valid id and populate the proper control.

这段代码非常粗糙，对于生产来说并不明智，因为它适用于具有单个 Id 或包含验证的控件.您需要遍历控件，确保在尝试删除之前检测到并存在正确的 ID.您需要调试代码并进行验证.

这篇关于如何删除动态添加的文本框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！