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

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

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

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