如何创建一个EditorTemplate引导复选框？ [英] How to create an EditorTemplate for bootstrap checkbox?

问题描述

我正在使用引导模板，其复选框模板如下：

I am working with a bootstrap template and its checkbox template is like this:

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

我需要一个MVC EditorTemplate来使用布尔值来使用这个模板。
MVC CheckBoxFor默认模板不像这个模板，它有另一个隐藏的输入字段来保存数据，没有跨度显示复选框图标（它使用默认图标无法通过CSS样式）。

I need an MVC EditorTemplate for boolean values to use this template. MVC CheckBoxFor default template is not like this template, it has another hidden input field to hold data and there is no span to show checkbox icon (it uses a default icon not stylable by css).

MVC CheckBox For default template：

MVC CheckBoxFor default template :

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

我尝试了很多方法来做这个没有成功。例如，如果我使用下面的条件模板，它不会在提交后返回值。

I tried many ways to do this with no success. For example if I use a conditional template like below, it does not return value after submit.

我的布尔EditorTemplate：

My Boolean EditorTemplate:

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

任何人都可以帮忙吗？

strong>更新：

Update:

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

A part of css codes relevent to checkbox icon :

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;
}

推荐答案

CheckBoxFor（）方法生成2个输入，以确保发布一个值（未选中复选框，不提交值，因此隐藏输入确保 false 提交），并且您不应尝试更改此行为。您尝试在 EditorTempate 无法工作的原因包括一个复选框（有2个状态）不能绑定到 nullable bool （有3个状态），你的 else 块意味着总是提交 false

The CheckBoxFor() method generate 2 inputs to ensure a value is posted back (unchecked checkboxes to not submit a value so the hidden input ensures false is submitted), and you should not attempt to change this behavior. Your attempt at an EditorTempate could not work for a number of reasons including a checkbox (which has 2 states) cannot bind to a nullable bool (which has 3 states) and your else block means that a vale of false will always be submitted, even if the checkbox is checked.

而是使用 CheckBoxFor（）方法，但调整css选择器

Instead, use the CheckBoxFor() method, but adjust your css selectors

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

这会得到 span 元素放置在复选框元素之后，需要更改为

which gets the span element placed immediately after the checkbox element needs to be changed to

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

而对于其他选择器（即将 + 更改为〜）。 〜选择器匹配第二个元素，如果它在第一个元素前面，并且都共享一个共同的父级（参考一般兄弟选择器）

And ditto for the other selectors (i.e. change + to ~). The ~ selector matches the second element if it is preceded by the first, and both share a common parent (refer General sibling selectors)

这篇关于如何创建一个EditorTemplate引导复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！