asp.net - 如何为 Bootstrap 复选框创建 EditorTemplate？

Question

我正在使用 Bootstrap 模板，其复选框模板如下所示:

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

我需要一个用于 bool 值的 MVC EditorTemplate 才能使用此模板。MVC CheckBoxFor 默认模板与此模板不同，它有另一个隐藏的输入字段来保存数据，并且没有跨度来显示复选框图标(它使用不可通过 css 设置样式的默认图标)。

MVC CheckBox默认模板:

<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">

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

我的 bool 编辑器模板:

@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 个状态)无法绑定(bind)到 nullable bool(有 3 个状态)以及您的else block 意味着 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 {

其他选择器也是如此(即将 + 更改为 ~)。 ~ 选择器匹配第二个元素(如果它前面有第一个元素)，并且两者共享一个公共(public)父元素(请参阅 General sibling selectors )