c# - asp.net MVC cascading dropdown lists

Question

I'm trying to create some cascading dropdown lists in asp.net. The lists are populating correctly on page load:

            <div class="form-group">
                @Html.LabelFor(m => m.Country)
                @Html.DropDownListFor(m => m.Country, new SelectList(Model.CountriesDDL, "CountryCode", "Country"), "--Select--", new { @class = "form-control" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Region)
                @Html.DropDownListFor(m => m.Region, new SelectList(Model.RegionsDDL, "CountryCode", "RegionName"), "--Select--", new { @class = "form-control" })
            </div>

I'm using jQuery/Ajax in the view:

<script type="text/javascript">
    $(document).ready(function () {
        $("#Country").change(function () {
            $("#Region").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetRegionsByCountryCode")',
                dataType: 'json',
                data: { countryCode: $("#Country").val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                        $("#Regions").append('<option value="'
                         + value.CountryCode + '">'
                         + value.RegionName + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve regions.' + ex);
                }
            });
            return false;
        })
    });
</script>

That is calling a controller method:

    [HttpPost]
    public JsonResult GetRegionsByCountryCode(string countryCode)
    {
        var regions = _uiRepository.GetRegionsByCountryCode(countryCode);
        return Json(regions);
    }

But when I change a select from the "Country" dropdown, I get a popup dialog that says:

Failed to retrieve regions.[object Object]

I'm not sure what that error means or how I can debug this. I set a break point on the controller method, but it never hits it?

Answer 1

Add contentType:'application/json' in your ajax call.

$.ajax({
                type: 'POST',
                url: '@Url.Action("GetRegionsByCountryCode")',
                dataType: 'json',
                contentType:'application/json'
                data: { countryCode: $("#Country").val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                        $("#Regions").append('<option value="'
                         + value.CountryCode + '">'
                         + value.RegionName + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve regions.' + ex);
                }
            });