ASP.NET MVC中Bootstrap 5模态框下拉列表选项不显示问题

开发者阿泽

2026-8-22

Bootstrap 5模态框下拉列表仅显示默认项问题解决

问题根源

局部视图单独显示时下拉列表正常，但放入模态框后仅显示默认项，主要有两个原因：

模型初始化不完整：主视图中传递给局部视图的OrgDocsModel只设置了OrgId，但下拉列表的数据源DocTypesList未被填充，导致无法生成对应的<option>标签。
HTML语法错误：代码中存在两处语法问题，可能干扰模态框的正常渲染：
- 主视图模态框div的class属性多了一个多余引号：class="modal fade""
- 局部视图中文件输入的label标签未闭合，且重复定义class属性：<label class="custom-file-label" for="OrgDoc" class="form-control"</label>

修复步骤

1. 修正HTML语法错误

主视图中模态框div修正为：
```
<div id="addDoc" class="modal fade">
```
局部视图中文件输入的label标签修正（合并重复class并闭合标签）：
```
<label class="custom-file-label form-control" for="OrgDoc"></label>
```

2. 完整初始化模型的下拉数据源

不要在视图中直接创建空模型，确保DocTypesList被正确填充：

@{
    // 示例为静态数据，实际可从数据库/业务服务获取
    var docTypes = new List<SelectListItem>
    {
        new SelectListItem { Text = "文档类型1", Value = "1" },
        new SelectListItem { Text = "文档类型2", Value = "2" }
    };

    var orgDocModel = new Slingshot.Models.OrgDocsModel
    {
        OrgId = Model.First().OrgId,
        DocTypesList = docTypes
    };
}

@Html.Partial("_AddDoc", orgDocModel)

更规范的做法是在主视图对应的控制器中准备好完整的模型（包括DocTypesList），再传递给视图，避免在视图层处理数据逻辑。