如何修复ASP.NET MVC 5（ASP.NET Identity）中复选框显示为文本框的UI问题

我来帮你搞定这个问题！你遇到的核心问题是MVC5不支持ASP.NET Core的asp-for标签助手语法，同时要确保ViewModel的属性类型正确，下面是具体的修复步骤：

1. 确认ViewModel的Selected属性类型为bool #

首先检查你的ManageUserRolesViewModel类，Selected必须是布尔类型，否则即使使用正确的HtmlHelper，也无法生成复选框：

public class ManageUserRolesViewModel
{
    public string RoleId { get; set; }
    public string RoleName { get; set; }
    // 必须是bool类型，不能是string或其他类型
    public bool Selected { get; set; }
}

2. 替换视图中的asp-for为MVC5的HtmlHelper方法 #

MVC5基于.NET Framework，使用的是HtmlHelper而不是ASP.NET Core的Tag Helper。把视图里的asp-for相关代码替换成MVC5原生的辅助方法：

原来的代码片段：

<input type="hidden" asp-for="@Model[i].RoleId" />
<input type="hidden" asp-for="@Model[i].RoleName" />
<input asp-for="@Model[i].Selected" class="form-check-input" />
<label class="form-check-label" asp-for="@Model[i].Selected">
@Model[i].RoleName
</label>

替换为：

@Html.HiddenFor(m => m[i].RoleId)
@Html.HiddenFor(m => m[i].RoleName)
@Html.CheckBoxFor(m => m[i].Selected, new { @class = "form-check-input" })
@Html.LabelFor(m => m[i].Selected, Model[i].RoleName, new { @class = "form-check-label" })

为什么要这样替换？ #

• @Html.CheckBoxFor是MVC5专门用于生成复选框的辅助方法，它会自动处理布尔值的回发逻辑（包括生成一个隐藏的input来捕获未选中的状态）。
• asp-for是ASP.NET Core引入的Tag Helper特性，MVC5没有内置支持，所以直接使用会被浏览器解析为普通的文本框。

3. 额外检查（可选） #

如果视图仍然没有正确渲染，确认视图顶部是否引入了MVC的HtmlHelper命名空间：

@using System.Web.Mvc.Html

不过大多数MVC5项目会在Views/web.config中全局配置这个命名空间，所以一般不需要手动添加。

完成以上修改后，重新运行项目，角色管理界面的复选框应该就能正常显示了。

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