Modification de l'index (cards)

Dans un premier temps, utilisons des Cards Bootstrap sur la page d'accueil.

Grille

Les cartes sont affichées côte à côte sur la page d'accueil. Pour ce faire, nous utiliserons les colonnes (col) Bootstrap.

La première étape est de créer une balise div avec la classe row.

Row

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

@model List<Evenement>;

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

<h1>Événements</h1>

<div class="row">
    @foreach (Evenement evenement in Model)
    {
        <partial name="_Evenement" model="evenement"/>
    }
</div>

Cards

Ensuite, créons les cards via le fichier _Evenement.cshtml.

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

@model Evenement

<div class="col-md-6 col-lg-4 mb-4">
    <div class="card h-100">
        @if (@Model.ImagePath != null)
        {
            <img class="card-evenement img-fluid rounded-top object-fit-cover" src="~/images/evenements/@Model.ImagePath"/>
        }
        <div class="card-body">
            <h5 class="card-title">@Model.Nom</h5>
            <p class="card-text">@Model.Description</p>
            <p class="card-text">@Model.Prix$</p>
            <p class="card-text">
                <small class="text-muted">@Model.Date.ToShortDateString() - @Model.Capacite places</small>
            </p>
        </div>
        <div class="card-footer">
            <a class="btn btn-primary"
               asp-controller="Evenements"
               asp-action="Show"
               asp-route-id="@Model.Id">
                Détails
            </a>
        </div>
    </div>
</div>

Pour que l'image s'affiche correctement dans l'en-tête de la carte, il vous faudra ajouter la classe suivante à votre css (ex.: app.scss):

Snowfall.Web.Mvc/assets/scss/app.scss

.card-evenement {
  height: 11rem;
}

On force en quelque sorte une hauteur à l'image et la classe object-fit-cover appliquée sur la balise image positionne cette dernière comme cover (centré et overflow caché).