如何为 bootstrap 复选框创建 EditorTemplate? [英] How to create an EditorTemplate for bootstrap checkbox?

问题描述

我正在使用一个引导模板，它的复选框模板是这样的:

<标签><input type="checkbox" class="checkbox style-1" checked="checked"><span>复选框 1</span>

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

MVC CheckBoxFor 默认模板:

<input name="IsActive" type="hidden" value="false">

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

我的布尔编辑器模板:

@model 布尔值?<div class="checkbox"><标签>@if (Model.Value){<input id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldId("")"type="checkbox" class="checkbox style-1" checked="checked" value="true"/>}别的{<input id="@ViewData.TemplateInfo.GetFullHtmlFieldId("")" name="@ViewData.TemplateInfo.GetFullHtmlFieldId("")"type="checkbox" class="checkbox style-1" value="false"/>}<span>@Html.LabelFor(m => m)</span>

有人可以帮忙吗?

更新:

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

label input[type=checkbox].checkbox + span:before {字体系列:FontAwesome；字体大小:12px；边界半径:0；内容: " ";显示:内联块；文本对齐:居中；垂直对齐:中间；填充:1px；高度:12px；行高:12px；最小宽度:12px；右边距:5px；边框:1px 实心 #bfbfbf;背景色:#f4f4f4；字体粗细:400；边距顶部:-1px；}标签输入[type=checkbox].checkbox + span:before {内容: " ";}标签输入[type=checkbox].checkbox:checked + span:before {内容:"；颜色:#2e7bcc；}标签输入[type=checkbox].checkbox:checked + span {字体粗细:700；}

解决方案

CheckBoxFor() 方法生成 2 个输入以确保回发值(未选中的复选框不会提交值，因此隐藏的input 确保 false 已提交)，并且您不应尝试更改此行为.您尝试使用 EditorTempate 的原因有很多，包括复选框(有 2 个状态)无法绑定到 nullable bool(有 3 个状态)和您的else 块意味着 false 的值将始终被提交，即使复选框被选中.

改为使用 CheckBoxFor() 方法，但要调整您的 css 选择器

<标签>@Html.CheckBoxFor(m => m.IsActive, new { @class = "checkbox style-1" })<span>复选框 1</span>

会产生

<标签><input type="checkbox" name="IsActive" class="checkbox style-1" ... value="true"><input type="hidden" name="IsActive" value="false"><span>复选框 1</span>

所以你当前的选择器

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

获取紧接在checkbox元素之后的span元素需要改为

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

其他选择器也是如此(即将+改为~).~ 选择器匹配第二个元素，如果它在第一个元素之前，并且两者共享一个共同的父元素(请参阅 一般兄弟选择器)

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>

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

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>

Can anyone help please?

Update:

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

解决方案

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.

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>

will generate

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

So your current selector

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

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)

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