.NET 6 MVC级联下拉列表遇404错误，无法加载州数据

你的级联下拉列表无法显示州数据，核心问题集中在控制器返回格式错误、JQuery逻辑缺陷以及Razor视图配置不当这几个地方，下面逐一修正：

1. 修正控制器返回格式（关键错误） #

当前LoadStateForCountry方法返回的是View（HTML内容），但前端用$.getJSON请求的是JSON数据，这会导致解析失败。需要修改控制器，直接返回JSON结果：

[HttpGet]
public async Task<IActionResult> LoadStateForCountry(int countryId) {
    var stateCollection = await _service.GetStates(countryId);
    // 直接返回JSON数据，而非View
    return Json(stateCollection);
}

2. 修复JQuery中的逻辑问题 #

• 文本判断错误：.text是JQuery方法，必须加括号()
• 优化URL传递方式：用参数传递替代字符串拼接，避免格式错误
• 增加错误处理：便于调试请求失败的情况

修正后的JQuery代码：

<script type="text/javascript">
    $(document).ready(function() { 
        $('#countryDropDown').change(function() {
            var selectedCountry = $(this).val();
            // 修正文本判断逻辑，同时校验选中值
            if (selectedCountry && $('#countryDropDown option:selected').text().trim() !== '') {
                $('#stateDropDown').prop('disabled', false);
                var options = `<option value="0">选择州/省</option>`
                
                $('#stateDropDown').empty();

                // 用参数传递countryId，避免URL拼接错误
                $.getJSON("/Home/LoadStateForCountry", { countryId: selectedCountry }, function(data) {
                    $.each(data, function(i, stateDetails) {
                        // 直接通过stateDetails访问属性，避免this指向歧义
                        options += `<option value="${stateDetails.stateId}">${stateDetails.stateName}</option>`;
                    });
                    $("#stateDropDown").html(options);
                })
                // 增加请求失败提示，便于调试
                .fail(function() {
                    alert("加载州数据失败，请检查请求是否正常");
                });
            
            } else {
                $('#stateDropDown').prop('disabled', true);
                $('#stateDropDown').html('<option value="0">选择州/省</option>');
            }
        });
    });
</script>

3. 调整Razor视图配置 #

因为是前端动态生成下拉选项，asp-items="@ViewBag.StateList"已无作用，反而可能干扰初始状态，建议移除并设置初始禁用状态：

<select class="form-control form-control-md my-2"
        id="stateDropDown"
        disabled
        placeholder="选择州/省">
    <option value="0">选择州/省</option>
</select>

额外调试建议 #

• 打开浏览器开发者工具（F12），切换到网络标签，查看LoadStateForCountry请求的状态码和返回内容，确认是否返回正确的JSON数据
• 检查StateModel类的属性是否为公共属性（必须是public，否则JSON序列化会失败）
• 在控制器方法中添加断点，确认countryId参数是否正确传递

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