12-2 Formulaire GET de filtres

Pour l'instant, votre menu de gauche devrait ressembler à quelque chose comme ceci:

Snowfall.Web.Mvc/Views/Evenements/_Villes.cshtml

@model List<Ville>

<h6 class="text-uppercase">Filtrer par ville</h6>
<div class="list-group">
    @foreach (Ville ville in Model)
    {
        <a class="list-group-item list-group-item-action" href="#">@ville.Nom, @ville.PaysIso</a>
    }
</div>

Afin de pouvoir sélectionner un élément et de soumettre les changements, nous allons utiliser un formulaire.

Définir le formulaire et le lier au contrôleur

1. Pour définir un formulaire, on utilise la balise form.

   Snowfall.Web.Mvc/Views/Evenements/_Villes.cshtml

   <form method="get">
     <h6 class="text-uppercase">Filtrer par ville</h6>
     <div class="list-group">
         @foreach (Ville ville in Model)
         {
             <a class="list-group-item list-group-item-action" href="#">@ville.Nom, @ville.PaysIso</a>
         }
     </div>
   </form>
   info

   On utilise la méthode get puisque cette dernière utilise les querystring (paramètres d'URL) pour transmettre les données, ce qui est tout à fait aligné avec notre objectif.

2. Pour définir le contrôleur et l'action responsable de traiter le formulaire, on utilise les attributs asp-controller et asp-action sur la balise form.

   <form method="get" asp-controller="Evenements" asp-action="Index">
   info

   Dans notre cas, le contrôleur responsable de traiter les requêtes est le contrôleur d'événements et l'action est Index, soit la page d'accueil.

3. Modifions la liste pour retirer les liens (ils seront remplacés par des input, en plus de s'assurer qu'elle utilise un format ul et li, cela simplifiera la présentation du formulaire.

   <form method="get" asp-controller="Evenements" asp-action="Index">
       <h6 class="text-uppercase">Filtrer par ville</h6>
       <ul class="list-group">
           @foreach (Ville ville in Model)
           {
               <li class="list-group-item list-group-item-action">
                   
               </li>
           }
       </ul>
   </form>

4. On peut ensuite définir un input pour chaque option de ville, avec comme valeur le id. Comme on ne peut choisir qu'une seule ville à la fois, j'utiliserai dans ce cas-ci un bouton radio.

   <form method="get" asp-controller="Evenements" asp-action="Index">
       <h6 class="text-uppercase">Filtrer par ville</h6>
       <ul class="list-group">
           @foreach (Ville ville in Model)
           {
               <li class="list-group-item list-group-item-action">
                   <input class="form-check-input me-1" type="radio" name="ville" value="@ville.Id" id="ville_@ville.Id" />
                   <label class="form-check-label" for="ville_@ville.Id">@ville.Nom, @ville.PaysIso</label>
               </li>
           }
       </ul>
   </form>
   info

   Pour chaque input de la liste:

   • name est le nom que sera donné au paramètre envoyé via le formulaire et aussi dans l'URL
   • value est la valeur associée au input, soit le id de la ville
   • id on s'assure d'associer un id unique à chaque input afin d'avoir un libellé associé.

Vous devriez maintenant avoir quelque chose comme ceci:

http://localhost:4200

Soumettre le formulaire

Pour soumettre un formulaire, il faut un bouton! Nous verrons plus loin comment soumettre le formulaire automatiquement si vous le désirez, mais pour l'instant, allons-y de la façon classique.

<form method="get" asp-controller="Evenements" asp-action="Index">
    <h6 class="text-uppercase">Filtrer par ville</h6>
    <ul class="list-group">
        @foreach (Ville ville in Model)
        {
            <li class="list-group-item list-group-item-action">
                <input class="form-check-input me-1" type="radio" name="ville" value="@ville.Id" id="ville_@ville.Id" />
                <label class="form-check-label" for="ville_@ville.Id">@ville.Nom, @ville.PaysIso</label>
            </li>
        }
    </ul>


    <button type="submit" class="btn btn-primary">Appliquer le filtre</button>
</form>

Maintenant, lorsque vous appuyez sur appliquer le filtre, vous verrez le paramètre ville changer dans la barre de navigation!

Par exemple, http://localhost:5156/?ville=1.

http://localhost:4200

Vérifier que votre contrôleur reçoit bien le paramètre

Démarrez l'application en mode debug et ajoutez un breakpoint au tout début de votre action Index.

Soumettez le formulaire de filtre au niveau de votre application et assurez-vous que ville est bien assigné.

🎉 Vous êtes en mesure de recevoir la ville selon laquelle filtrer votre liste d'événements!

Maintenant, nous allons bâtir les fonctions de repository et de service permettant de filtrer la liste.