是否可以在没有 onclick 方法的情况下以剃刀形式将选中状态分配给当前复选框的值？

Posted 2023-03-27

【中文标题】是否可以在没有 onclick 方法的情况下以剃刀形式将选中状态分配给当前复选框的值？

【英文标题】：Is it possible assign the checked state to the value of the current checkbox in razor form without onclick method?

【发布时间】：2022-01-10 17:03:45

【问题描述】：

我有一个 ASP.Net Core MVC Web 应用程序项目。 我想将复选框的选中状态作为值发送到表单提交时模型的相关参数。 我见过很多例子，使用 jquery 通过 onchange 方法获取/设置复选框的值。

我想知道的是，是否可以以类似于下面代码的方式将当前复选框的选中状态分配给该值。（它不起作用）

<input type="checkbox" id="IsActive" name="DTO.IsActive" checked="@Model.IsActive" value="(this.checked)" 

我找到的最简单的工作示例之一如下，但如果默认选中复选框并且其状态未更改，则返回 false。

<input type="checkbox" id="IsActive" name="DTO.IsActive" checked="@Model.IsActive" onchange="if(this.checked) this.value='true'; else this.value='false';" >

我知道有很多方法可以实现我想要的，但我想要最干净的解决方案。

提前致谢！

编辑：我的代码结构如下：

查看

@model MyModel
<form id="UpdateForm" class="was-validated" method="post" enctype="multipart/form-data" asp-controller="ControllerName" asp-action="Update">
    <div class="modal-body">
        <div class="form-group">
            <input type="text" class="form-control" id="Name" name="DTO.Name" value="@Model.Name" required>
            <input type="checkbox" id="IsActive" name="DTO.IsActive" checked="@Model.IsActive">
        </div>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary" data-save="modal">Update</button>
    </div>
</form>

控制器

public async Task<IActionResult> Update(Guid id, UpdateDto DTO)

...

解决方案 https://www.learnrazorpages.com/razor-pages/forms/checkboxes

在视图中

<input type="checkbox" " id="IsActive" name="DTO.IsActive" checked="@Model.IsActive" value="true"> 

在 DTO 对象中设置默认值

public bool IsActive  get; set;  = false; 

【参考方案1】：

是的，您可以通过使用内联 razor 语句 @() 来做到这一点 它看起来像这样：

<input type="checkbox" id="IsActive" name="DTO.IsActive" @(Model.IsActive ? "checked" : "") />

你也可以使用 Checkbox 助手

@html.CheckBoxFor(model => model.IsActive )

【讨论】：

嘿丹尼尔，这段代码@(Model.IsActive ? "checked" : "") 表明如果模型中的 IsActive 参数为真，那么复选框将显示为选中而不选中如果不是这样，我是对的吗？但是，这只有助于我在从控制器获取模型时分配值，它不能帮助我为将在表单提交时发送给控制器的模型分配值。用户可以在两者之间更改选中的属性。如果我弄错了，请详细说明？

嗨，是的，但不是：第一个选项允许您将复选框显示为选中状态。要将值发送回控制器，name 属性必须与模型属性的名称匹配（例如name="IsActive"）。然而，第二个选项可以帮助您（加载和发送数据）。您需要注意的是，如果选中该复选框，则 value="foo" 的复选框将像“foo”一样到达控制器，但如果未选中，它将不会到达控制器（是的，它令人困惑）所以我建议您可以为空复选框使用默认值。

嘿丹尼尔，你能指导我如何在我在问题中修改的结构上实现第二种方法吗？如何使用 @Html.CheckBoxFor(model => model.IsActive ) 将复选框检查状态值绑定到传出 DTO？通常我使用属性名称约定将数据与 name="DTO.Attribute" 绑定，因此文本框中写入的内容绑定到 DTO.Attribute。如何在 @Html.CheckBoxFor() 中实现这样的结构？

好吧，您可以使用当前的方法，在模型中使用名为 IsActive 的属性，默认值为 false，输入值为“True”。如果您想使用 @Html.CheckBoxFor(model => model.IsActive )，那么这将为模型生成必要的 HTML 以返回到控制器。看看这个例子，它会给你一个想法learnrazorpages.com/razor-pages/forms/checkboxes

PS：我不建议对单个字段使用两个输入，我不建议这样做。我建议最好使用默认值。例如：您的控制器可能类似于public ActionResult SaveForm(bool isChecked = false)，然后您的检查 那么在您的控制器中，如果选中，则为 true，否则为 false . （作为示例，我使用布尔值而不是模型。您将使用您的模型）