asp.net MVC级联下拉列表

Question

我试图在asp.net中创建一些级联下拉列表。列表在页面加载时正确填充：

            <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>

我在视图中使用jQuery / Ajax：

<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>

这是调用控制器方法：

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

但是当我从＆＃34; Country＆＃34;更改选择时下拉，我得到一个弹出对话框，上面写着：

Failed to retrieve regions.[object Object]

我不确定该错误的含义或我如何调试此错误。我在控制器方法上设置了一个断点，但它永远不会命中它？

Answer 1

添加contentType：＆＃39; application / json＆＃39;在你的ajax电话中。

$.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);
                }
            });

Answer 2

您的下拉ID是 Region ，但在您的成功功能中，您使用 Regions

做一个小改动，它会起作用。

<强>控制器：

public class MyCountry
{
    public int CountryCode { get; set; }
    public string Country { get; set; }
}

public class Region
{
    public int CountryCode { get; set; }
    public string RegionName { get; set; }
}

public class ViewModel
{
    public List<MyCountry> Country { get; set; }
    public List<Region> Region { get; set; }
}

public class DropDownExampleController : Controller
{
    public ActionResult Index()
    {
        var model = new ViewModel();

        var c1 = new MyCountry { Country = "South Africa", CountryCode = 1 };
        var c2 = new MyCountry { Country = "Russia", CountryCode = 2 };

        model.Country = new List<MyCountry> { c1, c2 };

        var r1 = new Region { RegionName = "Gauteng", CountryCode = 1};
        var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 };
        var r3 = new Region { RegionName = "Siberia", CountryCode = 2 };

        model.Region = new List<Region> { r1, r2,r3};
        return View(model);
    }

    [HttpPost]
    public JsonResult GetRegionsByCountryCode(string countryCode)
    {
        var r1 = new Region { RegionName = "Gauteng", CountryCode = 1 };
        var r2 = new Region { RegionName = "Western Cape", CountryCode = 1 };
        var r3 = new Region { RegionName = "Siberia", CountryCode = 2 };

        var regions = new List<Region> { r1, r2, r3 };

        var results = regions.Where(r => r.CountryCode == Int32.Parse(countryCode)).ToList();

        return Json(results);
    }
}

查看：

@model MVCTutorial.Controllers.ViewModel

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#Country").change(function () {

            var countryCode = $("#Country").val();
            $("#Region").empty();

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

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