模型绑定布尔单选按钮如何在 .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>

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

$('#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 { ... }
});

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

How do model bound Boolean radio buttons work in .NET Core?

asp.net-core-mvc

model-binding

asp.net-core-tag-helpers