设置SelectListItem的Selected为false不生效,如何让下拉框默认显示请选择分区
问题原因
你遇到的问题是ASP.NET Core MVC中select标签助手的默认绑定逻辑导致的:asp-for属性会优先匹配绑定模型的属性值,只要你的视图模型中SectionId已经被赋值为「Unclassified」对应的ID,标签助手在渲染页面时会自动给value和该值一致的选项加上selected属性,完全覆盖你手动设置的SelectListItem.Selected=false以及默认选项的selected="selected"配置,所以之前的修改不生效。
解决方案(按推荐优先级排序)
方案1:视图模型赋值时清空SectionId(最推荐)
在返回编辑页面的控制器方法中,给视图模型赋值时主动将SectionId设为null(如果是值类型可以先将属性定义为可空类型int?),标签助手找不到匹配的value,就会默认选中你手动添加的空值提示选项,无需修改现有视图代码即可生效。
示例代码:
public async Task<IActionResult> Edit(int qaId) { var qa = await _context.QAs.FindAsync(qaId); var viewModel = _mapper.Map<QAViewModel>(qa); // 关键:清空SectionId,取消自动匹配逻辑 viewModel.SectionId = null; return View(viewModel); }
方案2:手动渲染下拉选项,不使用asp-items
如果需要保留视图模型中SectionId的原始值,可以放弃asp-items属性,自行循环渲染分区选项,此时标签助手不会自动给匹配的选项加选中状态:
@inject ISelectServices service <div class="form-control"> <select asp-for="SectionId" class="form-select"> <option selected="selected" value="">请选择分区</option> @foreach (var item in await service.GetSectionsIdAsync()) { <option value="@item.Value">@item.Text</option> } </select> <span asp-validation-for="SectionId" class="text-danger"></span> </div>
方案3:前端JS强制重置选中状态
如果不想修改后端和视图逻辑,可增加一段前端代码,在页面加载完成后强制重置下拉框的选中值:
window.addEventListener('DOMContentLoaded', () => { document.querySelector('select[name="SectionId"]').value = ''; })
内容的提问来源于stack exchange,提问作者Mohamad Hammash
相关产品推荐
相关产品推荐

