ASP.NET Core 6 Razor视图动态下拉框联动失效问题

你的动态下拉框不更新的核心原因有三个：

1. 控制器中初始化的exam.SubjectCode为空值，导致ViewBag.Students始终是空的SelectListItem集合，且传递给前端的studentsForSubject仅包含Value和Text，没有过滤所需的SubjectCode、Class等属性。
2. 前端的subjects变量是SelectListItem集合，缺少科目的Class属性，无法获取选中科目的班级信息。
3. 前端过滤逻辑依赖的属性在现有数据结构中不存在，导致过滤后无结果，下拉框无法更新。

1. 修正控制器代码 #

传递完整的科目和学生-科目映射数据到前端，替换仅传递SelectListItem的逻辑：

public IActionResult Create()
{
    Exam exam = new();

    // 传递完整的科目对象列表，供前端获取班级信息
    ViewBag.SubjectList = _context.Subjects.ToList();
    // 科目下拉框选项
    ViewBag.Subjects = _context.Subjects.Select(s => new SelectListItem { Value = s.SubjectCode.ToString(), Text = s.NameOfSubject }).ToList();

    // 获取所有学生与对应班级科目的映射关系
    var studentSubjectMappings = _context.Students
        .SelectMany(s => _context.Subjects.Where(subj => subj.Class == s.Class)
            .Select(subj => new ViewBagStudentSubject
            {
                StudentId = s.StudentId,
                SubjectCode = subj.SubjectCode,
                Student = s,
                Subject = subj,
                Exam = exam
            }))
        .ToList();

    // 传递完整映射数据到前端用于过滤
    ViewBag.StudentSubjectMappings = studentSubjectMappings;

    // 初始学生下拉框默认显示空选项
    ViewBag.Students = new List<SelectListItem>
    {
        new SelectListItem { Value = "", Text = "Select a student", Disabled = true, Selected = true }
    };

    ViewBag.ViewBagStudentSubject = new ViewBagStudentSubject
    {
        Exam = exam,
        Students = ViewBag.Students
    };

    return View();
}

2. 修正Razor视图的脚本部分 #

使用完整的科目和映射数据，调整过滤逻辑：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // 绑定完整的科目对象列表
    var subjects = @Html.Raw(Json.Serialize(ViewBag.SubjectList)) || [];
    // 绑定完整的学生-科目映射数据
    var studentSubjectMappings = @Html.Raw(Json.Serialize(ViewBag.StudentSubjectMappings)) || [];

    $(document).ready(function () {
        var subjectSelect = $("#Exam_SubjectCode");
        var studentSelect = $("#StudentId");

        subjectSelect.on("change", function () {
            var selectedSubjectCode = $(this).val();

            studentSelect.empty();
            studentSelect.append($('<option>', {
                value: "",
                text: "Select a student",
                class: "text-muted",
                disabled: true,
                selected: true
            }));

            if (selectedSubjectCode) {
                // 找到选中的科目对象，获取对应班级
                var selectedSubject = subjects.find(subject => subject.SubjectCode === selectedSubjectCode);
                if (!selectedSubject) return;

                // 过滤出匹配科目代码和班级的学生
                var filteredStudents = studentSubjectMappings.filter(item => 
                    item.SubjectCode === selectedSubjectCode && item.Subject.Class === selectedSubject.Class);

                // 去重，避免同一个学生重复出现
                var uniqueStudents = [...new Map(filteredStudents.map(item => [item.StudentId, item])).values()];

                if (uniqueStudents.length > 0) {
                    uniqueStudents.forEach(function (item) {
                        studentSelect.append($('<option>', {
                            value: item.StudentId,
                            text: item.Student.FullName
                        }));
                    });
                }
            }
        });

        // 页面加载时触发一次，确保初始状态正确
        subjectSelect.trigger("change");
    });
</script>

3. 修正模型的字段为属性（可选但规范） #

ViewBagStudentSubject中的ExamId和Exam是字段，Json序列化可能忽略字段，改为属性保证数据完整性：

public class ViewBagStudentSubject
{
    [Key]
    public int StudentId { get; set; }
    [Key]
    [MaxLength(3)]
    public string SubjectCode { get; set; }

    public Student Student { get; set; }
    public Subject Subject { get; set; }

    public int ExamId { get; set; } // 从字段改为属性
    public Exam Exam { get; set; } // 从字段改为属性
    public List<SelectListItem> Students { get; set; }
}

验证要点 #

1. 检查浏览器控制台，确认subjects和studentSubjectMappings变量包含完整的科目和学生数据。
2. 切换科目时，查看filteredStudents是否有匹配的结果。
3. 确认下拉框的ID与JQuery选择器一致（ASP.NET Core会将asp-for中的点转换为下划线，比如Exam.SubjectCode生成的ID是Exam_SubjectCode）。

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