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

Par Rick AndersonBy Rick Anderson

Ceci est le premier didacticiel d’une série.This is the first tutorial of a series. Cette série décrit les principes fondamentaux liés à la génération d’une application web de pages Razor dans ASP.NET Core.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Pour une introduction plus avancée destinée aux développeurs expérimentés, consultez Introduction à Razor Pages.For a more advanced introduction aimed at experienced developers, see Introduction to Razor Pages.

À la fin de la série, vous disposez d’une application qui gère une base de données de films.At the end of the series you'll have an app that manages a database of movies.

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

Dans ce didacticiel, vous allez effectuer les actions suivantes :In this tutorial, you:

  • Créer une application web Razor Pages.Create a Razor Pages web app.
  • Exécuter l’application.Run the app.
  • Examiner les fichiers projet.Examine the project files.

À la fin de ce didacticiel, vous disposez d’une application web Razor Pages fonctionnelle et générée dans les didacticiels suivants.At the end of this tutorial you'll have a working Razor Pages web app that you'll build on in later tutorials.

Page d’accueil ou page d’index

PrérequisPrerequisites

Créer une application web Pages RazorCreate a Razor Pages 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 et collez du code.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    Nouvelle application web ASP.NET Core

  • 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

Exécuter l'applicationRun the app

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

    Visual Studio affiche la boîte de dialogue suivante :Visual Studio displays the following dialog:

    Ce projet est configuré pour utiliser SSL.

    Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    La boîte de dialogue suivante s’affiche :The following dialog is displayed:

    Boîte de dialogue Avertissement de sécurité

    Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.Select Yes if you agree to trust the development certificate.

    Pour plus d’informations, consultez Approuver le certificat de développement HTTPS ASP.NET Core.See Trust the ASP.NET Core HTTPS development certificate for more information.

    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.

  • Sur la page d'accueil de l’application, sélectionnez Accepter pour accepter le suivi.On the app's home page, select Accept to consent to tracking.

    Cette application ne suit pas les informations personnelles, mais le modèle de projet inclut la fonctionnalité de consentement en cas de besoin pour vous conformer au Règlement général sur la protection des données (RGPD) de l’Union européenne.This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Page d’accueil ou page d’index

    L’illustration suivante montre l’application après avoir consenti au suivi :The following image shows the app after you give consent to tracking:

    Page d’accueil ou page d’index

Examiner les fichiers projetExamine the project files

Voici une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les didacticiels suivants.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Dossier PagesPages folder

Contient les pages Razor et les fichiers de prise en charge.Contains Razor pages and supporting files. Chaque page Razor est une paire de fichiers :Each Razor page is a pair of files:

  • Un fichier .cshtml qui contient le balisage HTML avec du code C# en utilisant la syntaxe Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Un fichier . cshtml.cs qui contient du code C# gérant les événements de page.A .cshtml.cs file that contains C# code that handles page events.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement.Supporting files have names that begin with an underscore. Par exemple, le fichier _Layout.cshtml configure les éléments d’interface communs à toutes les pages.For example, the _Layout.cshtml file configures UI elements common to all pages. Ce fichier définit le menu de navigation en haut de la page et la mention de copyright au bas de la page.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Pour plus d'informations, consultez Disposition dans ASP.NET Core.For more information, see Disposition dans ASP.NET Core.

Dossier racinewwwroot folder

Contient des fichiers statiques, tels que les fichiers HTML, JavaScript et CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Pour plus d'informations, consultez Fichiers statiques dans ASP.NET Core.For more information, see Fichiers statiques dans ASP.NET Core.

appSettings.jsonappSettings.json

Contient les données de configuration, comme les chaînes de connexion.Contains configuration data, such as connection strings. Pour plus d'informations, consultez Configuration dans ASP.NET Core.For more information, see Configuration dans ASP.NET Core.

Program.csProgram.cs

Contient le point d’entrée pour le programme.Contains the entry point for the program. Pour plus d'informations, consultez Hôte web ASP.NET Core.For more information, see Hôte web ASP.NET Core.

Startup.csStartup.cs

Contient le code qui configure le comportement de l’application, comme le fait qu’elle exige un consentement pour les cookies.Contains code that configures app behavior, such as whether it requires consent for cookies. Pour plus d'informations, consultez Démarrage d’une application dans ASP.NET Core.For more information, see Démarrage d’une application dans ASP.NET Core.

Ressources supplémentairesAdditional resources

Étapes suivantesNext steps

Dans ce didacticiel, vous avez effectué les actions suivantes :In this tutorial, you:

  • Créer une application web Razor Pages.Created a Razor Pages web app.
  • Exécuter l'application.Ran the app.
  • Examiner les fichiers projet.Examined the project files.

Passez au tutoriel suivant dans la série :Advance to the next tutorial in the series: