Updating a control outside the UpdatePanel

Question

So I have a UserControl with some cascading DropDownLists on it. Selecting from list 1 enables list 2, which in turn enables list 3. Once you've made a selection in all three lists, you can move to the next page.

The DropDownLists are all inside an UpdatePanel. But the "Next Page" button is outside the UpdatePanel. That button should be disabled until all three lists have a selection, and then it should be enabled again. But since the button is outside the UpdatePanel, it doesn't update when I make selections. (Edit: The "Next Page" button is on a page that also contains the UserControl.)

I know one way to resolve this:

var scriptManager = ScriptManager.GetCurrent(this.Page);
scriptManager.RegisterPostBackControl(dropDownList1);
scriptManager.RegisterPostBackControl(dropDownList2);
scriptManager.RegisterPostBackControl(dropDownList3);

This ensures a postback when any dropdown list is changed, so that the button can update. But if I do this, I might as simplify by getting rid of the UpdatePanel in the first place.

Is there another way, through some clever JavaScript or something, that I can update a control outside an UpdatePanel without having to give up Ajax?

Answer 1

Could you not add a update panel around the "next page" and then add a trigger to the dropdownlist updatepanel for triggering the next page update panel?

Just throwing out ideas, without actually having tried it :)

Answer 2

This would ideally be done in javascript, with a server-side validation check in the click event handler.

A quick jQuery example:

//assuming the dropdowns all have the css class "cascade"
$('select.cascade').change(function() {
  If ($('option:selected',this).length == 3) {
    $('input[id$=btnNext]').removeAttr('disabled');
  }
});

Answer 3

Place an UpdatePanel around the next button and create a trigger for each of the dropdowns so that it fires an async postback. Ex:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="dropDownList1" />
    <asp:AsyncPostBackTrigger ControlID="dropDownList2" />
    <asp:AsyncPostBackTrigger ControlID="dropDownList3" />
</Triggers>