如何删除动态添加的文本框?

时间:2015-01-15 14:43:32

标签: c# asp.net webforms

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

的方法

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

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

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

被修改 这现在有效,但由于某种原因,第一次单击按钮时文本框不会删除文本框被删除

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

2 个答案:

答案 0 :(得分:0)

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

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

另一种可能性是通过客户端执行大量此操作,这与使用jQuery的.hide();.show();一样简单。

另请注意,您的方法会在维护查看状态方面造成困难。提议的解决方案的另一个问题是,更新面板将页面存储在内存中,然后通过Ajax重新创建它。

<asp:UpdatePanel>将是您避免回发所需的。

老实说,你可以这样做:

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

正如我所说,虽然您可以使用服务器执行此操作,但最好使用客户端然后调用服务

重要提示:如果这些是您的事件处理程序名称,那么当您为其设计两个单独的任务时,您不应该两者都相同。


<强>更新/实施例

// 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并填充适当的控件。

此代码非常粗糙,对于生产而言并不明智,因为它适用于具有该单个ID或包含验证的控件。您需要循环访问控件,确保在尝试删除之前检测到并存在正确的Id。您需要调试代码并进行验证。

答案 1 :(得分:0)

您可以从占位符中移除文本框,如下所示:

protected void Remove(object sender, EventArgs e)
{
    foreach (Control control in PlaceHolder1.Controls)
    {
        //Here you need to take ID from ViewState["controlIdList"]
        if (control.ID == "TakeIDFromControlListsID")
        {
            Controls.Remove(control);
            control.Dispose();
        }
    }
 }