如何在ASP.NET MVC中结合Html.CheckBoxFor使用Bootstrap Toggle？

嘿，刚好知道怎么搞定这个问题！你只需要把Bootstrap Toggle需要的那些data-*属性，以匿名对象的形式传递给Html.CheckBoxFor的第二个参数（htmlAttributes）就行。Razor引擎会自动把匿名对象里的下划线转换成HTML属性的连字符，或者你也可以用带@前缀的字符串键来直接写属性名。

先看你给出的原生checkbox示例：

对应的Html.CheckBoxFor写法应该是这样的：

@Html.CheckBoxFor(model => model.Active, new {
    data_toggle = "toggle",
    data_on = "Yes",
    data_off = "No",
    data_width = "15",
    data_height = "15",
    data_onstyle = "success",
    data_offstyle = "danger",
    data_style = "ios"
})

几点关键说明： #

• checked状态不需要手动添加，Html.CheckBoxFor会自动根据model.Active的布尔值来设置这个属性，完美贴合你的模型绑定需求。
• 如果你更习惯直接写带连字符的属性名，可以用字符串键的形式，比如：

  @Html.CheckBoxFor(model => model.Active, new {
      @"data-toggle" = "toggle",
      @"data-on" = "Yes",
      // 其他属性同理
  })
  

• 别忘了确保页面已经正确引入了Bootstrap的CSS、JS，以及Bootstrap Toggle的专用CSS和JS文件，不然样式和交互不会生效哦。

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