Aller au contenu principal

12-6 Filtre actif

Bien que le filtre fonctionne, aucune indication n'est présente quant à l'élément actif.

Pour ce faire, on peut utiliser une propriété du ViewModel afin de stocker le filtre actif

  1. Ajouter une propriété SelectedVilleId de type int à EvenementsIndexViewModel.
    Snowfall.Web.Mvc/Models/Evenements/EvenementsIndexViewModel.cs
    public class EvenementsIndexViewModel
    {
        public required List<Evenement> Evenements { get; set; }
        public required List<Ville> Villes { get; set; }
        public int? SelectedVilleId { get; set; }
    }
  2. Assigner la valeur en provenance du contrôleur à la propriété SelectedVilleId du ViewModel.
    Snowfall.Web.Mvc/Controllers/EvenementsController.cs
    //...
    var viewModel = new EvenementsIndexViewModel
    {
        Villes = villes,
        Evenements = evenements,
        SelectedVilleId = ville
    };
    //...

Mais maintenant, comment passer cette sélection à la vue partielle _Villes?

En effet, si vous regardez, votre vue partielle _Villes reçoit en entrée une liste de villes:

Snowfall.Web.Mvc/Views/Evenements/_Villes.cshtml
@model List<Ville>

Mais nous avons besoin d'une liste de villes, en plus de la ville sélectionnée!

Convertir en vue Filtres et FiltresEvenementsViewModel​

Il devient clair que l'approche actuelle ne tient plus la route avec nos nouvelles contraintes. De plus, si vous ajoutez des filtres, cela ne deviendra que de plus en plus complexe.

Nous allons donc:

  1. Renommer la vue partielle _Villes pour _Filtres
  2. Créer un ViewModel FiltresViewModel pour cette vue.

Renommer la vue partielle​

  1. Utilisez la fonction Refactor this... -> Rename sur le fichier Villes.cshtml
  2. Renommez-le _Filtres.cshtml
  3. Modifiez l'appel à la vue partielle dans Index.cshtml
    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    @model EvenementsIndexViewModel

    @{
        ViewBag.Title = "Événements";
    }

    <h1>Événements</h1>

    <div class="row">
        <div class="col-lg-3 mb-4">
            <partial name="_Filtres" model="Model.Villes" />
        </div>

    //...

Créer un FiltresEvenementsViewModel​

  1. Sous le dossier Models/Evenements du projet MVC, créez une nouvelle classe FiltresEvenementsViewModel.
  2. Ajoutez-y la liste de villes et la ville active
    Snowfall.Web.Mvc/Models/Evenements/FiltresEvenementsViewModel.cs
    public class FiltresEvenementsViewModel
    {
        public required List<Ville> Villes { get; set; }
        public int? SelectedVilleId { get; set; }
    }
  3. Vous pouvez retirer de EvenementsIndexViewModel les deux propriétés, pour les remplacer plutôt par le ViewModel de filtres.
    Snowfall.Web.Mvc/Models/Evenements/EvenementsIndexViewModel.cs
    public class EvenementsIndexViewModel
    {
        public required List<Evenement> Evenements { get; set; }
        public required FiltresEvenementsViewModel FiltresEvenements { get; set; }
    }
  4. Dans le contrôleur Evenements, remplacez les deux propriétés précédentes par un nouvel objet FiltresEvenementsViewModel.
    Snowfall.Web.Mvc/Controllers/EvenementsController.cs
    var viewModel = new EvenementsIndexViewModel
    {
        Evenements = evenements,
        FiltresEvenements = new FiltresEvenementsViewModel()
        {
            Villes = villes,
            SelectedVilleId = ville
        }
    };
  5. À partir de l'index, envoyez à la vue partielle le nouveau ViewModel
    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    @model EvenementsIndexViewModel

    @{
        ViewBag.Title = "Événements";
    }

    <h1>Événements</h1>

    <div class="row">
        <div class="col-lg-3 mb-4">
            <partial name="_Filtres" model="Model.FiltresEvenements" />
        </div>
  6. Modifier la vue partielle pour utiliser le ViewModel
    Snowfall.Web.Mvc/Views/Evenements/_Filtres.cshtml
    @model FiltresEvenementsViewModel

    <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.Villes)
            {

Fiou, c'est fait! 😅

Sélectionner la ville active​

La dernière étape consiste à sélectionner la ville active. Pour ce faire, on peut utiliser une condition sur l'attribut checked si la ville sélectionnée correspond au Id de la ville dans la boucle.

Snowfall.Web.Mvc/Views/Evenements/_Filtres.cshtml
@foreach (Ville ville in Model.Villes)
{
    <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" checked="@(Model.SelectedVilleId == ville.Id ? "checked" : null)"/>
        <label class="form-check-label" for="ville_@ville.Id">@ville.Nom, @ville.PaysIso</label>
    </li>
}
http://localhost:4200

party cat

level up