Aller au contenu principal

3-3 Liens dynamiques

Si à partir de la page d'accueil nous voulons faire un lien (<a href>) vers un événement, il nous faut construire ce lien dynamiquement. En effet, il faut y ajouter un paramètre.

Il est effectivement possible de faire un lien autant vers /evenements/1 que vers /evenements/1234324234, tout dépendant de l'événement à afficher et récupérer.

Ajouter une propriété Id au modèle Evenement​

Ajoutez à votre modèle Evenement une propriété Id:

Snowfall.Web.Mvc/Models/Evenement.cs
public class Evenement
{
    public int Id { get; set; }
    public required string Nom { get; set; }
//...
}

Modifier les événements retournés par Index()​

Afin d'inclure l'identifiant au niveau de la vue et ainsi faire un lien vers l'événement, ajoutons cet identifiant à la liste retournée.

Nous utiliserons des identifiants hard codés pour l'instant

Snowfall.Web.Mvc/Controllers/EvenementsController.cs
    public IActionResult Index()
    {
        List<Evenement> evenements = new List<Evenement>()
        {
            new Evenement()
            {
                Id = 1,
                Nom = "Super Duper Événement LoL",
                Description = "Compétition de League of Legends.",
                Capacite = 1400, // 1400 personnes
                Date = DateTime.Now + TimeSpan.FromDays(30), // dans 30 jours
                Prix = new decimal(49.00), // 49$ l'inscription, en decimal
                Ville = "Montreal, CA",
            },
            new Evenement()
            {
                Id = 2,
                Nom = "Super Duper Événement Space Quest 6 Roger Wilco",
//...

Faire le lien vers Show​

Dans la vue partielle utilisée par l'index, ajoutez un lien vers le détail d'un événement:

Snowfall.Web.Mvc/Views/Evenements/_Evenement.cshtml
@model Evenement

<h2>@Model.Nom</h2>
@if (@Model.ImagePath != null)
{
    <img src="@Model.ImagePath" />
}
<p>@Model.Description</p>
<ul>
    <li>Date: @Model.Date.ToShortDateString()</li>
    
    @{
        var classeBold = @Model.Capacite > 1000 ? "fw-bold" : null;
    }
    <li class="@classeBold">Capacité: @Model.Capacite</li>
    <li>Prix: @Model.Prix</li>
</ul>

<a asp-controller="Evenements" asp-action="Show" asp-route-id="@Model.Id">Détails</a>
info

On construit un lien à l'aide des attributs asp-. Plus particulièrement:

  • asp-controller
  • asp-action
  • asp-route-id

À noter que asp-route- est une option dynamique qui change en fonction du nom de nos paramètres. Si votre paramètre de route s'appelait bozo, vous auriez un attribut asp-route-bozo de disponible.

Finalement, on utilise @Model.Id pour construire la portion dynamique du lien.

Lancez le projet, et voilà, vous devriez pouvoir naviguer à partir de l'accueil vers l'action Show en cliquant sur le lien!