ASP.NET MVC编辑页级联下拉框默认显示Genre当前值问题咨询

问题根因 #

1. 编辑页GET请求处理逻辑中，未正确将数据库中当前文件关联的Genre赋值给视图模型
2. 前端初始化逻辑直接清空了Genre下拉框仅保留「Select」选项，既没有加载当前已选FileType对应的Genre列表，也没有自动选中当前记录的Genre值

步骤1：修改编辑页GET请求处理方法 #

修正Genre赋值逻辑，同时将当前选中的GenreId传递到前端视图：

[HttpGet]
public async Task<IActionResult> EditFile(int id)
{
    // 移除无效的Genre参数，直接从查询到的文件实体取关联Genre
    var model = await context.Files.Where(x => x.Id == id).Include(a => a.Genre).Include(x => x.FileT).FirstOrDefaultAsync();
    List<FileType> ftypelist = new List<FileType>();
    ftypelist = (from FileTypes in context.FileTypes select FileTypes).ToList();
    ftypelist.Insert(0, new FileType { FileTypeId = 0, FileTypeName = "Select" });
    ViewBag.ListOfFileTypes = ftypelist;
    // 传递当前选中的GenreId到前端
    ViewBag.SelectedGenreId = model.Genre?.GenreId ?? 0;
    FileEditViewModel fileEditViewModel = new FileEditViewModel
    {
        Id = model.Id,
        Name = model.Name,
        Author = model.Author,
        Description = model.Description,
        FileT = model.FileT,
        Genre = model.Genre, // 直接赋值数据库关联的Genre，不需要额外查询
        PublishedOn = model.PublishedOn,
        FilePath=model.FilePath
    };
    return View(fileEditViewModel);
}

步骤2：修改前端脚本逻辑 #

调整页面初始化逻辑，页面加载时先加载当前FileType对应的Genre列表，加载完成后自动选中当前记录的Genre值：

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            // 页面加载时先触发一次Genre列表加载，完成后选中已有值
            loadGenreList(function(){
                $('#GenreId').val(@ViewBag.SelectedGenreId);
            });
            
            // 封装加载Genre列表的方法，复用初始化和变更逻辑
            function loadGenreList(callback){
                var url = '@Url.Content("~/")' + "Files/GetGenre";
                var fileTypeId = $("#FileTypeId").val();
                $.getJSON(url, { FileTypeId: fileTypeId }, function (data) {
                    var items = "<option value='0'>Select</option>";
                    $("#GenreId").empty();
                    $.each(data, function (i, genrelist2) {
                        items += "<option value='" + genrelist2.value + "'>" + genrelist2.text + "</option>";
                    });
                    $('#GenreId').html(items);
                    // 执行回调赋值默认选中值
                    if(typeof callback === 'function') callback();
                });
            }

            // 保留原有FileType变更的联动逻辑
            $('#FileTypeId').change(function () {
                loadGenreList();
            });
        });
    </script>
}

修改完成后编辑页加载时会自动加载当前FileType对应的所有Genre选项，并且自动选中当前记录关联的Genre值，原有级联选择、提交逻辑均保持不变。

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