.NET Core 7 Razor页面Ajax级联下拉框：分支列表不联动

一、后端GetRelatedBranches方法校验 #

确保方法符合Ajax请求要求，返回正确格式的Json数据：

[HttpGet]
public IActionResult GetRelatedBranches(string companyNo)
{
    if (string.IsNullOrEmpty(companyNo))
    {
        return Json(new List<object>());
    }
    // 对应需求SQL：select iBranchCode,vBranchDesc from branchs where companyno=选中的公司编号
    var branches = _dbContext.Branches
        .Where(b => b.CompanyNo == companyNo)
        .Select(b => new { Value = b.IBranchCode, Text = b.VBranchDesc })
        .ToList();
    return Json(branches);
}

• 必须标记[HttpGet]，确保能接收GET请求
• 返回匿名对象需包含Value（分支编码）和Text（分支名称）字段，方便前端渲染
• 检查路由正确性：Razor页面请求地址应为/AddUser?handler=GetRelatedBranches，建议用Url.Page("AddUser", "GetRelatedBranches")自动生成

二、前端代码修正 #

1. 下拉框基础结构 #

确保两个下拉框有唯一ID，绑定正确的模型字段：

<select id="companySelect" asp-for="CompanyNo" asp-items="@Model.CompanyList" class="form-control">
    <option value="">请选择公司</option>
</select>

<select id="branchSelect" asp-for="BranchCode" class="form-control">
    <option value="">请选择分支</option>
</select>

2. Ajax请求逻辑 #

修复监听事件、请求地址及渲染逻辑：

$(document).ready(function() {
    $("#companySelect").change(function() {
        var selectedCompany = $(this).val();
        // 清空分支下拉框并添加默认选项
        $("#branchSelect").empty().append('<option value="">请选择分支</option>');
        
        if (selectedCompany) {
            $.ajax({
                url: '@Url.Page("AddUser", "GetRelatedBranches")',
                type: 'GET',
                data: { companyNo: selectedCompany },
                success: function(branches) {
                    // 循环渲染分支选项
                    $.each(branches, function(index, branch) {
                        $("#branchSelect").append($('<option>', {
                            value: branch.Value,
                            text: branch.Text
                        }));
                    });
                },
                error: function(xhr) {
                    console.log("请求失败：" + xhr.responseText); // 调试用，查看具体错误
                }
            });
        }
    });
});

• 确认已引入jQuery：在页面或_Layout.cshtml中添加<script src="~/lib/jquery/jquery.min.js"></script>
• 参数名需与后端方法参数companyNo完全匹配（大小写敏感）

三、常见问题排查 #

• 数据库数据验证：直接执行SQL语句select iBranchCode,vBranchDesc from branchs where companyno='选中的公司编号'，确认是否有返回结果
• 请求调试：打开浏览器F12控制台，在Network标签下查看Ajax请求：
  • 检查请求地址是否正确（404表示地址错误）
  • 查看返回状态码（500表示后端代码报错）
  • 查看Response中的Json数据是否符合预期
• 路由权限：确保页面没有设置特殊权限限制，导致请求被拦截

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