web-dev-qa-db-fra.com

Aides aux balises de bouton radio dans ASP.NET 5 MVC 6

ASP.NET 5 MVC 6 ne contient aucune aide pour les balises pour les boutons radio. Quelle est la bonne façon de gérer les éléments de formulaire lorsque je dois utiliser des boutons radio?

asp.net-mvcasp.net-coreasp.net-core-mvctag-helpers
21
Sam

Il existe un TagHelper pour tous les types d’entrée, qui inclut également le type de bouton radio. En supposant que vous ayez un modèle de vue comme celui-ci

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; }        
}

Et dans votre action GET,

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

Dans la vue, vous pouvez simplement utiliser un balisage pour la balise d’entrée.

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

Lorsque vous publiez votre formulaire, le Rold ID du rôle sélectionné sera dans la propriété SelectedRole

N'oubliez pas que le code de rasoir ci-dessus générera un élément d'entrée avec la valeur d'attribut same Id et la valeur d'attribut name pour chaque entrée générée par la boucle. Dans l'exemple ci-dessus, il générera 3 éléments d'entrée (type de bouton radio) avec les valeurs d'attribut Id et name définies à SelectedRole. La liaison de modèle fonctionnera lorsque la valeur de l'attribut name correspond au nom de la propriété (SelectedRole) dans notre modèle de vue, mais les valeurs de l'attribut Id dupliqué peuvent vous causer des problèmes avec le code côté client (les ID dupliqués dans un document sont invalides)

32
Shyju

Bien qu'il existe des solutions pour utiliser asp-for="SomeField", j'ai constaté que la solution la plus simple consistait simplement à faire correspondre un champ de modèle de vue au champ name du bouton radio. 

Voir le modèle:

public class MyViewModel
{
   public string MyRadioField { get; set; }
}

Forme (sans étiquettes pour plus de clarté):

@model MyViewModel
<form asp-action="SomeAction" asp-controller="SomeController">
   <input type="radio" name="MyRadioField" value="option1" checked />
   <input type="radio" name="MyRadioField" value="option2" />
   <input type="radio" name="MyRadioField" value="option3" />

   <input type="submit" />
</form>

Lorsque le formulaire est soumis, MyRadioField est rempli avec la valeur du bouton radio coché. 

1
Corey