How to retain new controls after PostBack?

Question

I am creating a web app that allows the user to create their own forms. but once a control is added (for example a new label with its control) it will be deleted upon me trying to add another object to the form. this is the code for the button that creates the new item.

protected void createFormButton_Click(object sender, EventArgs e)
    {

       ////titles is the div id of where i want to insert the title label
        var titlelabel = new Label();
        titlelabel.Text = textboxForTitle.Text;
        titles.Controls.Add(titlelabel);
        controls.Add(titlelabel);

        if (optionsDropdown.SelectedValue == "Checkbox")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new CheckBox();
            newControl.CssClass = "checkbox";
            newControl.Checked = true;
            elements.Controls.Add(newControl);
            controls.Add(newControl);
        }

        else if (optionsDropdown.SelectedValue == "Textbox")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new TextBox();
            newControl.Text = "this is some text on the new box";
            newControl.CssClass = "form-control";
            elements.Controls.Add(newControl);
        }

        else if (optionsDropdown.SelectedValue == "Dropdown")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new DropDownList();
            newControl.Items.Add("one");
            newControl.Items.Add("two");
            newControl.Items.Add("three");
            newControl.CssClass = "form-control";
            elements.Controls.Add(newControl);
        }
    }

how can I save the new controls, so with each button click they previous control does not get deleted on postback?

Answer 1

When adding controls dynamically they are deleted on each postback. Now if you follow the lifecycle of an asp page you will notice that the viewstate ( the variable that holds all of your data from the client side objects) comes after the page.init. So when working with dynamically added controls in asp you need to recreate then on each postback in the page.init event. Then the viewstate is loaded into thoses controls. The way i do it is i keep everycontrol created in a list(of control) in session and add them in the placeholder at the page.init

Answer 2

You could create a class-level variable which is a List of controls, rather than adding an item to the built-in controls collection. In your case you would need two, since you are adding controls both to the page and the elements div. These lists will persist across postbacks, so each time you can repopulate the page controls accordingly at the end of your method via AddRange.

NOTE: code untested.

List<Control> pageControls = new List<Control>();
List<Control> elementControls = new List<Control>();

protected void createFormButton_Click(object sender, EventArgs e)
    {

       ////titles is the div id of where i want to insert the title label
        var titlelabel = new Label();
        titlelabel.Text = textboxForTitle.Text;
        titles.Controls.Add(titlelabel);
        pageControls.Add(titlelabel);

        if (optionsDropdown.SelectedValue == "Checkbox")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new CheckBox();
            newControl.CssClass = "checkbox";
            newControl.Checked = true;
            elements.Controls.Add(newControl);
            pageControls.Add(newControl);
        }

        else if (optionsDropdown.SelectedValue == "Textbox")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new TextBox();
            newControl.Text = "this is some text on the new box";
            newControl.CssClass = "form-control";
            elementControls.Add(newControl);
        }

        else if (optionsDropdown.SelectedValue == "Dropdown")
        {
           //elements is the div id of where i want to insert the control
            var newControl = new DropDownList();
            newControl.Items.Add("one");
            newControl.Items.Add("two");
            newControl.Items.Add("three");
            newControl.CssClass = "form-control";
            elementControls.Add(newControl);
        }
        Controls.AddRange(pageControls);
        elements.Controls.AddRange(elementControls);
    }