I want to enable a pair of cascading dropdown lists within a form in an ASP.NET MVC3 / Razor2 application. Ideally the solution will meet the following goals:
- Child list populated simply by changing the selection of the parent list
- Both dropdown lists contained within the form as they need to post information on submit
- Uses Ajax to avoid whole page round-trip
- Uses Ajax Html helper for easy integration
- Works even if javascript is not enabled
So, from a user point of view, when an item in the parent dropdown is selected, the contents of the child dropdown is refreshed to display items related to it.
Can anyone please suggest the best way to do this?
EDIT.
No takers … suggests to me that there may be conflicting requirements in the above list of goals. The closest I got to the above was this article, which met all the goals except that it doesn’t work nested within an Html form.
So, I will restate the problem in a different way: how can I make an AJAX call from a dropdown list within an Html form so that I can populated another dropdown list with related items?
Took some time to find a reasonable solution to this, although so far I still don’t have a no-jquery fallback. This article shows you how to use AjaxHelper extensions to create your own Ajax-enabled controls. Works a treat, and very reusable.