ASP.NET Core Tag Helper Checkbox 不保存未选中的值

Question

我正在使用 Tag Helpers 在 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 - 完美。

但是，如果checkbox的值一开始是Checked，用户改成Unchecked，传回controller的表单值还是True？？？

Answer 1

当类型为checkbox时，输入标签助手为您创建一个隐藏的复选框元素name。如果查看页面的查看源，可以看到

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

当用户 enable/check 复选框并提交表单时，它将发送 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>

ASP.NET Core Tag Helper Checkbox 不保存未选中的值

ASP.NET Core Tag Helper Checkbox does not save unchecked value

asp.net-mvc

tag-helpers

asp.net-core

asp.net-core-2.0