ASP.NET MVC中如何给复选框应用Bootstrap Switch样式并绑定模型字段

架构老林

2026-9-27

解决方案

首先替换原有表单区域代码为如下内容：

<div class="form-group">
    @Html.LabelFor(model => model.Add_GeneralRequest, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.CheckBoxFor(model => model.Add_GeneralRequest, new { 
            data_bootstrap_switch = "true",
            data_on_color = "success",
            data_off_color = "danger"
        })
        @Html.ValidationMessageFor(model => model.Add_GeneralRequest, "", new { @class = "text-danger" })
    </div>
</div>

注：Razor语法中写HTML的data属性时需要用下划线_代替横杠-，页面渲染时会自动转换为符合要求的data-bootstrap-switch格式。

接下来在页面底部（jQuery、bootstrap-switch的JS资源引入之后的位置）添加初始化脚本：

$(function(){
    // 初始化所有匹配的复选框为开关样式
    $('[data-bootstrap-switch]').bootstrapSwitch();
})

绑定逻辑说明

开关组件是对原生复选框的封装，切换开关状态时会自动同步更新底层Add_GeneralRequest复选框的checked属性，表单提交时ASP.NET MVC会自动将该值绑定到模型的bool类型Add_GeneralRequest字段，无需额外编写同步逻辑。
如需设置为必填项，直接在模型类的Add_GeneralRequest属性上添加[Required]特性即可，原有ValidationMessageFor的验证逻辑可以正常生效。