无论如何将@ 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:
任何帮助将不胜感激! 谢谢!
答案 0 :(得分:7)
根据一些实验和调查结果,我发现你需要包含帮助者(int i = 0;
while(i < 5)
{
i = ++i;
System.out.print(i);
}
)生成的隐藏字段,如下面的样式所示:
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
为了确保在回发之前在客户端检查复选框,您可以使用下面的jQuery代码:
<label class="switch">
@Html.CheckBoxFor(model => model.IsEnabled)
<div class="slider round">
</div>
</label>
演示示例:.NET Fiddle
参考文献:
答案 1 :(得分:4)
这很简单,我在我的项目中实现了。 您只需要在HiddenFor中保留checkbox的值。
@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>
现在,当用户选中/取消选中该复选框时,调用jquery方法并将值赋给@ Html.HiddenFor(..)。就是这样。
$('#IsEnabled').change(function(){
if($(this).val()==true)
{
$('#DelegateChkBox').val(true);
}
else
{
$('#DelegateChkBox').val(false);
}
})
请检查一次 if($(“this”)。是(“:checked”))而不是 if($(this).val()== true)< / strong>并相应地分配值。有点忙,无法检查我的代码:)
就是这样。现在,当您回发页面时,您已经将值设置为IsEnabled字段。
在Get方法中你必须这样做。您只需要检查HiddenFor()的值并获取该值并将其分配给js的pageload事件中的HTML Toggle按钮。
$(function() {
if($('#DelegateChkBox').val()== true)
{
$('#IsEnabled').prop("disabled", false);
}
else
{
$('#IsEnabled').prop("disabled", true);
}
});
就是这样。请相应更改HTML。