Question

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

使用@Html.CheckboxFor(model => model.BooleanProperty, new { @class="custom-switch" })会导致复选框无法显示。

所以我开始挖掘，在这里找到了许多类似问题的问题，但到目前为止，这些解决方案都没有对我有用。我目前正在处理的解决方案是使用自定义的EditorFor模板。这是正确渲染复选框，但是，我遇到的是，如果滑块切换到“NO”，它将作为null而不是false传递给控制器，如果它切换到“YES”，它将传递给控制器为“开”。

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

Checkbox的直接HTML :: before :: after

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

@ Html.CheckboxFor（model =＆gt; 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 =＆gt; 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>

Answer 1

关于隐藏字段

我无法找到任何暗示其他人更新的内容当价值变化，并通过测试，我已经注意到了价值不会改变。

不，它没有改变。浏览器，checked不是hidden，请勿使用该名称提交任何内容。因此，"false"建议在name不是checkbox时提交值checked（使用相同的checkbox）。

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

关于BooleanProperty值

这是on的默认值。 See here.

Answer 2

隐藏字段用于强制字段包含在POST表单中，即使没有选中任何内容也是如此。没有它，按照标准完全省略该字段。你不会知道＆＃34; false＆＃34;价值或不存在的领域。

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

至于为何使用＆＃34; on＆＃34; vs＆＃34; true＆＃34;，这是你可以自己控制的东西。如果您想要真/假而不是开/关，请使用它。＆＃34;上＆＃34;只是默认值，但不是必需的。

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

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

2 个答案: