27-1 Page Show
Modifier la vue Index
Cette étape est optionnelle, mais on peut modifier la vue Index afin que cette dernière utilise une table.
On peut modifier le composant EvenementListe de la façon suivante:
@using Snowfall.Application.Dtos.Evenements
@if (Evenements == null)
{
<p>Chargement des événements...</p>
}
else
{
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nom</th>
<th scope="col">Ville</th>
</tr>
</thead>
<tbody>
@foreach (EvenementDto evenement in Evenements)
{
<tr>
<td>@evenement.Id</td>
<td>@evenement.Nom</td>
<td>@evenement.VilleId</td>
</tr>
}
</tbody>
</table>
}
@code {
[Parameter]
public List<EvenementDto>? Evenements { get; set; }
}
Peu de changements, outre qu'on affiche un peu plus d'informations et que l'information est affichée sous forme de table.
Remarquez qu'on affiche VilleId, nous allons remédier à cette situation prochainement pour afficher le nom de la ville. Pour l'instant, le DTO ne contient que l'identifiant.
Créer la page Show
Pour afficher le détail d'un événement et éventuellement le modifier, il faudra une page Show, en plus de la page Index responsable d'afficher les événements.
Créer la page
Dans le projet Admin, sous le dossier Pages/Evenements, faire Add-> Blazor Component, utilisez @Page et nommer la composante Show.
<h3>Show</h3>
@code {
}
Définir l'URL de la page
La page Show doit montrer le détail d'un produit. Elle doit donc pouvoir accepter un paramètre.
Pour définir une page associée à une URL dynamique, on peut utiliser la forme suivante pour la directive @page:
@page "/evenements/{Id:int}"
<h3>Show</h3>
@code {
[Parameter]
public int Id { get; set; }
}
L'URL associée à la page est /evenements/{Id:int}, {Id:int} étant une portion dynamique.
Une page associée à une URL dynamique définit ce paramètre dans la directive @page.
Il faut aussi définir l'attribut [Parameter] dans la portion @code correspondant au paramètre mentionné dans la directive @page.
Faire le lien entre Index et Show
On veut que lorsqu'on clique sur un événement dans la liste, être amené vers la vue show. Pour ce faire, il nous faut un lien.
Faire le lien est très simple, on n'a qu'à utiliser <NavLink>, tout en construisant le lien vers la page Show pour qu'il prenne en compte le id de l'événement à afficher.
@foreach (EvenementDto evenement in Evenements)
{
<tr>
<td>@evenement.Id</td>
<td><NavLink href=@($"/evenements/{@evenement.Id}")>@evenement.Nom</NavLink></td>
<td>@evenement.VilleId</td>
</tr>
}
Voilà, le lien fonctionne. Cependant, il faut maintenant récupérer l'information en provenance de l'API!