Changing Dynamic Controls via DropDownList on Content Page

Question

Problem: Content Page with Wizard Control with UpdatePanel and Placeholder. Above the UpdatePanel is a DropDownList. I need to display different input controls below the drop-down list when the user changes the selection in the drop-down list. When the user clicks 'Next' on the wizard control, I need to be able to get the data out of those dynamic controls as well.

I know all the dynamic controls have to be created in the OnInit method in order to get the data back from those controls during the postback. However, when the drop-down list's SelectedIndexChanged event is fired, the OnInit method is called... then the PageLoad... and finally the handler for the SelectedIndexChanged event is called. ViewState hasn't been restored until well after the OnInit & PageLoad methods have been called, so there is no way to know what the user chose in the list box at the time OnInit is called... which exactly when I'm required to create the dynamic controls.

So... how do you solve this problem? Do you just have to write the entire page, or most of it, using JavaScript?

Thanks in advance.

Answer 1

I tend to use an old school method for this type of requirement. I would write all of the controls that are needed in the update panel, with their Visible property set to false. Then, on post back read the drop down's state and set the approperate controls Visible property to true. This way there is no "dynamic" controls, and due to the fact that controls whose Visible property is false are not rendered, they are not downloaded until the user should see them.

Answer 2

you can also use an asp:hiddenfield and set the value to a case var you mentally create. then run a small jQuery script on top to look at

$(document).on("change", "#ddlSelector", setControls);

then just make a function, for instance:

function setControls(event) { 
    event.preventDefault();
    var selector = hiddenfield.val();
}

then any item to show/hide can be done with getting the tag:

$("#elementName").css("display", "inline"); 

or display, none to hide. I used this at work because at times you need to change without firing the postback, but still collect data when they engage the form.

I typically avoid jQuery for many events for strength of code and security, but DOM element manipulation can be much easier at times with jQuery.