超文本标记语言复选框for vs Html.编辑器vs直接HTML



我使用自定义CSS模板(.less)复选框(使它们显示为"Yes|No", "On|Off"等)

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

所以我开始挖掘,在这里发现了许多类似问题的问题,但到目前为止,没有一个解决方案对我有效。我目前正在研究的解决方案是使用自定义EditorFor模板。这是正确渲染复选框,然而,我所经历的是,如果滑块被切换到"NO",它传递给控制器为null而不是false,如果它被切换到"YES",它传递给控制器为"on"。

我知道Html。CheckboxFor呈现一个复选框元素,后面跟着一个隐藏的输入元素。这样做的目的是什么?以下是两个方法呈现的HTML以及与此相关的任何问题:

Checkbox后::::

当它被传递给控制器时,为什么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。编辑器(model => model)BoolProperty, new {@class = "custom-switch"})

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

为什么这会将"on"null的值传递给控制器?为什么不是truefalse呢?

布尔编辑器模板

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

隐藏字段的作用是强制将该字段包含在表单POST中,即使没有检查任何内容。如果没有它,根据标准,该字段将被完全省略。你不会知道"false"值和不存在的字段之间的区别。

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

至于为什么用"on"one_answers"true",这是你可以自己控制的。如果你想要true/false而不是on/off,使用它。"on"只是默认值,但不是必需的。

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

关于隐藏字段

我找不到任何暗示一个更新另一个的东西当值改变时,通过测试,我注意到

不,它不会改变。浏览器,那么checkbox不是checked,不提交任何使用该名称的内容。因此,当checkbox不是checked时,hidden建议提交值"false"(与name相同)。

checkboxchecked时(如你所说),发布的值是"true,false"(首先是checkboxvalue,然后是hiddenvalue)。MVC绑定器处理该字符串,将其转换为true值,并将其设置为BooleanProperty

关于on

checkbox的默认值。看到这里。

最新更新