基于ViewBag，切换Country下拉框时如何单次Ajax更新MVC多下拉列表？

没问题，我来给你梳理下怎么用单次Ajax请求同时更新这三个下拉框——核心思路就是后端一次性返回所有需要的下拉选项数据，前端拿到后分别渲染每个下拉框就好，具体步骤如下：

1. 定义后端返回数据的ViewModel #

首先创建一个ViewModel类，用来封装要返回的城市、州、地区三个下拉列表的数据，这样后端可以一次性把所有数据打包返回：

public class LocationDataViewModel
{
    public List<SelectListItem> CityList { get; set; }
    public List<SelectListItem> StateList { get; set; }
    public List<SelectListItem> DistrictList { get; set; }
}

2. 编写Controller的Ajax接口 #

在你的业务Controller里添加一个Action，接收选中的国家ID，查询对应的三个下拉数据，封装成上面的ViewModel后返回JSON格式：

public JsonResult GetLocationData(int countryID)
{
    // 替换成你实际的数据库查询逻辑，根据countryID获取对应数据
    var cityOptions = _db.Cities
                          .Where(c => c.CountryID == countryID)
                          .Select(c => new SelectListItem 
                          { 
                              Text = c.CityName, 
                              Value = c.CityID.ToString() 
                          })
                          .ToList();

    var stateOptions = _db.States
                          .Where(s => s.CountryID == countryID)
                          .Select(s => new SelectListItem 
                          { 
                              Text = s.StateName, 
                              Value = s.StateID.ToString() 
                          })
                          .ToList();

    var districtOptions = _db.Districts
                              .Where(d => d.CountryID == countryID)
                              .Select(d => new SelectListItem 
                              { 
                                  Text = d.DistrictName, 
                                  Value = d.DistrictID.ToString() 
                              })
                              .ToList();

    var locationData = new LocationDataViewModel
    {
        CityList = cityOptions,
        StateList = stateOptions,
        DistrictList = districtOptions
    };

    // ASP.NET MVC 5+ 可以省略 JsonRequestBehavior.AllowGet
    return Json(locationData, JsonRequestBehavior.AllowGet);
}

3. 前端添加Ajax联动逻辑 #

确保页面已经引用了jQuery（MVC项目一般默认会包含），然后给国家下拉框绑定change事件，发起Ajax请求并更新三个下拉框：

<!-- 保留你的原有下拉框代码，给每个下拉框加上id方便选择（如果原来没有的话） -->
@Html.DropDownList("CountryID", (SelectList)ViewBag.CountryList, "请选择国家", new { style = "width:150px;", id = "CountryID" })
@Html.DropDownList("CityID", (SelectList)ViewBag.CityList, "请选择城市", new { style = "width:150px;", id = "CityID" })
@Html.DropDownList("StateID", (SelectList)ViewBag.StateList, "请选择州", new { style = "width:150px;", id = "StateID" })
@Html.DropDownList("DistrictID", (SelectList)ViewBag.DistrictList, "请选择地区", new { style = "width:150px;", id = "DistrictID" })

<script>
$(document).ready(function() {
    // 绑定国家下拉框的变更事件
    $("#CountryID").change(function() {
        var selectedCountryId = $(this).val();
        
        if (selectedCountryId) {
            // 发起Ajax请求
            $.ajax({
                url: '@Url.Action("GetLocationData", "YourControllerName")', // 替换成你的Controller名称
                type: 'GET',
                data: { countryID: selectedCountryId },
                beforeSend: function() {
                    // 可选：添加加载状态提示
                    $("#CityID, #StateID, #DistrictID").prop("disabled", true);
                },
                success: function(response) {
                    // 封装一个通用的下拉框更新函数，避免重复代码
                    function updateDropdown(selector, options, defaultText) {
                        $(selector).empty();
                        $(selector).append(`<option value="">${defaultText}</option>`);
                        $.each(options, function(index, item) {
                            $(selector).append(`<option value="${item.Value}">${item.Text}</option>`);
                        });
                    }

                    // 分别更新三个下拉框
                    updateDropdown("#CityID", response.CityList, "请选择城市");
                    updateDropdown("#StateID", response.StateList, "请选择州");
                    updateDropdown("#DistrictID", response.DistrictList, "请选择地区");
                },
                error: function() {
                    alert("加载位置数据失败，请稍后重试");
                },
                complete: function() {
                    // 可选：移除加载状态
                    $("#CityID, #StateID, #DistrictID").prop("disabled", false);
                }
            });
        } else {
            // 如果未选择国家，清空所有下拉框
            $("#CityID").empty().append('<option value="">请选择城市</option>');
            $("#StateID").empty().append('<option value="">请选择州</option>');
            $("#DistrictID").empty().append('<option value="">请选择地区</option>');
        }
    });
});
</script>

一些注意事项 #

• 记得把代码里的YourControllerName替换成你实际的Controller名称（比如Home、Location等）
• 后端的查询逻辑要根据你的实际数据结构调整，如果你的城市是关联州、州关联国家的层级结构，那需要调整查询条件，但只要后端一次性返回三个列表就行
• 可以根据需求添加加载状态、错误提示的样式优化，提升用户体验

内容的提问来源于stack exchange，提问作者Sylvester Naveen