First we will need to setup the JsonResult controller action.

/// 

/// Get Models
/// 
/// 
/// 
public JsonResult GetModels(string id)
{
	JsonResult result = new JsonResult();
	var filteredModels = from model in homeViewModel.Models
						 where model.MakeID.ToString() == id
						 select model;
	result.Data = filteredModels.ToList();
	result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
	return result;
}

This method now gives us the ability to use the nifty $.getJSON jquery call.
The signature for the call is as follows

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

Given that we have setup 2 Drop Down Lists, one for Makes and the other for Models, like so.

we can include the following bit of jquery

//Hook onto the MakeID list's onchange event
$("#MakeID").change(function() {
	//build the request url
	var url = '' + "Home/GetModels";
	//fire off the request, passing it the id which is the MakeID's selected item value
	$.getJSON(url, { id: $("#MakeID").val() }, function(data) {
		//Clear the Model list
		$("#ModelID").empty();
		//Foreach Model in the list, add a model option from the data returned
		$.each(data, function(index, optionData) {
			$("#ModelID").append("" + optionData.Description + "");
		});
	});
}).change();

CascadingDropDownList.zip (365.72 kb)