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>

当用户将值从 Unchecked 更改为 Checked 时，传回控制器的表单值是 True - 完美。

但是，如果复选框的值以 Checked 开头，而用户将其更改为 Unchecked，则传回控制器的表单值仍然是 True???

Answer 1

当类型为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 映射到您的视图模型的 Billable 属性。

解决办法是去掉多余的隐藏元素，依赖标签助手创建的那个。

<div class="form-group">
    <label asp-for="@Model.Billable"></label>
    <input asp-for="@Model.Billable" type="checkbox" />
</div>