asp.net-mvc - 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 时，传递回 Controller 的表单值为 True - 完美。

但是，如果复选框的值开始时为 Checked，而用户将其更改为 Unchecked，则传回 Controller 的表单值仍然为 True？？？

Answer 1

当类型为checkbox时，输入标签助手会为您创建一个隐藏的复选框元素，该元素具有相同的名称。如果查看页面的查看源代码，可以看到

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

当用户启用/选中复选框并提交表单时，它将发送 2 个表单数据项，一个用于值为 True 的实际复选框，第二个用于值为 的隐藏输入>错误。

如果你检查网络流量(Chrome devtools->network)，你可以看到这个

Billable: true
Billable: false

当模型绑定(bind)器使用此数据时，它将优先考虑 True 值并将其映射到您的 bool 属性。

当用户取消选中复选框并提交表单时，它将仅发送一个表单数据元素，即值为 false 的隐藏输入元素，模型绑定(bind)器将设置为 false 操作方法参数的 bool 属性的值。

您当前的代码正在生成复选框元素和一个具有相同名称 Billable 的附加 隐藏输入元素。所以基本上它将呈现 2 个输入元素(1 个复选框，1 个助手创建的隐藏元素和 1 个您明确创建的元素)。当用户取消选中该复选框时，它将为您明确创建的复选框发送 True，为标签助手创建的复选框发送 false。

如果你检查网络流量(Chrome devtools->network)，你可以看到这个

Billable: True
Billable: false

模型绑定(bind)器将使用此信息并将值 True 映射到 View 模型的 Billable 属性。

解决方案是删除额外的隐藏元素并依赖于由标签助手创建的元素。

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