我正在使用标记助手在 MVC 表单中添加一个复选框:
<div class="form-group">
<label asp-for="@Model.Billable"></label>
<input asp-for="@Model.Billable" type="checkbox" />
<input asp-for="@Model.Billable" type="hidden" />
</div>
当用户将值从"未选中"更改为"已选中"时,传递回控制器的窗体值为 True - 完美。
但是,如果复选框的值以"选中"开头,并且用户将其更改为"未选中",则传递回控制器的表单值仍为 True???
当类型为checkbox
时,输入标记帮助程序会为您创建一个具有相同name
复选框的隐藏元素。如果您检查页面的视图源代码,您可以看到
<input name="Billable" type="hidden" value="false">
当用户启用/选中复选框并提交表单时,它将发送 2 个表单数据项,一个用于值True
的实际复选框,第二个用于值False
的隐藏输入。
如果您检查网络流量(Chrome devtools->network(,则可以看到此信息
Billable: true
Billable: false
当模型绑定器使用此数据时,它将优先赋予True
值,并将其映射到布尔属性。
当用户取消选中复选框并提交表单时,它将仅发送一个表单数据元素,仅发送具有值false
的隐藏输入元素的数据元素,模型绑定器将为操作方法参数的布尔属性设置false
值。
您当前的代码正在生成复选框元素和具有相同名称的其他隐藏输入元素Billable
。所以基本上它将呈现 2 个输入元素(1 个复选框、1 个帮助程序创建的隐藏元素和 1 个您明确创建的元素(。当用户取消选中该复选框时,它将为您明确创建的标记发送True
,并为标记帮助程序创建的标记发送false
。
如果您检查网络流量(Chrome devtools->network(,则可以看到此信息
Billable: True
Billable: false
模型绑定器将使用此信息,并将True
的值映射到视图模型的"计费"属性。
解决方案是删除额外的隐藏元素并依赖标记帮助程序创建的元素。
<div class="form-group">
<label asp-for="@Model.Billable"></label>
<input asp-for="@Model.Billable" type="checkbox" />
</div>