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

Nous vous recommandons de suivre la version ASP.NET Core 2.1 de ce tutoriel.We recommend you follow the ASP.NET Core 2.1 version of this tutorial. Elle est beaucoup plus facile à suivre et couvre plus de fonctionnalités.It's much easier to follow and covers more features. Sélectionnez ASP.NET Core 2.1 dans le sélecteur de version.Select ASP.NET Core 2.1 in the version selector.

Sélecteur de version dans la table des matières

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’utilisation de pages Razor est la méthode recommandée pour générer l’interface utilisateur d’applications web dans ASP.NET Core.Razor Pages is the recommended way to build UI for web apps in ASP.NET Core.

Il existe trois versions de ce didacticiel :There are three versions of this tutorial:

Affichez ou téléchargez l’exemple de code (procédure de téléchargement)View or download sample code (how to download)

PrérequisPrerequisites

Visual Studio 2017 version 15.7.3 ou ultérieure avec les charges de travail suivantes :Visual Studio 2017 version 15.7.3 or later with the following workloads:

  • Développement web et ASP.NETASP.NET and web development
  • Développement multiplateforme .NET Core.NET Core cross-platform development

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.1 dans la liste déroulante, puis sélectionnez Application web.Select ASP.NET Core 2.1 in the dropdown, and then select Web Application.

Nouvelle application web ASP.NET Core

Le modèle Visual Studio crée un projet de démarrage :The Visual Studio template creates a starter project:

Explorateur de solutions

Appuyez sur F5 pour exécuter l’application en mode débogage ou sur Ctrl+F5 pour l’exécuter sans attachement du débogueur.Press F5 to run the app in debug mode or Ctrl-F5 to run without attaching the debugger. 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

  • 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. En effet, localhost est le nom d’hôte standard de votre ordinateur local.That's because localhost is the standard hostname for your 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 lancer rapidement l’application et afficher les changements.Many developers prefer to use non-debug mode to quickly launch the app and view changes.

Le modèle par défaut crée des liens et des pages RazorPagesMovie, Home, About et Contact.The default template creates RazorPagesMovie, Home, About and Contact links and pages. En fonction de la taille de votre fenêtre de navigateur, vous devrez peut-être cliquer sur l’icône de navigation pour afficher les liens.Depending on the size of your browser window, you might need to click the navigation icon to show the links.

Page d’accueil ou d’index

Testez les liens.Test the links. Les liens RazorPagesMovie et Home permettent d’accéder à la page d’index.The RazorPagesMovie and Home links go to the Index page. Les liens About et Contact permettent d’accéder respectivement aux pages About et Contact.The About and Contact links go to the About and Contact pages, respectively.

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. Pour ce didacticiel, le fichier Startup.cs est le plus important à comprendre.For this 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 ressources statiques.Contains static assets. Consultez Fichiers statiques.See Static files.
PagesPages Dossier pour Pages Razor.Folder for Razor Pages.
appsettings.jsonappsettings.json ConfigurationConfiguration
Program.csProgram.cs Configure l’hôte de l’application ASP.NET Core.Configures the host of 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.

Dossier Pages/SharedThe Pages/Shared folder

Le fichier _Layout.cshtml contient des éléments HTML communs (liens de script et feuille de style) et définit la disposition de l’application.The _Layout.cshtml file contains common HTML elements (script and stylesheet links) and sets the layout for the app. Par exemple, quand vous sélectionnez RazorPagesMovie, Home, About ou Contact, un ensemble commun d’éléments s’affiche dans la page web.For example when you select RazorPagesMovie, Home, About or Contact, a common set of elements appears in the webpage. Les éléments communs sont notamment le menu de navigation en haut et l’en-tête en bas de la fenêtre.The common elements include the navigation menu at the top and the header at the bottom of the window. Pour plus d’informations, consultez Disposition.For more information, see Layout.

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 nous ajoutons les pages Create et Edit 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 is used.

Le fichier _CookieConsentPartial.cshtml fournit une barre de navigation et du contenu pour récapituler la politique de confidentialité et d’utilisation des cookies.The _CookieConsentPartial.cshtml file provides a navigation bar and content to summarize the privacy and cookie use policy. Pour plus d’informations sur les ressources RGPD incluses dans le projet, consultez Prise en charge du règlement général sur la protection des données (RGPD) dans ASP.NET Core.For more information on the GDPR assets included in the project, see EU General Data Protection Regulation (GDPR) support in ASP.NET Core).

Le dossier PagesThe Pages folder

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 _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.

Les pages About, Contact et Index sont des pages de base que vous pouvez utiliser pour démarrer une application.The About, Contact and Index pages are basic pages you can use to start an app. La page Error sert à afficher des informations d’erreur.The Error page is used to display error information.

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

Pour activer le basculement F7 entre une page Razor Pages (fichier *.cshtml) et le fichier C# (*.cshtml.cs) :To enable F7 toggling between a Razor Page (*.cshtml file) and the C# file (*.cshtml.cs):

  • Sélectionnez Outils > Options > Environnement > ClavierSelect Tools > Options > Environment > Keyboard
  • Entrez ToggleRazorView dans Afficher les commandes contenant.Enter ToggleRazorView in Show commands containing.
  • Sélectionnez EditorContextMenus.CodeWindow.ToggleRazorViewSelect EditorContextMenus.CodeWindow.ToggleRazorView
  • Dans la zone d’entrée Appuyer sur les touches de raccourci, appuyez sur F7.In the Press shortcut keys entry box, press F7.
  • Sélectionnez Assigner > OKSelect Assign > OK

didacticielstutorials

PrérequisPrerequisites

Visual Studio 2017 version 15.7.3 ou ultérieure avec les charges de travail suivantes :Visual Studio 2017 version 15.7.3 or later with the following workloads:

  • Développement web et ASP.NETASP.NET and web development
  • Développement multiplateforme .NET Core.NET Core cross-platform development

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.0 dans la liste déroulante, puis sélectionnez Application web.Select ASP.NET Core 2.0 in the dropdown, and then select Web Application.

    Note

    Pour utiliser ASP.NET Core avec le .NET Framework, vous devez d’abord sélectionner .NET Framework dans la liste déroulante la plus à gauche dans la boîte de dialogue, puis la version d’ASP.NET Core souhaitée.To use ASP.NET Core with .NET Framework, you must first select .NET Framework from the leftmost drop-down in the dialog, then you can select the desired ASP.NET Core version.

    Application web (pages Razor)

Le modèle Visual Studio crée un projet de démarrage :The Visual Studio template creates a starter project:

Explorateur de solutions

Appuyez sur F5 pour exécuter l’application en mode débogage ou sur Ctrl+F5 pour l’exécuter sans attachement du débogueurPress F5 to run the app in debug mode or Ctrl-F5 to run without attaching the debugger

Page d’accueil ou page d’index

  • Visual Studio démarre IIS Express et exécute votre application.Visual Studio starts IIS Express and runs your 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. En effet, localhost est le nom d’hôte standard de votre ordinateur local.That's because localhost is the standard hostname for your 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 5 000.In the preceding image, the port number is 5000. 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 lancer rapidement l’application et afficher les changements.Many developers prefer to use non-debug mode to quickly launch the app and view changes.

Le modèle par défaut crée des liens et des pages RazorPagesMovie, Home, About et Contact.The default template creates RazorPagesMovie, Home, About and Contact links and pages. En fonction de la taille de votre fenêtre de navigateur, vous devrez peut-être cliquer sur l’icône de navigation pour afficher les liens.Depending on the size of your browser window, you might need to click the navigation icon to show the links.

Page d’accueil ou d’index

Testez les liens.Test the links. Les liens RazorPagesMovie et Home permettent d’accéder à la page d’index.The RazorPagesMovie and Home links go to the Index page. Les liens About et Contact permettent d’accéder respectivement aux pages About et Contact.The About and Contact links go to the About and Contact pages, respectively.

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. Pour ce didacticiel, le fichier Startup.cs est le plus important à comprendre.For this 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, About ou Contact, les mêmes éléments apparaissent.For example, when you click on RazorPagesMovie, Home, About or Contact, 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 nous ajouterons des pages Create et Edit plus loin dans ce didacticiel, le fichier _ValidationScriptsPartial.cshtml sera utilisé.When we add Create and Edit pages later in the tutorial, the _ValidationScriptsPartial.cshtml file will be used.

Les pages About, Contact et Index sont des pages de base que vous pouvez utiliser pour démarrer une application.The About, Contact and Index pages are basic pages you can use to start an app. La page Error sert à afficher des informations d’erreur.The Error page is used to display error information. La page Privacy vous permet de spécifier plus d’informations sur la politique de confidentialité de votre site.The Privacy page allows you to specify details about your site's privacy policy.