ASP.NET Core MVC视图中复选框替换为单选按钮异常问题

选态异常本质是HTML单选按钮的分组规则和ASP.NET Core标签助手的默认生成逻辑冲突：

• 浏览器靠完全一致的name属性识别单选按钮分组，只有同组按钮才会实现互斥选中效果
• 用asp-for="@Model[i].Selected"绑定布尔属性时，标签助手默认生成带循环索引的name（格式为[i].Selected），每个单选按钮name都不相同，会被浏览器识别为独立分组，完全失去互斥性。同时标签助手会给所有Selected=true的列表项自动添加checked属性，最终出现多个按钮同时选中的异常表现。

不要依赖标签助手直接绑定列表项的布尔属性生成单选框，手动统一分组name，手动控制checked状态即可。

修正后的视图代码 #

@model List<ChangeItemViewModel>
@{
    // 取到默认选中的项ID，无选中项则变量为null
    var defaultSelectedId = Model.FirstOrDefault(x => x.Selected)?.Id;
}
<form method="post">
    <div class="card">
        <div class="card-body">
            @for (int i = 0; i < Model.Count; i++)
            {
                <div class="form-check">
                    <input type="hidden" asp-for="@Model[i].Id" />
                    <input type="hidden" asp-for="@Model[i].Name" />
                    @* 所有单选按钮name统一为SelectedItemId，和后台接收参数名对应 *@
                    <input
                        type="radio"
                        class="form-check-input"
                        name="SelectedItemId"
                        value="@Model[i].Id"
                        @(defaultSelectedId != null && defaultSelectedId.Equals(Model[i].Id) ? "checked" : string.Empty)
                        id="changeItem_@i"
                    />
                    <label for="changeItem_@i" class="form-check-label">
                        @Model[i].Name
                    </label>
                </div>
            }
        </div>
    </div>
    <button type="submit" class="btn btn-primary mt-2">提交</button>
</form>

后台接收示例 #

后台Action直接接收选中值即可：

[HttpPost]
public IActionResult SaveChange(List<ChangeItemViewModel> items, Guid SelectedItemId)
{
    // SelectedItemId 就是用户当前选中的选项ID，直接用于业务逻辑即可
    return Ok();
}

注意：请将上述代码中Id的类型替换为你实际ChangeItemViewModel里的Id类型，比如如果是int主键就把Guid改成int。

内容的提问来源于stack exchange，提问作者qwerty