Partager via

Tutoriel : Bien démarrer avec Razor Pages dans ASP.NET Core

  • Article

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 9 de cet article.

Avertissement

Cette version d’ASP.NET Core n’est plus prise en charge. Pour plus d’informations, consultez la stratégie de support .NET et .NET Core. Pour la version actuelle, consultez la version .NET 9 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 9 de cet article.

Par Rick Anderson

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages. Pour une présentation vidéo, consultez Entity Framework Core pour les débutants.

Si vous débutez dans le développement ASP.NET Core et que vous ne savez pas quelle solution d’interface utilisateur web ASP.NET Core convient le mieux à vos besoins, consultez Choisir une interface utilisateur ASP.NET Core.

À la fin de ce tutoriel, vous disposerez d’une application web Razor Pages qui gère une base de données de films.

Page Home ou d’index

Prérequis

Créer une application web Razor Pages

  • Ouvrez Visual Studio et sélectionnez Nouveau projet.

  • Dans la boîte de dialogue Créer un projet, sélectionnez Application web ASP.NET Core (Razor Pages)>Suivant.

  • Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Il est important de nommer le projet RazorPagesMovie, en respectant la casse, pour que les espaces de noms correspondent quand vous copiez et collez l’exemple de code.

  • Cliquez sur Suivant.

  • Dans la boîte de dialogue Informations supplémentaires :

    • Sélectionnez .NET 9.0 (préversion).
    • Vérifiez que l’option ne pas utiliser les instructions de niveau supérieur est décochée.

  • Sélectionnez Créer.

    Informations supplémentaires

    Le projet de démarrage suivant est créé :

    Explorateur de solutions

Pour obtenir d’autres approches pour créer le projet, consultez Créer un projet dans Visual Studio.

Exécuter l'application

Sélectionnez RazorPagesMovie dans l’Explorateur de solutions, puis appuyez sur Ctrl+F5 pour exécuter l’application sans le débogueur.

Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

La boîte de dialogue suivante s’affiche :

Boîte de dialogue Avertissement de sécurité

Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio :

  • Exécute l’application, qui lance le serveur Kestrel.
  • Lance le navigateur par défaut sur https://localhost:<port>, qui affiche l’interface utilisateur des applications. <port> est le port aléatoire attribué lors de la création de l’application.

Fermez la fenêtre du navigateur.

Examiner les fichiers projet

Les sections suivantes contiennent une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les tutoriels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. _Layout.cshtml définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appsettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le code suivant :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorPages();

app.Run();

Les lignes de code suivantes dans ce fichier créent un WebApplicationBuilder avec des valeurs par défaut préconfigurées, ajoutent la prise en charge de Razor Pages au conteneur d’injection de dépendances (DI) et créent l’application :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

La page des exceptions de développeur est activée par défaut et fournit des informations utiles sur les exceptions. Les applications de production ne doivent pas être exécutées en mode développement, car la page des exceptions de développeur peut divulguer des informations sensibles.

Le code suivant définit le point de terminaison d’exception sur /Error et active le protocole HSTS (HTTP Strict Transport Security) lorsque l’application ne s’exécute pas en mode développement :

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Par exemple, le code précédent s’exécute lorsque l’application est en mode production ou test. Pour plus d’informations, consultez Utiliser plusieurs environnements dans ASP.NET Core.

Le code suivant active différents intergiciels :

  • app.UseHttpsRedirection(); : redirige les requêtes HTTP vers HTTPS.
  • app.UseRouting(); : ajoute la correspondance d’itinéraire au pipeline d’intergiciels. Pour plus d’informations, consultez Routage dans ASP.NET Core.
  • app.UseAuthorization(); : autorise un utilisateur à accéder à des ressources sécurisées. Cette application n’utilise pas l’autorisation. Par conséquent, cette ligne peut être supprimée.
  • app.MapRazorPages(); : configure le routage des points de terminaison pour Razor Pages.
  • app.MapStaticAssets(); : optimise la remise des ressources statiques dans une application, telle que HTML, CSS, images et JavaScript, à servir. Pour plus d’informations, consultez Nouveautés d’ASP.NET Core 9.0.
  • app.Run(); : exécute l’application.

Résolution des problèmes avec l’exemple terminé

Si vous rencontrez un problème que vous ne pouvez pas résoudre, comparez votre code au projet terminé. Afficher ou télécharger le projet terminé (comment télécharger).

Étapes suivantes

Suivant : Ajouter un modèle

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages. Pour une présentation vidéo, consultez Entity Framework Core pour les débutants.

Si vous débutez dans le développement ASP.NET Core et que vous ne savez pas quelle solution d’interface utilisateur web ASP.NET Core convient le mieux à vos besoins, consultez Choisir une interface utilisateur ASP.NET Core.

À la fin de ce tutoriel, vous disposerez d’une application web Razor Pages qui gère une base de données de films.

Page Home ou d’index

Prérequis

Créer une application web Razor Pages

  • Ouvrez Visual Studio et sélectionnez Nouveau projet.

  • Dans la boîte de dialogue Créer un projet, sélectionnez Application web ASP.NET Core (Razor Pages)>Suivant.

  • Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Il est important de nommer le projet RazorPagesMovie, en respectant la casse, pour que les espaces de noms correspondent quand vous copiez et collez l’exemple de code.

  • Cliquez sur Suivant.

  • Dans la boîte de dialogue Informations supplémentaires :

    • Sélectionnez .NET 8.0 (prise en charge à long terme).
    • Vérifiez que l’option ne pas utiliser les instructions de niveau supérieur est décochée.

  • Sélectionnez Créer.

    Informations supplémentaires

    Le projet de démarrage suivant est créé :

    Explorateur de solutions

Pour obtenir d’autres approches pour créer le projet, consultez Créer un projet dans Visual Studio.

Exécuter l'application

Sélectionnez RazorPagesMovie dans l’Explorateur de solutions, puis appuyez sur Ctrl+F5 pour exécuter l’application sans le débogueur.

Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

La boîte de dialogue suivante s’affiche :

Boîte de dialogue Avertissement de sécurité

Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio :

  • Exécute l’application, qui lance le serveur Kestrel.
  • Lance le navigateur par défaut sur https://localhost:<port>, qui affiche l’interface utilisateur des applications. <port> est le port aléatoire attribué lors de la création de l’application.

Fermez la fenêtre du navigateur.

Examiner les fichiers projet

Les sections suivantes contiennent une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les tutoriels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. _Layout.cshtml définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appsettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le code suivant :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Les lignes de code suivantes dans ce fichier créent un WebApplicationBuilder avec des valeurs par défaut préconfigurées, ajoutent la prise en charge de Razor Pages au conteneur d’injection de dépendances (DI) et créent l’application :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

La page des exceptions de développeur est activée par défaut et fournit des informations utiles sur les exceptions. Les applications de production ne doivent pas être exécutées en mode développement, car la page des exceptions de développeur peut divulguer des informations sensibles.

Le code suivant définit le point de terminaison d’exception sur /Error et active le protocole HSTS (HTTP Strict Transport Security) lorsque l’application ne s’exécute pas en mode développement :

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Par exemple, le code précédent s’exécute lorsque l’application est en mode production ou test. Pour plus d’informations, consultez Utiliser plusieurs environnements dans ASP.NET Core.

Le code suivant active différents intergiciels :

  • app.UseHttpsRedirection(); : redirige les requêtes HTTP vers HTTPS.
  • app.UseStaticFiles(); : permet de fournir des fichiers statiques, notamment HTML, CSS, images et JavaScript. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.
  • app.UseRouting(); : ajoute la correspondance d’itinéraire au pipeline d’intergiciels. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : configure le routage des points de terminaison pour Razor Pages.
  • app.UseAuthorization(); : autorise un utilisateur à accéder à des ressources sécurisées. Cette application n’utilise pas l’autorisation. Par conséquent, cette ligne peut être supprimée.
  • app.Run(); : exécute l’application.

Résolution des problèmes avec l’exemple terminé

Si vous rencontrez un problème que vous ne pouvez pas résoudre, comparez votre code au projet terminé. Afficher ou télécharger le projet terminé (comment télécharger).

Étapes suivantes

Suivant : Ajouter un modèle

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages. Pour une présentation vidéo, consultez Entity Framework Core pour les débutants.

Si vous débutez dans le développement ASP.NET Core et que vous ne savez pas quelle solution d’interface utilisateur web ASP.NET Core convient le mieux à vos besoins, consultez Choisir une interface utilisateur ASP.NET Core.

À la fin de ce tutoriel, vous disposerez d’une application web Razor Pages qui gère une base de données de films.

Page Home ou d’index

Prérequis

Créer une application web Razor Pages

  • Démarrez Visual Studio et sélectionnez Créer un projet.

  • Dans la boîte de dialogue Créer un projet, sélectionnez Application web ASP.NET Core>Suivant.

  • Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Il est important de nommer le projet RazorPagesMovie, en respectant la casse, pour que les espaces de noms correspondent quand vous copiez et collez l’exemple de code.

  • Cliquez sur Suivant.

  • Dans la boîte de dialogue Informations supplémentaires :

    • Sélectionnez .NET 7.0 (Prise en charge à terme Standard).
    • Vérifiez que l’option ne pas utiliser les instructions de niveau supérieur est décochée.

  • Sélectionnez Créer.

    Informations supplémentaires

    Le projet de démarrage suivant est créé :

    Explorateur de solutions

Pour obtenir d’autres approches pour créer le projet, consultez Créer un projet dans Visual Studio.

Exécuter l'application

Sélectionnez RazorPagesMovie dans l’Explorateur de solutions, puis appuyez sur Ctrl+F5 pour exécuter l’application sans le débogueur.

Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

La boîte de dialogue suivante s’affiche :

Boîte de dialogue Avertissement de sécurité

Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio :

  • Exécute l’application, qui lance le serveur Kestrel.
  • Lance le navigateur par défaut sur https://localhost:<port>, qui affiche l’interface utilisateur des applications. <port> est le port aléatoire attribué lors de la création de l’application.

Fermez la fenêtre du navigateur.

Examiner les fichiers projet

Les sections suivantes contiennent une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les tutoriels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. _Layout.cshtml définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appsettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le code suivant :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Les lignes de code suivantes dans ce fichier créent un WebApplicationBuilder avec des valeurs par défaut préconfigurées, ajoutent la prise en charge de Razor Pages au conteneur d’injection de dépendances (DI) et créent l’application :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

La page des exceptions de développeur est activée par défaut et fournit des informations utiles sur les exceptions. Les applications de production ne doivent pas être exécutées en mode développement, car la page des exceptions de développeur peut divulguer des informations sensibles.

Le code suivant définit le point de terminaison d’exception sur /Error et active le protocole HSTS (HTTP Strict Transport Security) lorsque l’application ne s’exécute pas en mode développement :

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Par exemple, le code précédent s’exécute lorsque l’application est en mode production ou test. Pour plus d’informations, consultez Utiliser plusieurs environnements dans ASP.NET Core.

Le code suivant active différents intergiciels :

  • app.UseHttpsRedirection(); : redirige les requêtes HTTP vers HTTPS.
  • app.UseStaticFiles(); : permet de fournir des fichiers statiques, notamment HTML, CSS, images et JavaScript. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.
  • app.UseRouting(); : ajoute la correspondance d’itinéraire au pipeline d’intergiciels. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : configure le routage des points de terminaison pour Razor Pages.
  • app.UseAuthorization(); : autorise un utilisateur à accéder à des ressources sécurisées. Cette application n’utilise pas l’autorisation. Par conséquent, cette ligne peut être supprimée.
  • app.Run(); : exécute l’application.

Résolution des problèmes avec l’exemple terminé

Si vous rencontrez un problème que vous ne pouvez pas résoudre, comparez votre code au projet terminé. Afficher ou télécharger le projet terminé (comment télécharger).

Étapes suivantes

Suivant : Ajouter un modèle

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages. Pour une présentation vidéo, consultez Entity Framework Core pour les débutants.

Si vous débutez dans le développement ASP.NET Core et que vous ne savez pas quelle solution d’interface utilisateur web ASP.NET Core convient le mieux à vos besoins, consultez Choisir une interface utilisateur ASP.NET Core.

À la fin de la série, vous disposez d’une application qui gère une base de données de films.

Dans ce didacticiel, vous avez effectué les actions suivantes :

  • Créer un projet d’application web Razor Pages.
  • Exécuter l’application.
  • Examiner les fichiers projet.

À la fin de ce tutoriel, vous disposez d’une application web Razor Pages fonctionnelle que vous allez améliorer dans les tutoriels suivants.

Page Home ou d’index

Prérequis

Créer une application web Razor Pages

  1. Démarrez Visual Studio 2022 et sélectionnez Créer un projet.

    Créer un nouveau projet à partir de la fenêtre de démarrage

  2. Dans la boîte de dialogue Créer un nouveau projet, sélectionnez ASP.NET Core Web App, puis Suivant.

    Créer une application web ASP.NET Core

  3. Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Il est important de nommer le projet RazorPagesMovie, en respectant la casse, pour que les espaces de noms correspondent quand vous copiez et collez l’exemple de code.

    Configurer votre nouveau projet

  4. Cliquez sur Suivant.

  5. Dans la boîte de dialogue Informations supplémentaires, sélectionnez .NET 6.0 (prise en charge à long terme), puis sélectionnez Créer.

    Informations supplémentaires

Le projet de démarrage suivant est créé :

Explorateur de solutions

Exécuter l’application

Sélectionnez RazorPagesMovie dans l’Explorateur de solutions, puis appuyez sur Ctrl+F5 pour l’exécuter sans le débogueur.

Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

La boîte de dialogue suivante s’affiche :

Boîte de dialogue Avertissement de sécurité

Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio :

  • Exécute l’application, qui lance le serveur Kestrel.
  • Lance le navigateur par défaut sur https://localhost:5001, qui affiche l’interface utilisateur des applications.

Examiner les fichiers projet

Les sections suivantes contiennent une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les tutoriels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. Ce fichier définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appsettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le code suivant :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Les lignes de code suivantes dans ce fichier créent un WebApplicationBuilder avec des valeurs par défaut préconfigurées, ajoutent la prise en charge de Razor Pages au conteneur d’injection de dépendances (DI) et créent l’application :

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

La page des exceptions de développeur est activée par défaut et fournit des informations utiles sur les exceptions. Les applications de production ne doivent pas être exécutées en mode développement, car la page des exceptions de développeur peut divulguer des informations sensibles.

Le code suivant définit le point de terminaison d’exception sur /Error et active le protocole HSTS (HTTP Strict Transport Security) lorsque l’application ne s’exécute pas en mode développement :

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Par exemple, le code précédent s’exécute lorsque l’application est en mode production ou test. Pour plus d’informations, consultez Utiliser plusieurs environnements dans ASP.NET Core.

Le code suivant active différents intergiciels :

  • app.UseHttpsRedirection(); : redirige les requêtes HTTP vers HTTPS.
  • app.UseStaticFiles(); : permet de fournir des fichiers statiques, notamment HTML, CSS, images et JavaScript. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.
  • app.UseRouting(); : ajoute la correspondance d’itinéraire au pipeline d’intergiciels. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : configure le routage des points de terminaison pour Razor Pages.
  • app.UseAuthorization(); : autorise un utilisateur à accéder à des ressources sécurisées. Cette application n’utilise pas l’autorisation. Par conséquent, cette ligne peut être supprimée.
  • app.Run(); : exécute l’application.

Résolution des problèmes avec l’exemple terminé

Si vous rencontrez un problème que vous ne pouvez pas résoudre, comparez votre code au projet terminé. Afficher ou télécharger le projet terminé (comment télécharger).

Étapes suivantes

Suivant : Ajouter un modèle

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages.

Si vous débutez dans le développement ASP.NET Core et que vous ne savez pas quelle solution d’interface utilisateur web ASP.NET Core convient le mieux à vos besoins, consultez Choisir une interface utilisateur ASP.NET Core.

À la fin de la série, vous disposez d’une application qui gère une base de données de films.

Dans ce didacticiel, vous avez effectué les actions suivantes :

  • Créer un projet d’application web Razor Pages.
  • Exécuter l’application.
  • Examiner les fichiers projet.

À la fin de ce tutoriel, vous disposez d’une application web Razor Pages fonctionnelle que vous allez améliorer dans les tutoriels suivants.

Page Home ou d’index

Prérequis

Créer une application web Razor Pages

  1. Démarrez Visual Studio et sélectionnez Créer un projet. Pour plus d’informations, consultez Créer un projet dans Visual Studio.

    Créer un nouveau projet à partir de la fenêtre de démarrage

  2. Dans la boîte de dialogue Créer un projet, sélectionnez Application web ASP.NET Core, puis Suivant.

    Créer une application web ASP.NET Core

  3. Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Il est important de nommer le projet RazorPagesMovie, en respectant la casse, pour que les espaces de noms correspondent quand vous copiez et collez l’exemple de code.

  4. Sélectionnez Créer.

    Configurer le projet

  5. Dans la boîte de dialogue Créer une nouvelle application web ASP.NET Core, sélectionnez :

    1. .NET Core et ASP.NET Core 5.0 dans les listes déroulantes.
    2. Application web.
    3. Création.

    Sélectionner l’application web ASP.NET Core

Le projet de démarrage suivant est créé :

Explorateur de solutions

Exécuter l’application

  • Appuyez sur Ctrl+F5 pour exécuter sans le débogueur.

    Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

    Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

    Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

    La boîte de dialogue suivante s’affiche :

    Boîte de dialogue Avertissement de sécurité

    Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

    Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

    Visual Studio démarre IIS Express et exécute l’application. La barre d’adresses affiche localhost:port# au lieu de quelque chose qui ressemble à example.com. La raison en est que localhost est le nom d’hôte standard de l’ordinateur local. Localhost traite uniquement les requêtes web de l’ordinateur local. Quand Visual Studio crée un projet web, un port aléatoire est utilisé pour le serveur web.

Examiner les fichiers projet

Voici une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les didacticiels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. Ce fichier définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appsettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le point d’entrée de l’application. Pour plus d’informations, consultez Hôte générique .NET dans ASP.NET Core.

Startup.cs

contient le code qui configure le comportement de l’application. Pour plus d’informations, consultez Start-up de l’application dans ASP.NET Core.

Résolution des problèmes avec l’exemple terminé

Si vous rencontrez un problème que vous ne pouvez pas résoudre, comparez votre code au projet terminé. Afficher ou télécharger le projet terminé (comment télécharger).

Étapes suivantes

Suivant : Ajouter un modèle

C’est le premier d’une série de tutoriels, qui décrit les principes fondamentaux liés à la génération d’une application web de Razor Pages dans ASP.NET Core.

Pour obtenir une présentation plus avancée destinée aux développeurs qui connaissent bien les contrôleurs et les vues, consultez Présentation de Razor Pages.

À la fin de la série, vous disposez d’une application qui gère une base de données de films.

Affichez ou téléchargez un exemple de code (procédure de téléchargement).

Dans ce didacticiel, vous avez effectué les actions suivantes :

  • Créer un projet d’application web Razor Pages.
  • Exécuter l’application.
  • Examiner les fichiers projet.

À la fin de ce tutoriel, vous disposez d’une application web Razor Pages fonctionnelle et générée dans les tutoriels suivants.

Le Home ou la page d’index

Prérequis

Créer une application web Razor Pages

  • Dans Visual Studio, dans le menu Fichier, sélectionnez Nouveau>Projet.

  • Créez une application web ASP.NET Core, puis sélectionnez Suivant. Créer le projet à partir de la fenêtre de démarrage

  • Nommez le projet RazorPagesMovie. Il est important de nommer le projet RazorPagesMovie pour que les espaces de noms correspondent quand vous copiez et collez du code. Attribuez un nom au projet

  • Sélectionnez ASP.NET Core 3.1 dans la liste déroulante, sélectionnez Application web, puis Créer.

Sélectionnez Nouvelle application web ASP.NET Core

Le projet de démarrage suivant est créé :

Explorateur de solutions

Exécuter l’application

  • Appuyez sur Ctrl+F5 pour exécuter sans le débogueur.

    Visual Studio affiche la boîte de dialogue suivante lorsqu’un projet n’est pas encore configuré pour utiliser SSL :

    Ce projet est configuré pour utiliser SSL. Pour éviter les avertissements SSL dans le navigateur, vous pouvez choisir d’approuver le certificat auto-signé généré par IIS Express. Voulez-vous approuver le certificat SSL d’IIS Express ?

    Sélectionnez Oui si vous faites confiance au certificat SSL d’IIS Express.

    La boîte de dialogue suivante s’affiche :

    Boîte de dialogue Avertissement de sécurité

    Sélectionnez Oui si vous acceptez d’approuver le certificat de développement.

    Pour plus d’informations sur l’approbation du navigateur Firefox, consultez Erreur de certificat Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

    Visual Studio démarre IIS Express et exécute l’application. La barre d’adresses affiche localhost:port# au lieu de quelque chose qui ressemble à example.com. La raison en est que localhost est le nom d’hôte standard de l’ordinateur local. Localhost traite uniquement les requêtes web de l’ordinateur local. Quand Visual Studio crée un projet web, un port aléatoire est utilisé pour le serveur web.

Examiner les fichiers projet

Voici une vue d’ensemble des principaux dossiers et fichiers projet que vous allez utiliser dans les didacticiels suivants.

Dossier Pages

Contient les pages Razor et les fichiers de prise en charge. Chaque page Razor est une paire de fichiers :

  • Fichier .cshtml qui a un balisage HTML avec du code C# avec la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de prise en charge ont des noms commençant par un trait de soulignement. Par exemple, le fichier _Layout.cshtml configure des éléments d’interface utilisateur communs à toutes les pages. Ce fichier définit le menu de navigation en haut de la page et la mention de copyright au bas de la page. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

Dossier racine

Contient les fichiers statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

appSettings.json

Contient les données de configuration, comme les chaînes de connexion. Pour plus d’informations, consultez Configuration dans ASP.NET Core.

Program.cs

Contient le point d’entrée pour le programme. Pour plus d’informations, consultez Hôte générique .NET dans ASP.NET Core.

Startup.cs

contient le code qui configure le comportement de l’application. Pour plus d’informations, consultez Start-up de l’application dans ASP.NET Core.

Étapes suivantes

Suivant : Ajouter un modèle