是否可以將html中的單選按鈕標籤助手值屬性設置爲「checked」？

Question

我正在尋找一種方法來使用單選按鈕標籤助手上的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函數？

Answer 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值將包含所選的IdUserRole

如果另外，要選擇多個角色，你現有的模型使用，但角度的

@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);