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

时间:2018-07-06 19:10:37

标签: asp.net-core-mvc model-binding asp.net-core-tag-helpers

我无法使用标签助手将布尔视图模型属性绑定到.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的多个输入。

如何将视图模型中的布尔值绑定到单选按钮,以便更改事件将根据控件的值适当地响应?

1 个答案:

答案 0 :(得分:3)

我首先像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 { ... }
});