在ASP.Net MVC中使用jQuery AJAX实现级联(依赖)国家/州城市DropDownLists

在ASP.NET MVC中使用jQuery AJAX实现级联（依赖）国家/州/城市DropDownLists是一个常见的需求，通常用于用户选择地址时。下面是一个详细的解答，包括基础概念、优势、类型、应用场景以及示例代码。

基础概念

级联DropDownLists是指一个下拉列表的选择会影响另一个下拉列表的内容。例如，选择国家后，州的下拉列表会显示该国家的所有州，选择州后，城市的下拉列表会显示该州的所有城市。

优势

用户体验：用户可以快速找到所需选项，减少手动输入错误。
数据一致性：确保数据的准确性和一致性。
减少服务器负载：通过AJAX异步加载数据，减少不必要的页面刷新。

类型

客户端级联：所有数据在客户端处理，适用于数据量较小的情况。
服务器端级联：每次选择后向服务器请求数据，适用于数据量较大的情况。

应用场景

电子商务网站：用户选择配送地址时。
注册表单：用户填写个人信息时。
管理后台：管理员选择相关分类或地区时。

示例代码

1. 创建模型

首先，创建一个模型来表示国家、州和城市。

public class Country
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class State
{
    public int Id { get; set; }
    public int CountryId { get; set; }
    public string Name { get; set; }
}

public class City
{
    public int Id { get; set; }
    public int StateId { get; set; }
    public string Name { get; set; }
}

2. 创建控制器

在控制器中添加方法来获取州和城市的数据。

public class AddressController : Controller
{
    private readonly ApplicationDbContext _context;

    public AddressController(ApplicationDbContext context)
    {
        _context = context;
    }

    public ActionResult Index()
    {
        var countries = _context.Countries.ToList();
        ViewBag.Countries = new SelectList(countries, "Id", "Name");
        return View();
    }

    public JsonResult GetStatesByCountryId(int countryId)
    {
        var states = _context.States.Where(s => s.CountryId == countryId).ToList();
        return Json(new SelectList(states, "Id", "Name"), JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCitiesByStateId(int stateId)
    {
        var cities = _context.Cities.Where(c => c.StateId == stateId).ToList();
        return Json(new SelectList(cities, "Id", "Name"), JsonRequestBehavior.AllowGet);
    }
}

3. 创建视图

在视图中添加DropDownLists并使用jQuery AJAX进行级联。

@model YourNamespace.Models.AddressModel

<div>
    <label for="Country">Country:</label>
    @Html.DropDownList("Country", (SelectList)ViewBag.Countries, "Select Country", new { id = "Country", @class = "form-control" })
</div>
<div>
    <label for="State">State:</label>
    <select id="State" name="State" class="form-control"></select>
</div>
<div>
    <label for="City">City:</label>
    <select id="City" name="City" class="form-control"></select>
</div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#Country').change(function () {
                var countryId = $(this).val();
                if (countryId != "") {
                    $.ajax({
                        url: '/Address/GetStatesByCountryId',
                        type: 'GET',
                        data: { countryId: countryId },
                        success: function (data) {
                            $('#State').empty();
                            $('#State').append($('<option></option>').val('').html('Select State'));
                            $.each(data, function (index, item) {
                                $('#State').append($('<option></option>').val(item.Value).html(item.Text));
                            });
                            $('#City').empty();
                            $('#City').append($('<option></option>').val('').html('Select City'));
                        }
                    });
                } else {
                    $('#State').empty();
                    $('#City').empty();
                }
            });

            $('#State').change(function () {
                var stateId = $(this).val();
                if (stateId != "") {
                    $.ajax({
                        url: '/Address/GetCitiesByStateId',
                        type: 'GET',
                        data: { stateId: stateId },
                        success: function (data) {
                            $('#City').empty();
                            $('#City').append($('<option></option>').val('').html('Select City'));
                            $.each(data, function (index, item) {
                                $('#City').append($('<option></option>').val(item.Value).html(item.Text));
                            });
                        }
                    });
                } else {
                    $('#City').empty();
                }
            });
        });
    </script>
}