Cascading Drop Down with ASP.NET MVC, jQuery with JSON

Cascading drop down is webform is pretty easy by using postback - or UpdatePanel. In MVC, how would it be done? jQuery comes to the rescue for this problem. Since ASP.NET MVC is able to return a JSON format result, what we need to do then is just calling that Controller's Action via jQuery and then display the drop down. Let's use an example:Say I want to list available counties per state. So the the first drop down will be the state drop down, and based on the selection of the state, the second drop down will display available counties for the selected state.

Here is a snippet of the HTML for our two drop downs, for both states and counties.

 
<%= Html.DropDownList("StateID", Model.StateList) %>
<select name="CountyID" id="CountyID"></select>

So since we need to (re)populate the county drop down for each selection/change of the StateID drop down, we use the .change method in jQuery.

 
$(document).ready(function() {
    $("#StateID").change(function() {    });
});

First, we need to get the selected State and also make sure that the default State selection will also execute and display the list of Counties appropriately.

 
$(document).ready(function() {
    $("#StateID").change(function() {
        var strStateID = "";
        strStateID = $(this)[0].value; // get the selected state id
    })
    .change(); // making sure the event runs on initialization for default value
});

Once we have the state id, we can then call our controller's action to get a list of counties back via AJAX.

 
$(document).ready(function() {
    $("#StateID").change(function() {
        var strStateID = "";
        strStateID = $(this)[0].value; // get the selected state id
        var url = "/MyController/Counties/" + strStateID;
        // call controller's action
        $.getJSON(url, null, function(data) {
            // do something once the data is retrieved
        });
    })
    .change(); // making sure the event runs on initialization for default value
});

With the data in hand, we can (re)build the County drop down with the values returned from the controller.

 
$(document).ready(function() {
    $("#StateID").change(function() {
        var strStateID = "";
        strStateID = $(this)[0].value; // get the selected state id
        var url = "/MyController/Counties/" + strStateID;
        // call controller's action
        $.getJSON(url, null, function(data) {
            // do something once the data is retrieved
            $("#CountyID").empty();
            $.each(data, function(index, optionData) {
                $("#CountyID").append("<option value='"
                     + optionData.CountyID
                     + "'>" + optionData.CountyName
                     + "</option>");
            });
        });
    })
    .change(); // making sure the event runs on initialization for default value});