Checkbox multiples en Blazor

Dans l'éventualité où vous auriez besoin de faire une associate un à plusieurs pour vos formulaires (ex.: un produit associé à plusieurs catégories), vous pourriez avoir besoin de checkbox afin de sélectionner plusieurs éléments.

Pour gérer un checkbox multiple en Blazor, vous devrez utiliser la balise HTML conventionnelle <input type="checkbox> plutôt que le composant InputCheckbox de Blazor. Il pourrait être tentant d'utiliser InputCheckbox, mais ce dernier fonctionne seulement avec des valeurs booléennes, alors que vous aurez une liste de id. Il serait possible de faire une liste d'objets avec une propriété IsSelected, mais cela est un peu overkill pour le besoin.

Dans un premier temps, vous devez avoir dans votre DTO de création une liste pour contenir les id sélectionnés. Du genre:

public List<int> VilleIds { get; set; } = new();

Ensuite, l'idée est d'afficher un checkbox conventionnel pour chacune des valeurs.

@foreach (var ville in villes)
{
    <input type="checkbox"
            class="form-check-input"
            id="ville_@ville.Id"
            value="@ville.Id"
            checked="@_creerEvenementDto.VilleIds.Contains(ville.Id)"
            @onchange="(e) => ToggleVilleCheckbox(e, ville.Id)"/>
}

info

value: la valeur associée à la sélection (ex.: un id) checked: ce qui détermine si la boîte est cochée ou non. Ici, si la liste de villes dans mon DTO de création contient le id, la boîte doit être cochée. @onchange: Une fonction anonyme recevant le détail de l'événement (e) et appelant une fonction de votre code avec:

• e le détail de l'événement
• ville.Id l'identifiant de l'élément venant d'être sélectionné

La fonction liée à l'événement onchange pourrait ressembler à quelque chose comme ceci:

  private void ToggleVilleCheckbox(ChangeEventArgs e, int villeId)
  {
      bool isChecked = (bool)e.Value!;

      // Ajouter ou retirer le id de la liste de ids dans votre DTO
  }