ASP.NET Core MVC基于单表实现Razor级联下拉列表问题求助

需求说明 #

• 基于单表DegreeName实现级联下拉：
  1. 页面加载时，IdDegree下拉框填充所有不重复的IdDegree值
  2. 选择某个IdDegree后，DegreeTitle下拉框自动加载对应关联的DegreeTitle选项

数据库结构 #

完整实现方案 #

1. 修正Controller逻辑 #

拆分GET/POST请求逻辑，添加API接口用于动态获取关联数据：

// GET: DegreeNames/Create
public IActionResult Create()
{
    // 获取去重的IdDegree列表，填充第一个下拉框
    var idDegreeList = db.DegreeName
                        .Select(d => d.IdDegree)
                        .Distinct()
                        .ToList();
    ViewBag.IdDegreeOptions = new SelectList(idDegreeList);
    
    return View();
}

// POST: DegreeNames/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,IdDegree,DegreeTitle,DegreeName1")] DegreeName degreeName)
{
    if (ModelState.IsValid)
    {
        db.Add(degreeName);
        await db.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }
    // 验证失败时重新填充下拉选项
    var idDegreeList = db.DegreeName
                        .Select(d => d.IdDegree)
                        .Distinct()
                        .ToList();
    ViewBag.IdDegreeOptions = new SelectList(idDegreeList);
    return View(degreeName);
}

// API接口：根据IdDegree获取对应的DegreeTitle列表
[HttpGet]
public IActionResult GetDegreeTitles(string idDegree)
{
    var degreeTitles = db.DegreeName
                        .Where(d => d.IdDegree == idDegree)
                        .Select(d => d.DegreeTitle)
                        .Distinct()
                        .ToList();
    return Json(degreeTitles);
}

2. 修改Razor视图 #

将输入框改为下拉控件，添加JavaScript实现级联交互：

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="IdDegree" class="control-label"></label>
        <select asp-for="IdDegree" class="form-control" asp-items="ViewBag.IdDegreeOptions">
            <option value="">请选择IdDegree</option>
        </select>
        <span asp-validation-for="IdDegree" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="DegreeTitle" class="control-label"></label>
        <select asp-for="DegreeTitle" class="form-control">
            <option value="">请先选择IdDegree</option>
        </select>
        <span asp-validation-for="DegreeTitle" class="text-danger"></span>
    </div>

    <div class="form-group">
        <label asp-for="DegreeName1" class="control-label"></label>
        <input asp-for="DegreeName1" class="form-control" />
        <span asp-validation-for="DegreeName1" class="text-danger"></span>
    </div>

    <div class="form-group">
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>    
</form>

@section Scripts {
    <script>
        $(document).ready(function() {
            // 监听IdDegree下拉框变化
            $('#IdDegree').change(function() {
                var selectedIdDegree = $(this).val();
                var degreeTitleDropdown = $('#DegreeTitle');
                
                // 清空并重置下拉框
                degreeTitleDropdown.empty();
                degreeTitleDropdown.append('<option value="">加载中...</option>');
                
                if (selectedIdDegree) {
                    // 调用API获取DegreeTitle数据
                    $.get('/DegreeNames/GetDegreeTitles?idDegree=' + selectedIdDegree, function(data) {
                        degreeTitleDropdown.empty();
                        degreeTitleDropdown.append('<option value="">请选择DegreeTitle</option>');
                        
                        // 动态填充选项
                        $.each(data, function(index, title) {
                            degreeTitleDropdown.append('<option value="' + title + '">' + title + '</option>');
                        });
                    });
                } else {
                    degreeTitleDropdown.empty();
                    degreeTitleDropdown.append('<option value="">请先选择IdDegree</option>');
                }
            });
        });
    </script>
}

3. 关键注意事项 #

• 确保项目已引入jQuery（ASP.NET Core MVC默认模板已包含，若缺失需手动添加）
• 替换代码中的db为你的DbContext实例名称
• API路由需与Controller名称匹配，示例中路由为/DegreeNames/GetDegreeTitles

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