MVC如何将布尔字段的EditorFor控件从下拉框修改为复选框
问题原因
出现True/False/未设置三态下拉是因为你的new_fm_bankdata字段是可空布尔类型(Boolean?),ASP.NET MVC默认给可空布尔类型的EditorFor渲染三态下拉选择器,要改成复选框可按以下方案操作:
解决方案
方案1:直接替换为CheckBoxFor(最便捷)
直接将原来的EditorFor替换为CheckBoxFor辅助方法,强制渲染复选框即可:
- 如果你的字段是非可空布尔类型,直接替换代码:
@Html.CheckBoxFor(Function(model) model.new_fm_bankdata, New With {.class = "form-check-input"})
- 如果你的字段是可空布尔类型,需要先处理空值默认值(复选框只有选中/未选中两种状态,对应True/False):
@Html.CheckBoxFor(Function(model) model.new_fm_bankdata.GetValueOrDefault(), New With {.class = "form-check-input"})
注意事项
- 复选框不要使用
form-control样式,Bootstrap中复选框的对应样式为form-check-input,否则会出现样式异常 - 如果你要求该字段必须勾选,可以在模型的
new_fm_bankdata字段上添加[Range(typeof(bool), "true", "true", ErrorMessage = "必须勾选该选项")]特性实现校验
方案2:自定义编辑器模板(全局生效)
如果希望项目中所有布尔类型的字段都默认渲染复选框而不是下拉框,可以添加全局编辑器模板:
- 在
Views/Shared目录下新建EditorTemplates文件夹 - 在该文件夹下新建
Boolean.vbhtml文件,内容如下:
@ModelType Boolean? @Html.CheckBoxFor(Function(m) m.GetValueOrDefault(), New With {.class = "form-check-input"})
配置完成后,你原来的EditorFor代码不需要修改,自动会渲染为复选框。
修改后的完整代码片段
对应你原来的字段部分修改后代码如下:
<div class="col-md-10"> <div class="form-check"> @Html.CheckBoxFor(Function(model) model.new_fm_bankdata.GetValueOrDefault(), New With {.class = "form-check-input"}) @Html.LabelFor(Function(model) model.new_fm_bankdata, New With {.class = "form-check-label"}) @Html.ValidationMessageFor(Function(model) model.new_fm_bankdata, "Required", New With {.class = "text-danger"}) </div> </div>
内容的提问来源于stack exchange,提问作者PeteN
相关产品推荐
相关产品推荐

