Exercice : Ajouter une nouvelle page Razor

  • 10 minutes

Dans la leçon précédente, vous avez obtenu le code source du projet Contoso Pizza, puis vous avez apporté des modifications simples à la page d’accueil. Dans cette unité, vous allez ajouter une nouvelle page Razor au projet.

Créer la page Pizza List

Pour créer une page Razor, vous utilisez l’interface CLI .NET.

  1. Étant donné que le terminal est bloqué par la commande dotnet watch, ouvrez un autre terminal en cliquant avec le bouton droit sur le dossier ContosoPizza dans l’Explorateur et en sélectionnant Open in Integrated Terminal (Ouvrir dans le terminal intégré).

  2. Dans la nouvelle fenêtre du terminal, entrez la commande suivante :

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    La commande précédente :

    • Crée ces deux fichiers dans l’espace de noms ContosoPizza.Pages :
      • PizzaList.cshtml : la page Razor
      • PizzaList.cshtml.cs : la classe PageModel associée
    • Enregistre les deux fichiers dans le sous-répertoire Pages du projet.

  3. Dans Pages/PizzaList.cshtml, ajoutez le code suivant dans le bloc de code @{ } :

    ViewData["Title"] = "Pizza List 🍕";

    Cela définit l’élément <title> de la page.

  4. À la fin du fichier, ajoutez ce code :

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Cela ajoute un titre à la page, ainsi que deux espaces réservés de commentaire HTML pour les fonctionnalités que vous ajouterez ultérieurement.

  5. Enregistrez le fichier . Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement.

  6. Revenez dans le terminal où s’exécute dotnet watch et appuyez sur Ctrl+R pour recharger l’application et détecter les nouveaux fichiers.

Ajouter la page Pizza List au menu de navigation

Ce serait le bon moment pour tester la page, mais la page n’est pas accessible dans le navigateur parce qu’elle n’est pas encore liée dans le menu de navigation. Vous allez la lier maintenant.

  1. Ouvrez Pages/Shared/_Layout.cshtml.

  2. Dans l’élément <ul> avec la classe navbar-nav (débute à la ligne 21), notez les éléments <li> qui contiennent les liens vers les pages Home (Accueil) et Privacy (Confidentialité). Ajoutez le code suivant à la fin de la liste, après l’élément <li> contenant le lien Privacy :

    <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>

    Cela ajoute un lien vers la page Pizza List au menu de navigation.

  3. Enregistrez le fichier . L’onglet du navigateur avec l’application s’actualise automatiquement pour afficher les modifications. Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement, mais vous devez actualiser manuellement l’onglet du navigateur.

  4. Sélectionnez le lien Pizza List 🍕 dans le menu de navigation. La page Pizza List s’affiche.

Inscrire la classe PizzaService auprès du conteneur d’injection de dépendances

La page Liste de pizzas dépend de l’objet PizzaService permettant de récupérer la liste des pizzas. Vous allez utiliser l’injection de dépendances pour fournir l’objet PizzaService à la page. Tout d’abord, inscrivez la classe PizzaService auprès du conteneur.

  1. Ouvrez Program.cs.

  2. Dans la section d’ajout de services au conteneur, ajoutez le code suivant :

    builder.Services.AddScoped<PizzaService>();

    Ce code inscrit la classe PizzaService auprès du conteneur d’injection de dépendances. La méthode AddScoped indique qu’un nouvel objet PizzaService doit être créé pour chaque requête HTTP. PizzaService peut maintenant être injecté dans n’importe quelle page Razor.

  3. Enregistrez le fichier . Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement.

Afficher une liste de pizzas

Vous allez modifier la classe PageModel de la page Pizza List pour récupérer la liste de pizzas à partir de l’objet PizzaService et la stocker dans une propriété.

  1. Ouvrez Pages/PizzaList.cshtml.cs.

  2. Ajoutez les instructions using suivantes au début du fichier :

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Ces instructions importent les types Pizza et PizzaService à utiliser dans la page.

  3. Dans le bloc d’espace de noms ContosoPizza.Pages, remplacez la classe PizzaListModel entière par le code suivant :

    public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}

    Dans le code précédent :

    • Une variable PizzaService privée en lecture seule nommée _service est créée. Cette variable contient une référence vers un objet PizzaService.
      • Le mot clé readonly indique que la valeur de la variable _service ne peut plus être changée après qu’elle a été définie dans le constructeur.
    • Une propriété PizzaList est définie pour contenir la liste des pizzas.
      • Le type IList<Pizza> indique que la propriété PizzaList contiendra une liste d’objets Pizza.
      • PizzaList est initialisé sur default! pour indiquer au compilateur qu’il sera initialisé ultérieurement. De cette façon, les vérifications de sécurité Null ne sont pas requises.
    • Le constructeur accepte un objet PizzaService.
      • L’objet PizzaService est fourni par injection de dépendances.
    • Une méthode OnGet est définie pour récupérer la liste des pizzas à partir de l’objet PizzaService et la stocker dans la propriété PizzaList.

    Conseil

    Si vous avez besoin d’aide pour comprendre la sécurité Null, consultez Sécurité Null en C#.

  4. Enregistrez le fichier . Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement.

  5. Revenez dans le terminal où s’exécute dotnet watch et appuyez sur Ctrl+R pour recharger l’application avec le service inscrit et le nouveau constructeur de PizzaListModel.

Afficher la liste de pizzas

Maintenant que la page a accès à la liste de pizzas, vous allez utiliser cette liste pour afficher les pizzas dans la page.

  1. Ouvrez Pages/PizzaList.cshtml.

  2. Remplacez le commentaire <!-- List of pizzas will go here --> par le code suivant :

    <table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

    Dans le code précédent :

    • Un élément <table> est créé pour afficher la liste de pizzas.
    • Un élément <thead> est créé pour contenir l’en-tête de table.
    • L’instruction @foreach dans <tbody> itère sur la liste de pizzas.
      • La propriété Model référence l’objet PizzaListModel qui a été créé dans le fichier code-behind.
      • La propriété PizzaList référence la propriété PizzaList qui a été définie dans le fichier code-behind.
    • Chaque itération de l’instruction @foreach crée un élément <tr> qui contiendra les données de pizza :
      • La syntaxe Razor est utilisée pour afficher les données de pizza dans les éléments <td>. Cette syntaxe affiche les propriétés de l’objet Pizza qui est stocké dans la variable pizza.
      • Price est mis en forme par interpolation de chaîne C#.
      • Une expression ternaire est utilisée pour afficher la valeur de la propriété IsGlutenFree sous forme de signe « ✔️ » ou de cellule vide.
      • Un formulaire est créé pour supprimer la pizza.
        • L’attribut asp-page-handler indique que le formulaire doit être envoyé au gestionnaire Delete dans le fichier code-behind. Vous créerez ce gestionnaire dans une unité ultérieure.
        • L’attribut asp-route-id indique que la propriété Id de l’objet Pizza doit être passée au gestionnaire Delete.

  3. Enregistrez le fichier . Dans le navigateur, la page Pizza List s’actualise pour présenter la liste de pizzas. Si vous utilisez GitHub Codespaces, le fichier s’enregistre automatiquement, mais vous devez actualiser manuellement l’onglet du navigateur.

Capture d’écran de la page Pizza List avec la liste de travail.

Beau travail ! Vous avez créé une page Razor qui affiche une liste de pizzas. Dans l’unité suivante, vous allez découvrir les assistants de balises (tag helpers) et les gestionnaires de page (page handlers).