基于MVC+JQuery的二级下拉框联动无数据显示问题排查

你的联动失效问题，前后端都存在需要修正的点，我来一步步拆解：

一、后台Action的核心问题 #

1. 缺少HttpPost特性：你的前端AJAX用的是type: 'POST'，但默认的MVC Action是GET请求，需要给Create Action加上[HttpPost]特性，否则请求会被拒绝或者找不到对应的Action：

[HttpPost]
public ActionResult Create(string value)
{
    // 原有逻辑...
}

2. 错误的返回类型：你现在返回的是View()，这会把整个页面返回给AJAX，但AJAX需要的是用户数据而不是完整视图。应该返回Json格式的数据，让前端能直接解析：

[HttpPost]
public JsonResult Create(string value)
{
    // 获取项目分组
    var group = db.Projects.Where(x => x.Name == value).Select(y => y.GroupDev).FirstOrDefault();
    if (string.IsNullOrEmpty(group))
    {
        // 如果没找到分组，返回空列表
        return Json(new List<string>());
    }
    // 查询该分组下的用户邮箱
    var userEmails = db.UsersModels.Where(x => x.GroupName == group).Select(y => y.Email).ToList();
    // 返回Json数据
    return Json(userEmails);
}

注意：我把Action返回类型改成了JsonResult，并且加了空值判断，避免分组为空时出现异常。

3. 冗余代码简化：你原来的list、ProjectName这些变量其实可以直接简化，不过这不是核心问题，只是代码优化。

二、前端JQuery的关键问题 #

1. 没有处理AJAX的返回结果：你的AJAX发送了请求，但完全没有写成功后的回调逻辑，所以即使后台返回了用户数据，前端也不知道怎么填充到Users下拉框里。需要添加success或者done回调：

$(document).ready(function () {
    $('#Project').change(function () {
        var selectedProjectText = $(this).find("option:selected").text();
        $.ajax({
            url: '/TaskModels/Create',
            data: { value: selectedProjectText },
            type: 'POST',
            dataType: 'json', // 指定接收Json格式数据
            success: function (userEmails) {
                // 清空Users下拉框原有选项
                var $usersDropdown = $('#Users');
                $usersDropdown.empty();
                // 添加默认提示选项
                $usersDropdown.append('<option value="">请选择用户</option>');
                // 循环添加用户选项
                $.each(userEmails, function(index, email) {
                    $usersDropdown.append('<option value="' + email + '">' + email + '</option>');
                });
            },
            error: function(xhr, status, error) {
                // 错误处理，方便调试
                console.log('请求出错：' + error);
            }
        });
    });
});

这里我做了这些优化：

• 用$(this).find("option:selected").text()替代原来的写法，更简洁
• 指定dataType: 'json'确保正确解析返回数据
• 添加了下拉框清空和填充逻辑
• 增加了错误回调，方便调试请求失败的情况

2. 确认下拉框ID匹配：确保你的Users下拉框的ID是Users，和前端代码里的$('#Users')一致，比如视图里的代码应该是类似：

<div class="form-group">
    @Html.LabelFor(model => model.Users, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.Users, new SelectList(Enumerable.Empty<string>()), "请选择用户", htmlAttributes: new { @id = "Users", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Users, "", new { @class = "text-danger" })
    </div>
</div>

三、额外注意事项 #

• 确保你的Project下拉框的选中文本确实和数据库里的Project.Name完全匹配，否则后台查询不到分组（比如大小写、空格问题）
• 如果你的项目启用了Anti-Forgery Token，AJAX请求需要带上该Token，否则会被拦截。可以在页面里添加@Html.AntiForgeryToken()，然后在AJAX里加上：

headers: {
    'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
}

同时后台Action要加上[ValidateAntiForgeryToken]特性。

内容的提问来源于stack exchange，提问作者Theodorus Agum Gumilang