HTML.Checkboxfor 到切换按钮 HTML？

Question

是否可以将@HTML.Checkboxfor 转换为切换html 按钮？我参考了 https://www.w3schools.com/howto/howto_css_switch.asp

中的切换按钮样式

目前正在使用 :

@Html.CheckBoxFor(model => model.IsEnabled, new { @checked = "checked", @Name = "DelegateChkBox" })

更改为：

    <td class="slider-td">
         <label class="switch">
            <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" data-val-required="The IsEnabled field is required." data-val="true" data-bind="checked: IsEnabled">
          <div class="slider round"></div>
          </label>
   </td>

切换按钮只有在选中时才有效并回发到控制器：

否则默认情况下它不会回发到控制器 UNCHECKED :

任何帮助将不胜感激！谢谢！

Answer 1

根据一些实验和发现，我发现您需要包含助手 (Html.CheckBoxFor) 生成的隐藏字段，如下面的样式所示：

<style type="text/css">
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

/* include generated hidden field here */
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
  background-color: #2196F3;
}

/* include generated hidden field here */
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

/* include generated hidden field here */
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>

查看用法示例（只需将<input type="checkbox" />更改为@Html.CheckBoxFor）：

<label class="switch">
    @Html.CheckBoxFor(model => model.IsEnabled)
    <div class="slider round">
    </div>
</label>

要确保在执行回发之前在客户端选中复选框，您可以使用下面的 jQuery 代码：

// change event may modified to other events
$("#IsEnabled").change(function () {

    // check if checkbox is being checked
    // taken from /a/23007488 by Alexandru Chichinete
    if ($("#IsEnabled").is(":checked"))
    {
        // enable form submit
    }
});

演示示例：.NET Fiddle

参考文献：

Styling checkboxes in MVC 4

How can I apply a CSS style to Html.CheckBoxFor in MVC 5

@Html.checkboxfor - Get checkbox value using id

Answer 2

这个很简单，我已经在我的项目中实现了。您只需要将复选框的值保留在 HiddenFor 中即可。

@Html.HiddenFor(model => model.IsEnabled, new{@id = "DelegateChkBox"})

然后在页面中显示您的切换按钮。例如，

 <td class="slider-td">
   <label class="switch">
    <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" 
      data-val-required="The IsEnabled field is required." data-val="true" 
      data-bind="checked: IsEnabled">
    <div class="slider round"></div>
   </label>
 </td>

所以现在当用户 check/uncheck 复选框时，调用 jquery 方法并将值分配给 @Html.HiddenFor(..)。就是这样。

$('#IsEnabled').change(function(){
  if($(this).val()==true)
   {
    $('#DelegateChkBox').val(true);
   }
  else
   {
    $('#DelegateChkBox').val(false);
   }
})

请检查一次 if ($("this").is(":checked")) 而不是 if($(this) .val()==true) 并相应地分配值。有点忙，无法检查我的代码:)

就是这样。现在，当您 post 返回您的页面时，您已经为 IsEnabled 字段设置了值。

在 Get 方法中，您必须这样做。您只需要检查 HiddenFor() 的值并获取该值并将其分配给 js 的页面加载事件中的 HTML 切换按钮。

$(function() {
 if($('#DelegateChkBox').val()== true)
  {
   $('#IsEnabled').prop("disabled", false);
  }
 else
  {
   $('#IsEnabled').prop("disabled", true);
  }
});

就是这样。请相应地更改 HTML。

HTML.Checkboxfor 到切换按钮 HTML？

HTML.Checkboxfor to Toggle button HTML?

html

css

asp.net-mvc

html-helper

asp.net-mvc-4