Exercice : Personnaliser le projet

  • 12 minutes

Votre équipe a divisé le travail à faire sur l’application de gestion de la liste de pizzas. Vos coéquipiers ont créé l'application web ASP.NET Core pour vous, et ils ont déjà construit un service pour lire et écrire des données de pizza dans une base de données. Vous avez été chargé de travailler sur la page Pizza List, qui devra présenter une liste de pizzas et vous permettre d’ajouter de nouvelles pizzas à la base de données. Nous commencerons par visiter le projet pour comprendre comment il est organisé.

Remarque

Ce module utilise l’interface CLI .NET et Visual Studio Code pour le développement local. Après avoir complété ce module, vous pouvez appliquer les concepts à l’aide de Visual Studio (Windows) ou poursuivre le développement à l’aide de Visual Studio Code (Windows, Linux et macOS).

Obtenir les fichiers projet

Si vous utilisez GitHub Codespaces, ouvrez simplement le référentiel dans le navigateur, sélectionnez Code, puis créez un codespace sur la branche main.

Si vous n’utilisez pas GitHub Codespaces, obtenez les fichiers projet et ouvrez-les dans Visual Studio Code en effectuant les étapes suivantes :

  1. Ouvrez un interpréteur de commandes et clonez le projet à partir de GitHub en utilisant cette ligne de commande :

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Accédez au répertoire mslearn-create-razor-pages-aspnet-core et ouvrez le projet dans Visual Studio Code :

    cd mslearn-create-razor-pages-aspnet-core
code .

Conseil

Si vous avez un runtime de conteneur compatible installé, vous pouvez utiliser l’extension Dev Containers pour ouvrir le référentiel dans un conteneur avec les outils préinstallés.

Passer en revue le travail de vos collègues

Prenez un moment pour vous familiariser avec le code fourni dans le dossier ContosoPizza. Le projet est une application web ASP.NET Core créée à l’aide de la commande dotnet new webapp. Les modifications apportées par vos collègues sont décrites ci-dessous.

Conseil

Ne passez pas trop de temps à passer en revue ces modifications. Vos collègues ont déjà effectué le travail de création de la base de données et du service pour lire et écrire des pizzas dans la base de données, mais ils n’ont apporté aucune modification à l’interface utilisateur. Vous créerez une interface utilisateur qui utilise leur service dans l’unité suivante.

  • Un dossier Models a été ajouté au projet.
    • Ce dossier de modèles contient une classe Pizza qui représente une pizza.
  • Un dossier Data a été ajouté au projet.
    • Ce dossier de données contient une classe PizzaContext qui représente le contexte de base de données. Il hérite de la classe DbContext d’Entity Framework Core. Entity Framework Core est un mappeur relationnel d’objets (ORM) qui facilite l’utilisation des bases de données.
  • Un dossier Services a été ajouté au projet.
    • Ce dossier de services contient une classe PizzaService qui expose les méthodes utilisées pour lister et ajouter des pizzas.
    • La classe PizzaService utilise la classe PizzaContext pour lire et écrire des pizzas dans la base de données.
    • La classe est inscrite pour l’injection de dépendances dans Program.cs (ligne 10).

Entity Framework Core a également généré quelques éléments :

  • Un dossier Migrations a été créé.
    • Le dossier de migrations contient du code pour créer le schéma de base de données.
  • Le fichier de base de données SQLite ContosoPizza.db a été créé.
    • Si l’extension SQLite est installée (ou si vous utilisez GitHub Codespaces), vous pouvez ouvrir la base de données en cliquant avec le bouton droit sur le fichier et en sélectionnant Ouvrir la base de données. Le schéma de base de données s’affiche sous l’onglet Explorateur SQLite du volet Explorateur.

Passer en revue la structure du projet Razor Pages

Tout le reste du projet est inchangé par rapport au projet initialement créé. Le tableau suivant décrit la structure de projet qui a été générée par la commande dotnet new webapp.

Nom Description
Pages/ Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor a un fichier .cshtml et un fichier de classe .cshtml.cs appelé PageModel.
wwwroot/ Contient des fichiers de ressources statiques, comme HTML, JavaScript et CSS.
ContosoPizza.csproj Contient les métadonnées de configuration du projet, comme les dépendances.
Program.cs Sert de point d’entrée de l’application, et configure le comportement de l’application, notamment le routage.

Autres observations notables :

  • Fichiers de pages Razor et leur fichier de classe PageModel associé

    Les pages Razor sont stockées dans le répertoire Pages. Comme indiqué plus haut, chaque page Razor a un fichier .cshtml et un fichier de classe .cshtml.cs appelé PageModel. La classe PageModel permet la séparation de la logique et de la présentation d’une page Razor ; elle définit les gestionnaires de pages pour les requêtes et elle encapsule les propriétés des données et la logique étendue à sa page Razor.

  • Structure du répertoire Pages et requêtes de routage

    Razor Pages utilise la structure du répertoire Pages comme convention pour les requêtes de routage. Le tableau suivant montre le mappage des URL aux noms de fichier :

    URL Mappe vers la page Razor
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Les sous-dossiers du répertoire Pages sont utilisés pour organiser les pages Razor. Par exemple, en supposant l’existence d’un répertoire Pages/Products, les URL présenteraient cette structure :

    URL Mappe vers la page Razor
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Disposition et autres fichiers partagés

    Plusieurs fichiers sont partagés sur les différentes pages. Ces fichiers définissent les éléments de disposition communs et les importations de pages. Le tableau suivant décrit le rôle de chaque fichier.

    Fichier Description
    _ViewImports.cshtml Importe les espaces de noms et les classes qui sont utilisés sur plusieurs pages.
    _ViewStart.cshtml Spécifie la disposition par défaut pour toutes les pages Razor.
    Pages/Shared/_Layout.cshtml Il s’agit de la disposition spécifiée dans le fichier _ViewStart.cshtml. Implémente les éléments de disposition communs à plusieurs pages.
    Pages/Shared/_ValidationScriptsPartial.cshtml Fournit la fonctionnalité de validation sur toutes les pages.

Exécuter le projet pour la première fois

Vous allez exécuter le projet afin de le voir en action.

  1. Cliquez avec le bouton droit sur le dossier ContosoPizza dans l’Explorateur, puis sélectionnez Open in Integrated Terminal (Ouvrir dans le terminal intégré). Une fenêtre de terminal s’ouvre dans le contexte du dossier du projet.

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

    dotnet watch

    Cette commande :

    • Génère le projet.
    • Démarre l’application.
    • Recherche les modifications de fichiers et redémarre l’application quand une modification est détectée.

  3. L’IDE vous invite à ouvrir l’application dans un navigateur. Sélectionnez Ouvrir dans le navigateur.

    Conseil

    Vous pouvez également ouvrir l’application en recherchant l’URL dans la fenêtre du terminal. Maintenez la touche Ctrl enfoncée et cliquez sur l’URL pour l’ouvrir dans un navigateur.

  4. Comparez la page d’accueil rendue à Pages/Index.cshtml dans l’IDE :

    • Observez la combinaison du code HTML, de la syntaxe Razor et du code C# dans le fichier.
      • La syntaxe Razor est indiquée par les caractères @.
      • Le code C# est délimité par des blocs @{ }. Notez la présence de directives en haut du fichier :
      • La directive @page spécifie que ce fichier est une page Razor.
      • La directive @model spécifie le type de modèle de la page (dans ce cas, IndexModel, qui est défini dans Pages/Index.cshtml.cs).
    • Passez en revue le bloc de code C#.
      • Le code définit la valeur de l’élément Title dans le dictionnaire ViewData sur « Home page » (Page d’accueil).
      • Le dictionnaire ViewData est utilisé pour passer des données entre la page Razor et la classe IndexModel.
      • Au moment de l’exécution, la valeur Title est utilisée pour définir l’élément <title> de la page.

Laissez l’application s’exécuter dans la fenêtre du terminal. Nous en aurons besoin dans les prochaines unités. Laissez également l’onglet du navigateur ouvert, avec l’application Contoso Pizza en cours d’exécution. Vous allez apporter des modifications à l’application, et le navigateur s’actualisera automatiquement pour afficher ces modifications.

Personnaliser la page de destination

Vous allez apporter quelques modifications à la page de destination pour l’adapter à l’application de pizzas.

  1. Dans Pages/Index.cshtml, remplacez le code existant dans le bloc de code C# par ce code :

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Le code précédent :

    • Définit la valeur de l’élément Title dans le dictionnaire ViewData sur « The Home for Pizza Lovers ».
    • Calcule le temps écoulé depuis l’ouverture de l’entreprise.

  2. Modifiez le code HTML comme suit :

    • Remplacez l’élément <h1> par le code suivant :

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Remplacez l’élément <p> par le code suivant :

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Le code précédent :

    • Change le titre en « Welcome to Contoso Pizza ».
    • Affiche le nombre de jours écoulés depuis l’ouverture de l’entreprise.
      • Le caractère @ est utilisé pour passer du code HTML à la syntaxe Razor.
      • La méthode Convert.ToInt32 convertit la propriété TotalDays de la variable timeInBusiness en une valeur entière.
      • La classe Convert fait partie de l’espace de noms System, qui est importé automatiquement par l’élément <ImplicitUsings> dans le fichier ContosoPizza.csproj.

  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.

Important

Gardez un œil attentif sur la fenêtre de terminal avec dotnet watch chaque fois que vous enregistrez votre fichier. Il arrive parfois que le code comporte une modification non applicable. Cela signifie que le code que vous avez modifié ne peut pas être recompilé sans redémarrer l’application. Si vous êtes invité à redémarrer l’application, appuyez sur y (oui) ou a (toujours). Si tout le reste échoue, arrêtez l’application en appuyant deux fois sur Ctrl+C dans la fenêtre du terminal, puis redémarrez-la en réexécutant dotnet watch.

Vous avez apporté vos premières modifications à une page Razor. Dans la prochaine unité, vous allez ajouter une nouvelle page à l’application pour afficher une liste de pizzas.