Tutoriel : Bien démarrer avec Razor Pages dans ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Par Rick AndersonBy Rick Anderson

Ce didacticiel décrit les principes fondamentaux liés à la génération d’une application web de pages Razor dans ASP.NET Core.This tutorial teaches the basics of building an ASP.NET Core Razor Pages web app.

L’application gère une base de données de titres de films.The app manages a database of movie titles. Vous apprenez à :You learn how to:

  • Créer une application web Razor Pages.Create a Razor Pages web app.
  • Ajouter et structurer un modèle.Add and scaffold a model.
  • Utiliser une base de données.Work with a database.
  • Ajouter une fonctionnalité de recherche et de validation.Add search and validation.

À la fin, vous obtenez une application qui peut gérer et afficher des éléments de titres de films.At the end, you have an app that can manage and display movie titles items.

View or download sample code (how to download).

PrérequisPrerequisites

PrérequisPrerequisites

Créer une application web RazorCreate a Razor web app

  • Dans Visual Studio, dans le menu Fichier, sélectionnez Nouveau > Projet.From the Visual Studio File menu, select New > Project.

  • Créez une application web ASP.NET Core.Create a new ASP.NET Core Web Application. Nommez le projet RazorPagesMovie.Name the project RazorPagesMovie. Il est important de nommer le projet RazorPagesMovie pour que les espaces de noms correspondent quand vous copiez/collez du code.It's important to name the project RazorPagesMovie so the namespaces will match when you copy/paste code. Nouvelle application web ASP.NET Corenew ASP.NET Core Web Application

  • Sélectionnez ASP.NET Core 2.2 dans la liste déroulante, puis sélectionnez Application web.Select ASP.NET Core 2.2 in the dropdown, and then select Web Application.

    Nouvelle application web ASP.NET Core

    Le projet de démarrage suivant est créé :The following starter project is created:

    Explorateur de solutions

  • Appuyez sur Ctrl+F5 pour exécuter sans le débogueur.Press Ctrl-F5 to run without the debugger.

    Visual Studio démarre IIS Express et exécute l’application.Visual Studio starts IIS Express and runs the app. La barre d’adresses affiche localhost:port# au lieu de quelque chose qui ressemble à example.com.The address bar shows localhost:port# and not something like example.com. La raison en est que localhost est le nom d’hôte standard de l’ordinateur local.That's because localhost is the standard hostname for the local computer. Localhost traite uniquement les requêtes web de l’ordinateur local.Localhost only serves web requests from the local computer. Quand Visual Studio crée un projet web, un port aléatoire est utilisé pour le serveur web.When Visual Studio creates a web project, a random port is used for the web server. Dans l’image précédente, le numéro de port est 5001.In the preceding image, the port number is 5001. Quand vous exécutez l’application, vous voyez un autre numéro de port.When you run the app, you'll see a different port number.

    Si vous lancez l’application avec Ctrl+F5 (mode sans débogage), vous pouvez effectuer des modifications du code, enregistrer le fichier, actualiser le navigateur et afficher les modifications du code.Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. De nombreux développeurs préfèrent utiliser le mode sans débogage pour actualiser les modifications des pages et des vues.Many developers prefer to use non-debug mode to refresh the page and view changes.

  • Sélectionnez Accepter pour accepter le suivi.Select Accept to consent to tracking. Cette application n’effectue pas le suivi d’informations personnelles.This app doesn't track personal information. Le code généré par le modèle inclut des ressources qui aident à satisfaire au Règlement général sur la protection des données (RGPD).The template generated code includes assets to help meet General Data Protection Regulation (GDPR).

    Page d’accueil ou page d’index

    L’illustration suivante montre l’application une fois le suivi accepté :The following image shows the app after accepting tracking:

    Page d’accueil ou page d’index

Dossiers et fichiers projetProject files and folders

Le tableau suivant répertorie les fichiers et dossiers du projet.The following table lists the files and folders in the project. À ce stade du tutoriel, le plus important est de comprendre le fichier Startup.cs.At this point in the tutorial, the Startup.cs file is the most important to understand. Vous n’avez pas besoin de passer en revue chaque lien ci-dessous.You don't need to review each link provided below. Les liens sont fournis en guise de référence quand vous avez besoin d’informations supplémentaires sur un fichier ou un dossier du projet.The links are provided as a reference when you need more information on a file or folder in the project.

Fichier ou dossierFile or folder ObjectifPurpose
wwwrootwwwroot Contient des fichiers statiques.Contains static files. Consultez Fichiers statiques.See Static files.
PagesPages Dossier pour Pages Razor.Folder for Razor Pages.
appsettings.jsonappsettings.json ConfigurationConfiguration
Program.csProgram.cs Héberge l’application ASP.NET Core.Hosts the ASP.NET Core app.
Startup.csStartup.cs Configure les services et le pipeline de requête.Configures services and the request pipeline. Voir Démarrage.See Startup.

Le dossier PagesThe Pages folder

Le fichier _Layout.cshtml contient des éléments HTML communs (scripts et feuilles de style) et définit la disposition de l’application.The _Layout.cshtml file contains common HTML elements (scripts and stylesheets) and sets the layout for the application. Par exemple, quand vous cliquez sur RazorPagesMovie, Home ou Privacy, les mêmes éléments apparaissent.For example, when you click on RazorPagesMovie, Home, or Privacy, you see the same elements. Les éléments communs incluent le menu de navigation en haut et l’en-tête en bas de la fenêtre.The common elements include the navigation menu on the top and the header on the bottom of the window. Pour plus d’informations, consultez Disposition.See Layout for more information.

Le fichier _ViewImports.cshtml contient des directives Razor qui sont importées dans chaque page Razor.The _ViewImports.cshtml file contains Razor directives that are imported into each Razor Page. Pour plus d’informations, consultez Importation de directives partagées.See Importing Shared Directives for more information.

Le fichier _ViewStart.cshtml définit la propriété Layout des pages Razor pour qu’elle utilise le fichier _Layout.cshtml.The _ViewStart.cshtml sets the Razor Pages Layout property to use the _Layout.cshtml file. Pour plus d’informations, consultez Disposition.See Layout for more information.

Le fichier _ValidationScriptsPartial.cshtml fournit une référence aux scripts de validation jQuery.The _ValidationScriptsPartial.cshtml file provides a reference to jQuery validation scripts. Quand les pages Create et Edit sont ajoutées plus loin dans ce tutoriel, le fichier _ValidationScriptsPartial.cshtml est utilisé.When the Create and Edit pages are added later in the tutorial, the _ValidationScriptsPartial.cshtml file will be used.

Les pages Index, Error et Privacy sont fournies pour :Index, Error, and Privacy pages are provided to:

  • Index : démarrer une application.Index: Start an app.
  • Error : afficher des informations d’erreur.Error: Display error information.
  • Privacy : spécifier des informations sur la politique de confidentialité du site.Privacy: Specify details about the site's privacy policy.

Dans ce tutoriel, les pages précédentes ne sont pas utilisées.For this tutorial, the preceding pages are not used.

Utilisez la touche F7 pour basculer entre une page Razor Pages et le modèle de pageUse F7 to toggle between a Razor Page and the PageModel

F7 permet de basculer entre une page Razor Pages (fichier *.cshtml) et le fichier C# (*.cshtml.cs).F7 toggles between a Razor Page (*.cshtml file) and the C# file (*.cshtml.cs).