Question

I want to fill an updatepanel with new dynamic controls in response to a button click.

However, I also want to be able to access the values of these dynamic controls in response to an event in one of the controls.

Specifically, I want the button to bring up two dropdownmenus. One of the menus (or both if need be) is in another update panel. I want the first menu in the update panel to change its data in response to a value getting selected in the other menu.

I think my problem is that when I cause a postback with one dropdownmenu I lose the other dropdownmenu because I created it in the button_click handler.

I know I should create dynamic controls in the Page_Init method (or so ive heard) but I only want the controls to show up if the button is clicked. There are other buttons on the page which need to create a different set of dynamic controls.

Thanks.

Answer 1

There are a lot of ways you can handle this, and which approach to take really depends on your project’s requirements and your available resources.

The smoothest way to do it that would generally provide the best user experience would be to use a Javascript technique to hide and show controls as the page required them. JQuery is the library I would recommend for this. On the most basic level, you simply wire the control’s activation (such as a button_click event) and hide or show a div containing the dynamic content as necessary, like so:

$("#control").show();
// and
$("#control").hide();

Alternatively, you can do this in C# by using the Visible property on many of the normal web controls for ASP.NET. The usual code-behind approach would look something like this:

private void btnControl_Click(object sender, EventArgs e)
{
    var dynamicControl1 = FindControl("dynamicControl1");
    dynamicControl.Visible = false; // or true, as the case may be
}

This particular approach is mostly attached to code-behinds, though, which I would encourage you to avoid if possible. They are practically impossible to test and will make projects a pain to work in. You can use a similar approach in the MVC3 framework, of course, it will just be a little different how you send and receive the control you are setting to not be visible. The other benefit this has that is kind of nice is that if something is set to not be visible, it tends not to even be displayed in the HTML generated by the templating engine (YMMV depending on the engine, but I know this is true in Razor). So someone viewing the source of your webpage won’t be able to see inactive controls, which may or may not be something that appeals to you.

EDIT: I see the problem is less to do with how to display these things, and more with how to create and read them back given on-the-fly input.

I’m sure there’s a way to do this with Javascript (which would more than probably be the cleanest and best way to do this), but I’m not good enough with JS to know the answer to that one. The way you would handle this in ASP.NET is make the div you’re going to add controls to server-side (by using runat='server', then add what you need there. Again, the trivial code-behind approach would be something like:

private void btnControl_Click(object sender, EventArgs e)
{
    foreach(var checkBoxChecked in chkBoxes.Where(x => x.Checked))
    {
        div.Controls.Add(new WebControl()) // or whatever the heck else it is you need.
    }
}

This presumes that you have an IEnumerable<CheckBox> to iterate over, of course. You may also want an IList<WebControl> to keep track of all the junk you’re adding. You will also need to make sure the CSS is applied properly to the div for the controls you’re adding. And again, code-behinds are pretty awful and I use the example only because it’d be easy to spin up in a project to test for yourself.