Radio Button-Tag-Helfer in ASP.NET 5 MVC 6

Question

Ich sehe keine Tag-Helfer für Radio-Schaltflächen in ASP.NET 5 MVC 6. Was ist die richtige Art der Handhabung von Formularelementen, wo ich Radio-Schaltflächen verwenden müssen?

Answer 1

Es gibt einen TagHelper für alle Eingabetypen, der auch den Radioknopftyp enthält. Vorausgesetzt, dass Sie diese eine Ansicht Modell wie haben

public class CreateUserVm 
{ 
    public string UserName { set; get; } 
    public IEnumerable<RoleVm> Roles { set; get; } 
    public int SelectedRole { set; get; } 
} 
public class RoleVm 
{ 
    public int Id { set; get; } 
    public string RoleName { set; get; }   
} 

Und in Ihrer GET Aktion,

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

In der Ansicht können Sie einfach Markup für den Input-Tag verwenden.

@model YourNamespaceHere.CreateUserVm 
<form asp-action="Index" asp-controller="Home"> 
    <label class="label">User name</label> 
    <div class="col-md-10"> 
     <input type="text" asp-for="UserName" /> 
    </div> 
    <label class="label">Select a Role</label> 
    <div class="col-md-10"> 
    @foreach (var item in Model.Roles) 
    { 
     <input asp-for="SelectedRole" type="radio" value="@item.Id" /> @item.RoleName 
    } 
    </div> 
    <input type="submit" /> 
</form> 

Wenn Sie Ihr Formular veröffentlichen, die Rold Id für die ausgewählte Rolle wird

Denken Sie daran, in der SelectedRole Eigenschaft sein, dass der obige Code Rasierer wird Eingabeelement mit gleichenId Attributwert generieren und name Attributwert für jeden von der Schleife erzeugten Eingang. Im obigen Beispiel generiert es 3 Eingabeelemente (Optionsfeldtyp) mit dem Attributwert Id und nameSelectedRole. Modellbindung funktioniert, da der name-Attributwert mit dem Eigenschaftsnamen (SelectedRole) in unserem Ansichtsmodell übereinstimmt, aber die doppelten ID-Attributwerte Probleme mit dem clientseitigen Code verursachen (doppelte IDs in einem Dokument sind ungültig)