10-1 Liste de villes (Vue)

L'objectif est d'afficher une liste de villes dans le menu de gauche dans le but de pouvoir filtrer la liste d'événements:

http://localhost:4200

Modification de la vue `EvenementsController#Index`

Commençons par modifier la vue afin d'ajouter la colonne de gauche. Nous commencerons par y mettre du contenu texte fixe, mais modifierons bientôt pour que la liste soit dynamique avec des données en provenance de la BD.

De plus, nous utiliserons une vue partielle afin de compartimentaliser le plus possible les différents blocs de l'application.

Créez une vue partielle _Villes.cshtml sous le dossier Views/Evenements. Vous pouvez utiliser le raccourci click droit sur le dossier Evenements -> Add -> Razor MVC Partial View

Retirez la ligne @model TModel pour le moment et insérez des données fixes pour le moment.

Snowfall.Web.Mvc/Views/Evenements/_Villes.cshtml
<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>

Dans Index.cshtml, modifiez pour ajouter la colonne, tout en y insérant la vue partielle.

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

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

<h1>Événements</h1>

<div class="row">
    <div class="col-lg-3 mb-4">
        <partial name="_Villes" />
    </div>
    <div class="col-lg-9">
        <div class="row">
            @foreach (Evenement evenement in Model)
            {
                <partial name="_Evenement" model="evenement"/>
            }
        </div>
    </div>
</div>

info

Vous pouvez y mettre les villes que vous voulez, dans un premier temps ce n'est que pour tester l'affichage.

<div class="col-lg-3 mb-4">: On utilise une colonne de "3" (sur 12) de large, sur les grands écrans.
<div class="list-group">: Un list-group Bootstrap est utilisé pour grouper les options.
<a class="list-group-item list-group-item-action" href="#">: La classe list-group-item est utilisée pour le style de liste avec les bordures.
href="#": Pour l'instant on pointe nulle part.
<div class="col-lg-9">: On déplace les événements dans leur propre colonne.

Lancez le projet et vous devriez obtenir quelque chose de semblable à ceci:

http://localhost:4200

Modification de la vue EvenementsController#Index​

Modification de la vue `EvenementsController#Index`