Cascading DropDownList using ASP.NET MVC JsonResult and jQuery

Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace TestDropdownList.Models
{

    public class Person
    {
        
        public int PersonId { get; set; }
        
        public string PersonName { get; set; }
        
        [   Display(Name="Country"),
            Required
        ]   public string CountryCode { get; set; }
        
        [   Display(Name="City"),
            Required
        ]   public string CityCode { get; set; }

    }

    public class Country
    {
        public string CountryCode { get; set; }
        public string CountryName { get; set; }
    }

    public class City
    {
        public string CountryCode { get; set; }
        public string CityCode { get; set; }
        public string CityName { get; set; }
    }


}

View:

@model TestDropdownList.Models.Person
           

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>



@using (Html.BeginForm())
{    
    
    if (Model.PersonId != 0)
    {
        <text>Editing: </text> @Model.PersonName
    }
    
    <table>

    <tr>
    <td>@Html.LabelFor(x => x.CountryCode)</td>
    <td style="width: 100px">@Html.DropDownListFor(x => x.CountryCode, new List<SelectListItem>(), new { TheOriginalValue = Model.CountryCode })</td>
    </tr>
    
    
    <tr>
    <td>@Html.LabelFor(x => x.CityCode)</td>
    <td style="width: 100px">@Html.DropDownListFor(x => x.CityCode, new List<SelectListItem>(), new { TheOriginalValue = Model.CityCode })</td>
    </tr>      
    
    </table>
}
    


<script type="text/javascript">
    $(function () {


        var countryCodeInitialValue = $('#CountryCode').attr('TheOriginalValue');
        PopulateCountry(countryCodeInitialValue, function () {
            var cityCodeInitialValue = $('#CityCode').attr('TheOriginalValue');
            $('#CityCode').val(cityCodeInitialValue);            
        });





        $('#CountryCode').change(function () {
            // alert($(this).val() + ": " + $('option:selected', $(this)).text());


            // Why use this?
            // alert($('option:selected', '#CountryCode').val());

            // Or this?
            // alert($('option:selected', $(this)).val());


            // When this will suffice?
            PopulateFromCountry($(this).val());
        });


        /////////////////


        function PopulateCountry(countryCode, doneCallback) {
            $.ajax({ url: '/Home/CountryList/',
                type: 'POST',

                dataType: 'json',
                success: function (data) {

                    var options = $('#CountryCode');
                    $.each(data, function () {
                        options.append($('<option />').val(this.CountryCode).text(this.CountryName));
                    });



                    if (countryCode != "") {
                        $(options).val(countryCode);
                    }
                    else {
                        countryCode = $(options).val();
                    }

                    PopulateFromCountry(countryCode, doneCallback);

                } // ajax callback

            }); // ajax call

        } // PopulateCountry()


        function PopulateFromCountry(countryCode, doneCallback) {

            $.ajax({ url: '/Home/CityList/',
                type: 'POST',
                data: { CountryCode: countryCode }, // parameter on CityList method

                dataType: 'json',
                success: function (data) {

                    var options = $('#CityCode');
                    $('option', options).remove(); // will remove all cities

                    // repopulate all cities
                    $.each(data, function () {
                        options.append($('<option />').val(this.CityCode).text(this.CityName));
                    });


                    if (doneCallback != undefined)
                        doneCallback();


                } // ajax callback

            }); // ajax call

        } // PopulateFromCountry()

    }); //jquery ready

</script>

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestDropdownList.Models;

namespace TestDropdownList.Controllers
{
    public class HomeController : Controller
    {
        public static IList<Person> _persons = new List<Person>()
        {
            new Person{ PersonId = 1, PersonName = "Michael", CityCode = "MNL" },
            new Person{ PersonId = 2, PersonName = "Linus", CityCode = "ALB" },            
            new Person{ PersonId = 3, PersonName = "John", CityCode = "SHA" }
        };

        public ViewResult Index()
        {                        
            return View(new Person());
        }

        public ViewResult Edit(int id)
        {

            Person personToEdit = (from p in _persons where p.PersonId == id select p).Single();
            personToEdit.CountryCode = (from c in Cities where c.CityCode == personToEdit.CityCode select c.CountryCode).Single();
            return View("Index", personToEdit);
        }

        [HttpPost]
        public JsonResult CountryList()
        {            
            // normally, you pass a list obtained from ORM or ADO.NET DataTable or DataReader
            return Json(Countries);
        }

        [HttpPost]
        public JsonResult CityList(string CountryCode)
        {
            // normally, you pass a list obtained from ORM or ADO.NET DataTable or DataReader
            return Json(from c in Cities 
                        where c.CountryCode == CountryCode 
                        select new { c.CityCode, c.CityName });
            
        }

        // MOCK DATA //


        public List<Country> Countries
        {
            get
            {
                return new List<Country>()
                {
                    new Country { CountryCode = "PH", CountryName = "Philippines" },
                    new Country { CountryCode = "CN", CountryName = "China" },
                    new Country { CountryCode = "CA", CountryName = "Canada" },
                    new Country { CountryCode = "JP", CountryName = "Japan" }
                };
            }
        }//Countries



        public List<City> Cities 
        {
            get 
            {
                return new List<City>()
                {
                    new City { CountryCode = "PH", CityCode = "MNL", CityName = "Manila" },
                    new City { CountryCode = "PH", CityCode = "MKT", CityName = "Makati" },
                    new City { CountryCode = "PH", CityCode = "CBU", CityName = "Cebu" },

                    new City { CountryCode = "CN", CityCode = "BEI", CityName = "Beijing" },
                    new City { CountryCode = "CN", CityCode = "SHA", CityName = "Shanghai" },

                    new City { CountryCode = "CA", CityCode = "TOR", CityName = "Toronto" },
                    new City { CountryCode = "CA", CityCode = "MAN", CityName = "Manitoba" },
                    new City { CountryCode = "CA", CityCode = "ALB", CityName = "Alberta" },
                    new City { CountryCode = "CA", CityCode = "VAN", CityName = "Vancouver" },

                    new City { CountryCode = "JP", CityCode = "TOK", CityName = "Tokyo" }
                    
                };
            }
        }//Cities      

    }//HomeController
}

On the controller code, you can see that we retrieve the CountryCode based on Person's CityCode, you need to do this if your database design is heavily normalized, e.g. you don't store the CountryCode on Person table, as you can query it in City table anyhow.

To edit Linus for example, you type this in URL: http://localhost:1232/Home/Edit/2, Alberta will be retrieved for City and Canada for its Country:

Likewise if you type this in URL: http://localhost:1232/Home/Edit/3, the app will retrieve John and obtain Shanghai for City and China for Country

At first, I did this on View:

var countryCodeInitialValue = $('#CountryCode').attr('TheOriginalValue');
PopulateCountry(countryCodeInitialValue);

var cityCodeInitialValue = $('#CityCode').attr('TheOriginalValue');
$('#CityCode').val(cityCodeInitialValue);            

But it may not work, there's no guarantee that the population of City(done asynchronously too) is already done when you call the PopulateCountry. I forgot that the fetching of list are done asynchronously, so in order to wait for the completion of list population, we must provide a callback so we can do the necessary code when the fetching is completed.

This is the corrected code:

var countryCodeInitialValue = $('#CountryCode').attr('TheOriginalValue');
PopulateCountry(countryCodeInitialValue, function () {
    var cityCodeInitialValue = $('#CityCode').attr('TheOriginalValue');
    $('#CityCode').val(cityCodeInitialValue);            
});

You can get working demo from the code's SVN here: http://code.google.com/p/jquery-dynamic-dropdown-list-demo/source/browse/

Download code here: http://code.google.com/p/jquery-dynamic-dropdown-list-demo/downloads/list