Here's a nice way to do it :
Suppose that we have two drop lists, country and city ,, the city drop down is disabled by default and when a country is selected the following happens :
1. city drop down list gets enabled.
2. An AJAX call is made to an action method with the selected country and a list of cities is returned.
3. the city drop down list is populated with the JSON data sent back.
Credits for the original code goes to King Wilder from MVC Central. This example is a simplified version that was extracted from his code in the Golf Tracker Series.
HTML
<select id="Country">
// a List of Countries Options Goes Here.
</select></div>
<select id="City" name="City" disabled="disabled">
// To be populated by an ajax call
</select>
JavaScript
// Change event handler to the first drop down ( Country List )
$("#Country").change(function() {
var countryVal = $(this).val();
var citySet = $("#City");
// Country need to be selected for City to be enabled and populated.
if (countryVal.length > 0) {
citySet.attr("disabled", false);
adjustCityDropDown();
} else {
citySet.attr("disabled", true);
citySet.emptySelect();
}
});
// Method used to populate the second drop down ( City List )
function adjustCityDropDown() {
var countryVal = $("#Country").val();
var citySet = $("#City");
if (countryVal.length > 0) {
// 1. Retrieve Cities that are in country ...
// 2. OnSelect - enable city drop down list and retrieve data
$.getJSON("/City/GetCities/" + countryVal ,
function(data) {
// loadSelect - see Note 2 bellow
citySet.loadSelect(data);
});
}
}
Action Method
[HttpGet]
public ActionResult GetCities(string country)
{
Check.Require(!string.IsNullOrEmpty(country), "State is missing");
var query = // get the cities for the selected country.
// Convert the results to a list of JsonSelectObjects to
// be used easily later in the loadSelect Javascript method.
List<JsonSelectObject> citiesList = new List<JsonSelectObject>();
foreach (var item in query)
{
citiesList.Add(new JsonSelectObject { value = item.ID.ToString(),
caption = item.CityName });
}
return Json(citiesList, JsonRequestBehavior.AllowGet);
}
Important Notes:
1. The JsonSelectObject help make things easier when converting the results to an option tag as it will be used in the javascript loadSelect method below.
it's basically a class with the two properties value and caption :
public class JsonSelectObject
{
public string value { get; set; }
public string caption { get; set; }
}
2. The function loadSelect is a helper method that takes a list of json objects originally of typeJsonSelectObject , converts it to a list of options to be injected in calling drop down list. it's a cool trick from the "jQuery In Action" book as referenced in the original code, it's included in a jquery.jqia.selects.js file that you will need to reference. Here's the code in that js file :
(function($) {
$.fn.emptySelect = function() {
return this.each(function() {
if (this.tagName == 'SELECT') this.options.length = 0;
});
}
$.fn.loadSelect = function(optionsDataArray) {
return this.emptySelect().each(function() {
if (this.tagName == 'SELECT') {
var selectElement = this;
selectElement.add(new Option("[Select]", ""), null);
$.each(optionsDataArray, function(index, optionData) {
var option = new Option(optionData.caption,
optionData.value);
if ($.browser.msie) {
selectElement.add(option);
}
else {
selectElement.add(option, null);
}
});
}
});
}
})(jQuery);
This method might be complex ,,, but at the end you will have a clean & compact code that you can use everywhere else.
I hope this was helpful ,,,
Update
Using POST instead of GET in the AJAX call
You can replace the $.getJSON call with the following code to make the ajax call using POST instead of GET.
$.post("/City/GetCities/", { country: countryVal }, function(data) {
citySet.loadSelect(data);
});
also remember to change your Action method to accept POST requests by changing the [HttpGet] annotation with [HttpPost] and remove the JsonRequestBehavior.AllowGet when returning the result in the Action Method.
Important Note
Note that we are using the value of the selected item rather than the name. for example if the user selected the following option.
<option value="US">United States</option>
then "US" is sent to the Action method and not "United States"
Update 2: Accessing the Selected Values In The Controller
suppose that you have the following two properties in your Vehicle viewmodel:
public string Maker { get; set; }
public string Model { get; set; }
and you name your select elements with the same name as your ViewModel properties.
<select id="Maker" name="Maker">
// a List of Countries Options Goes Here.
</select></div>
<select id="Model" name="Model" disabled="disabled">
// To be populated by an ajax call
</select>
Then the selected values will be automatically Bound to your ViewModel and you can access them directly in you Action Method.
This will work if the page is Strongly Typed to that ViewModel.
Note: For the first list ( The Makes List ) you can create a MakersList of type SelectList in your ViewModel and use the HTML helper to automatically populate your Makers Drop Down with the list in your ViewModel. the code will look something like this :
<%= Html.DropDownListFor(model => model.Maker, Model.MakersList) %>
In that case the generated name for this select will be also "Maker" (the name of the property in the ViewModel).
I hope this is the answer you are looking for.