ASP.Net Core 2.0 Razor Pages：如何向$.getJson返回JSON实现联动下拉？

刚接触Razor Pages遇到下拉框联动问题很正常，我帮你梳理一下完整的实现步骤，重点解决你怀疑的JSON返回格式问题，以及新手容易踩的其他坑。

一、后台PageModel核心代码 #

首先要确保后台的handler方法能正确返回JSON格式的选项数据，注意Razor Pages的handler方法命名规则（必须以OnGet/OnPost开头）：

public class YourPageModel : PageModel
{
    // 第一个下拉框的数据源
    public SelectList FirstDropdownOptions { get; set; }

    // 绑定第一个下拉框的选中值
    [BindProperty]
    public int SelectedFirstValue { get; set; }

    // 页面初始化时加载第一个下拉框数据
    public void OnGet()
    {
        // 这里模拟数据源，实际可替换为数据库查询
        var firstItems = new List<SelectListItem>
        {
            new SelectListItem { Value = "1", Text = "分类A" },
            new SelectListItem { Value = "2", Text = "分类B" },
            new SelectListItem { Value = "3", Text = "分类C" }
        };
        FirstDropdownOptions = new SelectList(firstItems, "Value", "Text");
    }

    // 处理第一个下拉框变化后的请求，返回第二个下拉框的选项
    public JsonResult OnGetGetSecondDropdownOptions(int firstId)
    {
        // 根据firstId获取对应子选项，这里模拟数据
        var secondItems = new List<SelectListItem>();
        switch (firstId)
        {
            case 1:
                secondItems.Add(new SelectListItem { Value = "101", Text = "分类A-子项1" });
                secondItems.Add(new SelectListItem { Value = "102", Text = "分类A-子项2" });
                break;
            case 2:
                secondItems.Add(new SelectListItem { Value = "201", Text = "分类B-子项1" });
                secondItems.Add(new SelectListItem { Value = "202", Text = "分类B-子项2" });
                secondItems.Add(new SelectListItem { Value = "203", Text = "分类B-子项3" });
                break;
            case 3:
                secondItems.Add(new SelectListItem { Value = "301", Text = "分类C-子项1" });
                break;
        }
        // 关键：必须返回JsonResult，确保输出标准JSON格式
        return new JsonResult(secondItems);
    }
}

二、前端HTML结构 #

在Razor页面中渲染两个下拉框：

<div class="form-group">
    <label asp-for="SelectedFirstValue">一级分类</label>
    <select id="firstDropdown" asp-for="SelectedFirstValue" asp-items="Model.FirstDropdownOptions" class="form-control"></select>
</div>

<div class="form-group">
    <label>二级分类</label>
    <select id="secondDropdown" class="form-control"></select>
</div>

三、前端JavaScript联动逻辑 #

监听第一个下拉框的change事件，通过AJAX请求后台handler获取数据并填充第二个下拉框：

@section Scripts {
    <script>
        // 获取DOM元素
        const firstDropdown = document.getElementById('firstDropdown');
        const secondDropdown = document.getElementById('secondDropdown');

        // 监听下拉框变化事件
        firstDropdown.addEventListener('change', async function() {
            const firstId = this.value;
            // 清空第二个下拉框
            secondDropdown.innerHTML = '';

            // 发送GET请求到后台handler
            try {
                const response = await fetch(`?handler=GetSecondDropdownOptions&firstId=${firstId}`);
                if (!response.ok) throw new Error('请求失败');
                
                // 解析JSON响应（这一步是你可能忽略的关键）
                const options = await response.json();

                // 添加默认提示选项
                const defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.textContent = '请选择二级分类';
                secondDropdown.appendChild(defaultOption);

                // 循环添加子选项
                options.forEach(option => {
                    const newOption = document.createElement('option');
                    newOption.value = option.value;
                    newOption.textContent = option.text;
                    secondDropdown.appendChild(newOption);
                });
            } catch (error) {
                console.error('联动出错:', error);
            }
        });
    </script>
}

四、常见问题排查（针对你的怀疑点） #

1. JSON返回格式错误：确保后台方法返回的是JsonResult，而不是直接返回对象或字符串——ASP.NET Core会自动将JsonResult序列化为标准JSON格式。
2. Handler方法无法匹配：方法名必须以OnGet开头，前端请求的handler参数要去掉前缀（比如后台是OnGetGetSecondDropdownOptions，前端用handler=GetSecondDropdownOptions）。
3. AJAX请求URL错误：如果页面不在根目录，要加上完整路径（比如/Pages/YourPage?handler=GetSecondDropdownOptions）。
4. 数据解析失败：前端必须调用response.json()（或jQuery的dataType: 'json'）来解析后台返回的JSON数据，否则会得到原始字符串无法处理。

你可以打开浏览器开发者工具（F12），切换到Network标签，查看AJAX请求的状态码和返回内容：如果返回200且内容是标准JSON数组，说明后台没问题，问题在前端解析；如果返回404，说明handler方法没匹配到；如果返回HTML错误页面，说明后台代码有异常。

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