如何为 bootstrap 复选框创建 EditorTemplate？

Question

我正在使用 bootstrap 模板，它的复选框模板是这样的：

<div class="checkbox">
    <label>
        <input type="checkbox" class="checkbox style-1" checked="checked">
        <span>Checkbox 1</span>
    </label>
</div>

我需要一个用于布尔值的 MVC EditorTemplate 才能使用此模板。 MVC CheckBoxFor 默认模板与此模板不同，它有另一个隐藏的输入字段来保存数据，并且没有范围来显示复选框图标（它使用 css 无法设置样式的默认图标）。

MVC CheckBoxFor 默认模板：

<input checked="checked" data-val="true" data-val-required="required." id="IsActive" 
       name="IsActive" type="checkbox" value="true">
<input name="IsActive" type="hidden" value="false">

我尝试了很多方法都没有成功。例如，如果我使用如下的条件模板，提交后它不会 return 值。

我的布尔编辑器模板：

@model Boolean?
<div class="checkbox">
    <label>
        @if (Model.Value)
        {
            <input id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldId("")"
                   type="checkbox" class="checkbox style-1" checked="checked" value="true" />
        }
        else
        {
            <input id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldId("")"
                   type="checkbox" class="checkbox style-1" value="false" />
        }
        <span>@Html.LabelFor(m => m)</span>
    </label>
</div>

有人可以帮忙吗？

更新：

与复选框图标相关的 css 代码的一部分：

label input[type=checkbox].checkbox + span:before {
    font-family: FontAwesome;
    font-size: 12px;
    border-radius: 0;
    content: " ";
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 1px;
    height: 12px;
    line-height: 12px;
    min-width: 12px;
    margin-right: 5px;
    border: 1px solid #bfbfbf;
    background-color: #f4f4f4;
    font-weight: 400;
    margin-top: -1px;
}

label input[type=checkbox].checkbox + span:before {
    content: " ";
}

label input[type=checkbox].checkbox:checked + span:before {
    content: "";
    color: #2e7bcc;
}

label input[type=checkbox].checkbox:checked + span {
    font-weight: 700;
}

Answer 1

CheckBoxFor() 方法生成 2 个输入以确保回发值（未选中的复选框不提交值，因此隐藏的输入确保 false 被提交），您不应尝试改变这种行为。由于多种原因，您对 EditorTempate 的尝试无法正常工作，包括复选框（具有 2 个状态）无法绑定到 nullable bool（具有 3 个状态）和您的 else 块意味着false 的值将始终提交，即使复选框被选中也是如此。

相反，请使用 CheckBoxFor() 方法，但要调整您的 css 选择器

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(m => m.IsActive, new { @class = "checkbox style-1" })
        <span>Checkbox 1</span>
    </label>
</div>

会生成

<div class="checkbox">
    <label>
        <input type="checkbox" name="IsActive" class="checkbox style-1" ... value="true">
        <input type="hidden" name="IsActive" value="false">
        <span>Checkbox 1</span>
    </label>
</div>

因此您当前的选择器

label input[type=checkbox].checkbox + span:before {

其中获取紧跟在checkbox元素之后的span元素需要改为

label input[type=checkbox].checkbox ~ span:before {

其他选择器也一样（即将 + 更改为 ~）。 ~ 选择器匹配第二个元素，如果它前面有第一个元素，并且两者共享一个共同的父元素（参考 General sibling selectors）

如何为 bootstrap 复选框创建 EditorTemplate？

How to create an EditorTemplate for bootstrap checkbox?

asp.net

checkbox

asp.net-mvc

mvc-editor-templates

twitter-bootstrap