是否可以在 html 中将单选按钮标签助手值属性设置为“已检查”?

Posted

技术标签:

【中文标题】是否可以在 html 中将单选按钮标签助手值属性设置为“已检查”?【英文标题】:Is it possible to set radio button tag helper value attribute as "checked" in html? 【发布时间】:2016-07-19 19:24:41 【问题描述】:

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

假设我有一个视图模型

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 函数?

【问题讨论】:

【参考方案1】:

您的模型对于单选按钮(用于从多个中选择一个)没有意义。如果你只想选择一个角色,那么你的模型需要是

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 的值将包含所选UserRoleId

如果你想选择多个角色,使用你现有的模型,但是视图变成了

@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 方法中,您可以使用

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

【讨论】:

感谢斯蒂芬,您的回答非常清晰且内容丰富。我正在尝试开发一个解决方案,我可以在视图中动态设置选择标准。有时选择将是唯一的(单选按钮),有时会允许多个选择(复选框)。然后我可以在这两种情况下使用相同的模型。我有一种感觉,这可能是不可能的,但我想我会在这里问一下。 一点也不。这是对我的问题的一个很好的回答,这可能有点太精确了。它隐含地解决了我的问题。 @StephenMuecke 在我的情况下,我在&lt;input asp-for=SelectedRole" type="radio" value="role.Id" /&gt; 中放置了一个额外的属性name=RoleType,并且总是将单选按钮的值设为空。但是在阅读了您的帖子后,我意识到如果使用标签助手我不需要使用名称属性,因为asp-for 会自动为我们生成名称和id 属性。阅读您的帖子后,我删除了 name 属性,它现在可以工作了。感谢您提供所有必要的代码并对其进行简要说明。

以上是关于是否可以在 html 中将单选按钮标签助手值属性设置为“已检查”?的主要内容,如果未能解决你的问题,请参考以下文章

C#中按下按钮怎么把按钮设为默认的白色

html中<radio>单选按钮控件标签用法解析及如何设置默认选中

在django中将注册表单填写到数据库后如何存储用户选择的单选按钮值?

如何在radiogroup中将选中的单选按钮设置为默认值?

通过单击标签来切换 HTML 单选按钮

在动态创建单选按钮方面需要帮助