First we will need to setup the JsonResult controller action.
/// <summary></summary>
/// Get Models
/// <param name="makeID" />
/// <returns></returns>
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.
Html.DropDownListFor((model) => model.MakeID, new SelectList(Model.Makes, "ID", "Description")) Html.DropDownListFor((model) => model.ModelID, new SelectList(Model.Models, "ID", "Description"))
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 = '<!--Url.Content("~/")-->' + '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("<option value=" + optionData.ID +">"+optionData.Description+"</option>");
});
});
}).change();
