模型绑定布尔单选按钮如何在 .NET Core 中工作？

Question

我在使用标签助手将布尔视图模型属性绑定到 .NET Core 中的单选按钮时遇到问题。

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" asp-for="AffectsUsers">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" asp-for="AffectsUsers">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

我有一个基于 ID 绑定到单选按钮的 jQuery 更改事件。

$('#AffectsUsers').change(function() {
   if (this.value === 'true') { ... } else { ... }
});

仅针对第一个单选按钮调用该事件。我认为这是因为我正在使用单选按钮标签助手，它使用相同的 ID 创建多个输入。

如何将视图模型中的布尔值绑定到单选按钮，以便更改事件能够根据控件的值做出适当的响应？

Answer 1

我首先像 Stephen 建议的那样覆盖 ID，以确保 HTML 有效。另外，我设置了“for”标签而不是“asp-for”标签，并更改了 ID 以引用它链接到的特定单选按钮。

<fieldset class="form-group">
    <div class="row">
        <label asp-for="AffectsUsers" class="col-sm-2 col-form-label text-right">Affects Users?</label>
        <div class="col-sm-10">
            <div class="mt-2">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersYes" asp-for="AffectsUsers" type="radio" value="true" />
                    <label class="form-check-label" for="AffectsUsersYes">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" id="AffectsUsersNo" asp-for="AffectsUsers" type="radio" value="false" />
                    <label class="form-check-label" for="AffectsUsersNo">No</label>
                </div>
            </div>
            <span asp-validation-for="AffectsUsers" class="text-danger"></span>
        </div>
    </div>
</fieldset>

然后我在 jQuery 中使用单选按钮的名称而不是 ID：

$('input[type=radio][name=AffectsUsers]').change(function() {
    if (this.value === 'true') { ... } else { ... }
});