Cascading Dropdownlist in MVC3- the ajax way

Creating a dropdownlist the ajax way using jQuery is kind of messy. Ajax Helpers in MVC3 has an elegant alternative using unobtrusive jquery.

Lets first create a simple page with ajax form

The UpdateTargetId property of the AjaxOptions says where the partial view is to be inserted on form submit.

The corresponding controller will be

Create a partial view that will hold the second dropdownlist like this


Now one last important thing do not forget to include the unobtrusive script in your layout page


In this example when we have binded the on change of event so that the form it is contained in is posted. The argument name of the method SelectFromDDL1 and the id of dropdownlist should be the same so that it is posted when the form is submitted.

Using the same  you can create any number of cascading dropdownlists.