简体   繁体   English

C#-如何在单击按钮时动态添加和删除多个控件

[英]C# - How to add and delete multiple controls dynamically on button click

I am trying to code a survey application which requires text boxes to be added and removed dynamically. 我正在尝试编写一个调查应用程序,该应用程序要求动态添加和删除文本框。 I managed to create text boxes dynamically on button click but I'm trying to find out how to removed the text boxes dynamically. 我设法在单击按钮时动态创建了文本框,但是我试图找出如何动态删除文本框。 Currently the delete functions works well only if I remove text boxes starting from the last. 当前,只有当我从上一个开始删除文本框时,删除功能才能正常工作。 When I try deleting any text boxes in the middle followed by a delete of the last text box, a blank text box is created instead. 当我尝试删除中间的任何文本框,然后删除最后一个文本框时,将创建一个空白文本框。 I'm new to programming and am unsure if this is the best method to use. 我是编程新手,不能确定这是否是最佳方法。 Also, I would like to find out if it is possible to nest text boxes(allow users to add options to their multi choice questions) to created text boxes and retrieve values inside later. 另外,我想找出是否有可能将文本框嵌套(允许用户向其选择题添加选项)到创建的文本框并稍后再检索值。

Code behind: 后面的代码:

public partial class Dynamic_Form : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 0; i < TotalNumberAdded; ++i)
        {
            AddQuestion(i + 1);
        }
    }
    protected int TotalNumberAdded
    {
        get { return (int)(ViewState["TotalNumberAdded"] ?? 0); }
        set { ViewState["TotalNumberAdded"] = value; }
    }


    protected void btn_add_Click(object sender, EventArgs e)
    {
        TotalNumberAdded++;
        AddQuestion(TotalNumberAdded);
    }

    private void AddQuestion(int controlNumber)
    {
        Panel newquestion = new Panel();
        newquestion.ID = "Panel_" + controlNumber;

        TextBox questionbox = new TextBox();
        questionbox.ID = "Question_" + controlNumber;
        questionbox.Text = "Question";

        Button BtnDelete = new Button();
        BtnDelete.ID = "BtnDelete_" + controlNumber;
        BtnDelete.Text = "Delete"+ controlNumber;
        BtnDelete.Click += delete_Click;

        DropDownList DDLType = new DropDownList();
        DDLType.ID = "DDLType_" + controlNumber;
        DDLType.Items.Insert(0, new ListItem("TextField", ""));
        DDLType.Items.Insert(1, new ListItem("Multiple Choice", ""));

        //add controls
        questions.Controls.Add(newquestion);
        newquestion.Controls.Add(questionbox);
        newquestion.Controls.Add(DDLType);
        newquestion.Controls.Add(BtnDelete);
    }

    private void delete_Click(object sender,EventArgs e)
    {
        Button btn = (Button)sender;
        Control control = btn.Parent;

        if (questions.Controls.Contains(control))
        {
            questions.Controls.Remove(control);
            control.Dispose();
            TotalNumberAdded--;
            Response.Write("Number of Questions:" + TotalNumberAdded);
        }
    }
}

Html file: HTML文件:

<body>
<form id="form1" runat="server">
    <div>
        <h1>Test Form</h1>
        <asp:Button ID="btn_add" runat="server" Text="Add" OnClick="btn_add_Click" />
    </div>
    <div id="questions" runat="server">
    </div>
</form></body>

.

@Aaron Yong, You can do these scenarios from client side using jQuery or javascript too. @Aaron Yong,您也可以使用jQuery或javascript从客户端执行这些方案。 I have given below code to achieve what you want from server side. 我已经给出了以下代码,以实现服务器端的目标。

private void delete_Click(object sender,EventArgs e)
    {
        Button btn = (Button)sender;
        Control control = btn.Parent;

        if (questions.Controls.Contains(control))
        {
            TotalNumberAdded--;
            questions.Controls.Clear();
            for (int i = 0; i < TotalNumberAdded; ++i)
            {
                AddQuestion(i + 1);
            }
            Response.Write("Number of Questions:" + TotalNumberAdded);
        }
    }

You want to recreate controls again, i have added for loop and removed some code in delete click event, then you will achieve. 您想要再次重新创建控件,我添加了for循环并在delete click事件中删除了一些代码,那么您将实现。

As i have given above answer, you can also remove below code from previous answered. 正如我上面给出的答案,您还可以从以前的答案中删除下面的代码。

questions.Controls.Remove(control);
control.Dispose();

You will get exact answer 您将得到确切的答案

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM