Bien démarrer avec des pages Razor dans ASP.NET CoreGet 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’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 for Windows.
Select the ASP.NET and web development workload.

.Net Core 2.1 SDK

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.

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

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.