Html.CheckboxFor vs Html.EditorFor vs 直接HTML？答案

【问题标题】：Html.CheckboxFor vs Html.EditorFor vs straight HTML?Html.CheckboxFor vs Html.EditorFor vs 直接HTML？
【发布时间】：2015-10-09 20:40:41
【问题描述】：

我正在为复选框使用带有自定义 CSS (.less) 的模板（使它们显示为“是|否”、“开|关”等）

使用@Html.CheckboxFor(model => model.BooleanProperty, new { @class="custom-switch" }) 会导致复选框根本不出现。

所以我开始四处寻找，在这里发现了许多类似问题的问题，但到目前为止，没有一个解决方案对我有用。我目前正在研究的解决方案是使用自定义 EditorFor 模板。这是正确渲染复选框，但是，我遇到的是，如果滑块切换到“否”，它会作为空而不是假传递给控制器，如果它切换到“是”，它会传递到控制器为“开”。

我知道 Html.CheckboxFor 呈现一个复选框元素，后跟一个隐藏的输入元素。这是为了什么目的？以下是从这两种方法呈现的 HTML 以及与该特定方法相关的任何问题：

复选框的纯 HTML ::之前 ::之后

这个传给控制器的时候，为什么BoolProperty的值是"true,false"？

@Html.CheckboxFor(model => model.BoolProperty, new { @class="custom-switch" })

<input checked="checked" data-val="true" data-val-required="The BoolProperty is required." id="BoolProperty" name="BoolProperty" type="checkbox" value="true" class="custom-switch">
<input name="BoolProperty" type="hidden" value="false">

隐藏的输入字段有什么作用？如果我没记错的话，无论如何只有第一个“BoolProperty”命名值实际上会被传递给控制器。我找不到任何建议当值更改时一个更新另一个，并且通过测试，我注意到值没有改变。

@Html.EditorFor(model => model.BoolProperty, new { @class= "custom-switch" })

<input type="checkbox" checked name="BoolProperty" class="custom-switch">
<label>::before ::after</label>

为什么这会将"on" 或null 的值传递给控制器？为什么不true 和false？

布尔编辑器模板

@model Boolean?
var isChecked = ViewData["checked"] != null && ViewData["checked"].ToString() == "true";


<input type="checkbox" checked="@(isChecked ? "checked" : string.Empty)" name="@name"  class="@ViewData["class"].ToString()" />
<label class="lbl"></label>

【问题讨论】：

标签： css asp.net-mvc razor checkbox

【解决方案1】：

隐藏字段用于强制该字段包含在表单 POST 中，即使没有检查任何内容。没有它，根据标准，该字段将被完全省略。您不会知道“假”值或不存在字段之间的区别。

http://www.w3.org/TR/html401/interact/forms.html

至于为什么它使用“on”和“true”，这是你可以控制的。如果您想要真/假而不是开/关，请使用它。 “on”只是一个默认值，但不是必需的。

<input type="checkbox" class="checkbox" name="BoolProperty" value="true" />
<input type="hidden"   class="checkbox" name="BoolProperty" value="false" />

【讨论】：

唯一可能的缺点是我刚刚成为团队的 EditorTemplates SME。
@Nick - 工作保障！

【解决方案2】：

关于隐藏字段

我找不到任何可以表明其中一个更新另一个的内容当值发生变化时，通过测试，我注意到值不变。

不，它不会改变。浏览器，然后 checkbox 不是 checked，不要使用该名称提交任何内容。所以，hidden 提议是在checkbox 不是checked 时提交值"false"（具有相同的name）。

当checkbox 为checked（如您所说）时，发布的值为"true,false"（首先是checkbox 的value，然后是hidden 的value）。 MVC binder 处理此字符串以将其转换为 true 值，并将其设置为 BooleanProperty。

关于on 值

这是checkbox 的默认值。 See here.

【讨论】：