Aller au contenu principal

10-4 Utiliser d'un ViewModel dans la vue

Le compilateur vous a probablement déjà averti que vous êtes en train d'envoyer à la vue Index un objet du mauvais type.

En effet, dans le haut de la vue Index.cshtml, on indique que la variable @model est de type List<Evenement>:

Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
@model List<Evenement>;

Cependant, ce n'est plus le cas, la vue reçoit plutôt un objet de type EvenementsIndexViewModel.

Adapter Index.cshtml pour utiliser le ViewModel​

  1. Ajouter Snowfall.Web.Mvc.Models.Evenements au ViewImports_. Cette étape est optionnelle, mais pour simplifier les importations dans les fichiers de vues, on peut ajouter le using en surbrillance au fichier _ViewImports.

    Snowfall.Web.Mvc/Views/_ViewImports.cshtml
    @using Snowfall.Web.Mvc
    @using Snowfall.Web.Mvc.Models
    @using Snowfall.Domain.Models
    @using Snowfall.Web.Mvc.Models.Evenements
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

  2. Remplacer le modèle associé à la vue. Dans Index.cshtml, remplacez la ligne suivante pour changer le type de modèle attendu par la vue:

    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    @model List<Evenement>;

    Par celle-ci:

    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    @model EvenementsIndexViewModel

    De cette façon, on vient lier la vue au bon type de modèle, soit EvenementsIndexViewModel.

  3. Remplacez Model par Model.Evenements dans la boucle foreach des événements.

    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    @foreach (Evenement evenement in Model.Evenements)
    {
        <partial name="_Evenement" model="evenement"/>
    }

    Model.Evenements fait référence à la propriété Evenements de EvenementsIndexViewModel qui contient la liste des événements.

Adapter la vue partielle _Villes pour utiliser le ViewModel​

La vue partielle _Villes utilise toujours une liste statique de villes. Réglons ce problème!

  1. Passez à la vue partielle la liste de villes contenue dans le ViewModel.

    Snowfall.Web.Mvc/Views/Evenements/Index.cshtml
    <div class="col-lg-3 mb-4">
        <partial name="_Villes" model="Model.Villes" />
    </div>

  2. Associez à la vue partielle _Villes le bon modèle, soit une liste de villes.

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

    <h6 class="text-uppercase">Filtrer par ville</h6>
    <div class="list-group">
        <a class="list-group-item list-group-item-action" href="#">Montreal, CA</a>
        <a class="list-group-item list-group-item-action" href="#">Los Angeles, US</a>
        <a class="list-group-item list-group-item-action" href="#">Berlin, DE</a>
        <a class="list-group-item list-group-item-action" href="#">Paris, FR</a>
        <a class="list-group-item list-group-item-action" href="#">Tokyo, JP</a>
        <a class="list-group-item list-group-item-action" href="#">Sydney, AU</a>
    </div>

  3. Finalement, remplacez la liste statique par une boucle foreach sur le modèle de la vue partielle (liste de villes).

    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>

  4. Lancez le projet!

level up