是否可以将单选按钮标签助手值属性设置为 html 中的 "checked"？

Question

我正在寻找一种方法来使用单选按钮标签助手上的值属性来通知按钮是否被选中，而不是使用单独的字段进行选择。我找到了@Shyju 对的回答。我正在使用该答案的修改示例来说明我的意思。

假设我有一个视图模型

public class ExampleViewModel
{
    public int Id { get; set; }
    public string UserName { get; set; }
    public List<UserRole> Roles { get; set; }
}
public class UserRole
{
    public int Id { get; set; }
    public string RoleName { get; set; }
    public bool IsSelected { get; set; }
}

在控制器中初始化

public IActionResult Example()
    {
        var vm = new ExampleViewModel
        {
            Roles = new List<UserRole>
            {
                new UserRole {Id = 1, RoleName = "Admin"},
                new UserRole {Id = 2, RoleName = "Editor"},
                new UserRole {Id = 3, RoleName = "Reader"}
            }
        };
        return View("Example",vm);
    }

并在视图中使用

<form asp-controller="Example" asp-action="Save">
    <label class="label">User name</label>
    <div class="col-md-10">
        <input asp-for="UserName" type="text" />
    </div>
    <label class="label">Select a Role</label>
    <div class="col-md-10">
        <div class="btn-group" data-toggle="buttons">
            @for (var i = 0; i < Model.Roles.Count; i++)
            {
                <label class="btn btn-default">
                    <input asp-for="Roles[i].Id" type="radio" value="@Model.Roles[i].Id" />
                    <input asp-for="Roles[i].IsSelected" type="radio" value=true />
                    @Model.Roles[i].RoleName
                </label>
            }
        </div>
    </div>
    <input type="submit" />
</form>

我想用这个实现的是能够读取控制器 post 方法中的 UserRole.IsSelected 字段，以查看是否选中了特定的 UserRole。如果用户只检查一个按钮并且不改变选择，则此解决方案有效。如果用户将选择更改为另一个，则用户触摸的所有 UserRole 值都将 IsSelected 字段设置为 true。

是否可以通过 HTML 以某种方式设置 IsSelected 值以仅显示提交表单时选中的按钮，或者它是否需要 JavaScript 函数？

Answer 1

您的模型对单选按钮（用于从多个按钮中选择一个）没有意义。如果你只想select一个角色，那么你的模特需要

public class ExampleViewModel
{
    public int Id { get; set; }
    public string UserName { get; set; }
    public int SelectedRole { get; set; }
    public List<UserRole> RolesList { get; set; }
}
public class UserRole
{
    public int Id { get; set; }
    public string RoleName { get; set; }
}

并在视图中

@foreach(var role < Model.RolesList)
{
    <label class="btn btn-default">
        <input asp-for=SelectedRole" type="radio" value="role.Id" />
        <span>@role.RoleName<span>
    </label>
}

并且在 POST 方法中，SelectedRole 的值将包含 selected UserRole

的 Id

如果您想要 select 多个角色，则使用您现有的模型，但视图变为

@for (var i = 0; i < Model.Roles.Count; i++)
{
    <label class="btn btn-default">
        <input asp-for="Roles[i].Id" type="hidden"/>
        <input asp-for="Roles[i].IsSelected" type="checkbox"/>
        <span>@Model.Roles[i].RoleName</span>
    </label>
}

并且在 POST 方法中，您可以使用

获得 selected 角色

IEnumerable<UserRole> selectedRoles = model.Roles.Where(x => x.IsSelected);

是否可以将单选按钮标签助手值属性设置为 html 中的 "checked"？

Is it possible to set radio button tag helper value attribute as "checked" in html?

html

asp.net-mvc

radio-button

asp.net-core-mvc

tag-helpers