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

Note

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

Warning

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 10 de cet article.

Par Rick Anderson

Ce tutoriel est le premier d’une série qui enseigne les bases de la création d’une application web ASP.NET Core Razor Pages.

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 disposez d’une Razor application web Pages qui gère une base de données de films.

Home ou page Index.

Prerequisites

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 (Razor Pages)>Suivant.

  • Dans la boîte de dialogue Configurer votre nouveau projet, entrez RazorPagesMovie pour Nom du projet. Nommez le projet RazorPagesMovie, y compris la mise en majuscule, de sorte que les espaces de noms correspondent lorsque vous copiez et collez un exemple de code.

  • Cliquez sur Suivant.

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

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

  • Cliquez sur Créer.

    Boîte de dialogue Informations supplémentaires.

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

    Explorateur de solutions montrant la structure du projet RazorPagesMovie.

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 IIS Express SSL ?

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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

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 de l’application. <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 de projet que vous utilisez dans les didacticiels ultérieurs.

Dossier Pages

Contient Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

  • Un fichier .cshtml contenant un balisage HTML intégrant du code C# à l'aide de la syntaxe Razor.
  • Un fichier .cshtml.cs qui contient du code C# gérant les événements de page.

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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()
   .WithStaticAssets();

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. N’exécutez pas d’applications de production en mode développement, car la page d’exception du développeur peut fuiter des informations sensibles.

Le code suivant définit le point de terminaison d’exception /Error sur et active le protocole HTTP Strict Transport Security (HSTS) lorsque l’application ne s’exécute pas en mode de 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 mise en correspondance des routes au pipeline de middleware. 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 d’autorisation. Vous pouvez donc supprimer cette ligne.
  • app.MapRazorPages(); : Configure le routage des points de terminaison pour les pages Razor.
  • app.MapStaticAssets() : optimise la remise de ressources statiques dans une application, comme HTML, CSS, images et JavaScript. Pour plus d’informations, consultez Nouveautés de ASP.NET Core dans .NET 9.
  • .WithStaticAssets(); : garantit que Razor les pages participent au système d’optimisation des ressources statiques.
  • 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.

Home ou page d’index

Prerequisites

Créer une application web Razor Pages

  • Démarrez 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, y compris la mise en majuscules, afin que les espaces de noms correspondent lorsque vous copiez et collez un exemple de code.

  • Cliquez sur Suivant.

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

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

  • Cliquez sur 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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 /Error sur et active le protocole HTTP Strict Transport Security (HSTS) lorsque l’application ne s’exécute pas en mode de 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 mise en correspondance des routes au pipeline de middleware. 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 les pages Razor.
  • app.MapStaticAssets(); : Optimisez la distribution des ressources statiques dans une application, comme HTML, CSS, images, et JavaScript. Pour plus d’informations, consultez Nouveautés de ASP.NET Core dans .NET 9.
  • 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.

Home ou page d’index

Prerequisites

Créer une application web Razor Pages

  • Démarrez 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, y compris la mise en majuscules, afin que les espaces de noms correspondent lorsque vous copiez et collez un 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.

  • Cliquez sur 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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 /Error sur et active le protocole HTTP Strict Transport Security (HSTS) lorsque l’application ne s’exécute pas en mode de 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 Serve Static Files in ASP.NET Core Apps.
  • app.UseRouting(); : ajoute la mise en correspondance des routes au pipeline de middleware. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : Configure le routage des points de terminaison pour les pages Razor.
  • 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.

Home ou page d’index

Prerequisites

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, y compris la mise en majuscules, afin que les espaces de noms correspondent lorsque vous copiez et collez un exemple de code.

  • Cliquez sur Suivant.

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

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

  • Cliquez sur 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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 /Error sur et active le protocole HTTP Strict Transport Security (HSTS) lorsque l’application ne s’exécute pas en mode de 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 Serve Static Files in ASP.NET Core Apps.
  • app.UseRouting(); : ajoute la mise en correspondance des routes au pipeline de middleware. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : Configure le routage des points de terminaison pour les pages Razor.
  • 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 une 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.

Home ou page d’index

Prerequisites

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, y compris la mise en majuscules, afin que les espaces de noms correspondent lorsque vous copiez et collez un 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 s’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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 /Error sur et active le protocole HTTP Strict Transport Security (HSTS) lorsque l’application ne s’exécute pas en mode de 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 Serve Static Files in ASP.NET Core Apps.
  • app.UseRouting(); : ajoute la mise en correspondance des routes au pipeline de middleware. Pour plus d’informations, consultez Routage dans ASP.NET Core
  • app.MapRazorPages(); : Configure le routage des points de terminaison pour les pages Razor.
  • 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 une 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.

Home ou page d’index

Prerequisites

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, y compris la mise en majuscules, afin que les espaces de noms correspondent lorsque vous copiez et collez un exemple de code.

  4. Cliquez sur 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. Create.

    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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

    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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les ressources statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 Le démarrage 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 une application web Razor Pages.
  • Exécuter l’application.
  • Examiner les fichiers projet.

À la fin de ce tutoriel, vous aurez une application web Pages Razor fonctionnelle sur laquelle vous vous appuierez dans les tutoriels suivants.

Le Home ou la page d’index

Prerequisites

Créer une application web Razor Pages

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

  • Créez une application web principale ASP.NET, 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 afin que les espaces de noms correspondent lorsque 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 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 la manière de faire confiance au navigateur Firefox, consultez Erreur de certificat SEC_ERROR_INADEQUATE_KEY_USAGE dans Firefox.

    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 Razor pages et des fichiers associés. Chaque page Razor est une paire de fichiers :

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

Les fichiers de support portent des noms commençant par un caractère 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 wwwroot

Contient les fichiers statiques, comme les fichiers HTML, les fichiers JavaScript et les fichiers CSS. Pour plus d’informations, consultez Serve Static Files in ASP.NET Core Apps.

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 Le démarrage de l’application dans ASP.NET Core.

Étapes suivantes

Suivant : Ajouter un modèle

  • Last updated on