Partie 2, ajouter un modèle à une application de pages Razor dans ASP.NET Core

Dans ce tutoriel, des classes sont ajoutées pour la gestion des films dans une base de données. Les classes de modèle de l’application utilisent Entity Framework Core (EF Core) pour travailler avec la base de données. EF Core est un mappeur relationnel d’objets (O/RM) qui simplifie l’accès aux données. Vous écrivez d’abord les classes du modèle, puis EF Core crée la base de données.

Les classes de modèle portent le nom de classes OCT (« Objet CLR Traditionnel »), car elles n’ont pas de dépendances envers EF Core. Elles définissent les propriétés des données stockées dans la base de données.

Ajouter un modèle de données

Visual Studio

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet RazorPagesMovie>Ajouter>Nouveau dossier. Nommez le dossier Models.

2. Cliquez avec le bouton droit sur le dossier Models. Sélectionnez Ajouter>Classe. Nommez la classe Movie.

3. Ajoutez les propriétés suivantes à la classe Movie :

   using System.ComponentModel.DataAnnotations;
   
   namespace RazorPagesMovie.Models;
   
   public class Movie
   {
       public int Id { get; set; }
       public string? Title { get; set; }
       [DataType(DataType.Date)]
       public DateTime ReleaseDate { get; set; }
       public string? Genre { get; set; }
       public decimal Price { get; set; }
   }
   

La classe Movie contient :

• Le champ ID est nécessaire à la base de données pour la clé primaire.

• Attribut [DataType] qui spécifie le type de données dans la propriété ReleaseDate. Avec cet attribut :

  • L’utilisateur n’est pas obligé d’entrer les informations de temps dans le champ de date.
  • Seule la date est affichée, pas les informations de temps.

• La présence du point d’interrogation après string indique que la propriété peut accepter les valeurs Null. Pour plus d’informations, consultez Types référence pouvant accepter la valeur Null.

Les DataAnnotations sont traitées dans un prochain didacticiel.

Générez le projet pour vérifier qu’il n’y a pas d’erreur de compilation.

Visual Studio Code

1. Ajoutez un dossier nommé Models.
2. Ajoutez une classe au dossier Models nommé Movie.cs.

Ajoutez les propriétés suivantes à la classe Movie :

using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

La classe Movie contient :

• Champ ID permettant de fournir une clé primaire pour la base de données.

• Attribut [DataType] pour spécifier le type de données dans le champ ReleaseDate. Avec cet attribut :

  • L’utilisateur n’est pas obligé d’entrer les informations de temps dans le champ de date.
  • Seule la date est affichée, pas les informations de temps.

• La présence du point d’interrogation après string indique que la propriété peut accepter les valeurs Null. Pour plus d’informations, consultez Types référence pouvant accepter la valeur Null.

Les DataAnnotations sont traitées dans un prochain didacticiel.

Ajouter des packages NuGet des outils EF

Exécutez les commandes CLI .NET suivantes :

dotnet tool uninstall --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool uninstall --global dotnet-ef
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design --prerelease
dotnet add package Microsoft.EntityFrameworkCore.SQLite --prerelease
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --prerelease
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --prerelease
dotnet add package Microsoft.EntityFrameworkCore.Tools --prerelease

Les commandes précédentes ajoutent :

• Outils de l’interface de ligne de commande (CLI) pour EF Core
• Outil de génération de modèles automatique aspnet-codegenerator.
• Outils de temps de conception pour EF Core
• Le fournisseur EF Core SQLite, qui installe le package EF Core comme une dépendance.
• Les packages nécessaires à la génération de modèles automatique : Microsoft.VisualStudio.Web.CodeGeneration.Design et Microsoft.EntityFrameworkCore.SqlServer.

Pour obtenir de l’aide sur la configuration de plusieurs environnements qui permet à une application de configurer ses contextes de base de données par environnement, consultez Utiliser plusieurs environnements dans ASP.NET Core.

Remarque

Par défaut, l’architecture des fichiers binaires .NET à installer représente l’architecture du système d’exploitation en cours d’exécution. Pour spécifier une architecture de système d’exploitation différente, consultez dotnet tool install, --arch option. Pour plus d'informations, consultez le problème GitHub dotnet/AspNetCore.Docs n° 29262.

Dans Visual Studio Code, appuyez sur Ctrl+F5 (Windows) ou ⌘+F5 (macOS) pour exécuter l’application sans débogage.

Dans le panneau situé sous la région de l’éditeur, sélectionnez l’onglet PROBLÈMES ou, dans le menu Affichage, sélectionnez Problèmes s’il n’est pas actuellement affiché. Vérifiez qu’il n’y a pas d’erreur de compilation.

Générer automatiquement le modèle de film

Dans cette section, le modèle de film est généré automatiquement. Autrement dit, l’outil de génération de modèles automatique génère des pages pour les opérations de création, de lecture, de mise à jour et de suppression (CRUD) pour le modèle de film.

Visual Studio

1. Créez le dossier Pages/Movies :

   1. Cliquez avec le bouton droit sur le dossier Pages >Ajouter>Nouveau dossier.
   2. Nommez le dossier Movies.

2. Cliquez avec le bouton droit sur le dossier Pages/Movies >Ajouter>Nouvel élément généré automatiquement.

   

3. Dans la boîte de dialogue Ajouter un nouveau modèle automatique, sélectionnez Pages Razor utilisant Entity Framework (CRUD)>Ajouter.

   

4. Renseignez la boîte de dialogue Ajouter des pages Razor avec Entity Framework (CRUD) :

   1. Dans la liste déroulante Classe de modèle, sélectionnez Film (RazorPagesMovie.Models).
   2. Dans la ligne Classe du contexte de données, sélectionnez le signe + (plus).
      1. Dans la boîte de dialogue Ajouter un contexte de données, le nom de la classe RazorPagesMovie.Data.RazorPagesMovieContext est généré.
      2. Dans la liste déroulante Fournisseur de base de données, sélectionnez SQL Server.
   3. Sélectionnez Ajouter.

   

Le fichier appsettings.json est mis à jour avec la chaîne de connexion utilisée pour se connecter à une base de données locale.

Visual Studio Code

• Ouvrez un interpréteur de commandes dans le répertoire du projet, qui contient les fichiers Program.cs et .csproj. Exécutez la commande suivante :

  dotnet aspnet-codegenerator razorpage -m Movie -dc RazorPagesMovie.Data.RazorPagesMovieContext -udl -outDir Pages/Movies --referenceScriptLibraries --databaseProvider sqlite
  

Le tableau suivant détaille les paramètres du générateur de code ASP.NET Core.

Option	Description
-m	Nom du modèle.
-dc	Classe DbContext à utiliser incluant l’espace de noms.
-udl	Utiliser la disposition par défaut.
-outDir	Chemin du dossier de sortie relatif pour créer les vues.
--referenceScriptLibraries	Ajoute _ValidationScriptsPartial aux pages Modifier et Créer.

Utilisez l’option -h pour obtenir de l’aide sur la commande dotnet aspnet-codegenerator razorpage :

dotnet aspnet-codegenerator razorpage -h

Pour plus d’informations, consultez dotnet aspnet-codegenerator.

Utiliser SQLite pour le développement, SQL Server pour la production

Lorsque SQLite est sélectionné, le code généré par le modèle est prêt pour le développement. Le code suivant montre comment sélectionner la chaîne de connexion SQLite dans le développement et SQL Server dans la production.

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));
}
else
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMovieContext")));
}

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Le code précédent n’appelle pas UseDeveloperExceptionPage dans le développement, car WebApplication appelle UseDeveloperExceptionPage en mode développement.

Avertissement

Cet article utilise une base de données locale qui ne nécessite pas l’authentification des utilisateurs. Les applications de production doivent utiliser le flux d’authentification le plus sécurisé disponible. Pour plus d’informations sur l’authentification pour les applications de test et de production déployées, consultez Flux d’authentification sécurisés.

Fichiers créés et mis à jour

Le processus de génération de modèles automatique crée les fichiers suivants :

• Pages/Movies : Create, Delete, Details, Edit, Index.
• Data/RazorPagesMovieContext.cs

Les fichiers créés sont expliqués dans le tutoriel suivant.

Le processus de génération de modèles automatique ajoute le code en surbrillance suivant au fichier Program.cs :

Visual Studio

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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

Visual Studio Code

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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.MapStaticAssets();
app.MapRazorPages();

app.Run();

Les modifications Program.cs sont expliquées plus loin dans ce tutoriel.

Créer le schéma de base de données initial à l’aide de la fonctionnalité de migration d’EF

La fonctionnalité de migration dans Entity Framework Core permet de :

• Créer le schéma de base de données initial.
• Mettre à jour de façon incrémentielle le schéma de base de données afin de le garder synchronisé avec le modèle de données de l’application. Les données existantes dans la base de données sont conservées.

Visual Studio

Dans cette section, la fenêtre Console du gestionnaire de package est utilisée pour :

• Ajouter une migration initiale

• Mettez à jour la base de données avec la migration initiale.

• Dans le menu Outils, sélectionnez Gestionnaire de package NuGet>Console du gestionnaire de package.

  

• Dans la console PMC, entrez la commande suivante :

  Add-Migration InitialCreate
  

• La commande Add-Migration génère le code nécessaire à la création du schéma de base de données initial. Le schéma est basé sur le modèle spécifié dans DbContext. L’argument InitialCreate est utilisé pour nommer la migration. Vous pouvez utiliser n’importe quel nom, mais par convention, un nom décrivant la migration est sélectionné.

L’avertissement suivant s’affiche et sera traité dans une étape ultérieure :

Aucun type n’a été spécifié pour la colonne décimale 'Price' sur le type d’entité 'Movie'. Les valeurs sont tronquées en mode silencieux si elles ne sont pas compatibles avec la précision et l’échelle par défaut. Spécifiez explicitement le type de colonne SQL Server capable d’accueillir toutes les valeurs en utilisant ’HasColumnType()’.

• Dans la console PMC, entrez la commande suivante :

  Update-Database
  

  La commande Update-Database exécute la méthode Up dans des migrations qui n’ont pas été appliquées. Dans ce cas, la commande exécute la méthode Up dans le fichier Migrations/<time-stamp>_InitialCreate.cs, ce qui entraîne la création de la base de données.

Visual Studio Code

• Cliquez avec le bouton droit sur le projet RazorPagesMovie.csproj, puis sélectionnez Ouvrir dans le terminal intégré.

  La fenêtre Terminal s’ouvre avec l’invite de commandes dans le répertoire du projet, qui contient les fichiers Program.cs et .csproj.

• Exécutez la commande CLI .NET suivante :

  dotnet ef migrations add InitialCreate
  

  La commande migrations génère le code nécessaire à la création du schéma de base de données initial. Le schéma est basé sur le modèle spécifié dans DbContext. L’argument InitialCreate est utilisé pour nommer les migrations. Vous pouvez utiliser n’importe quel nom, mais par convention, un nom décrivant la migration est sélectionné.

• Exécutez la commande CLI .NET suivante :

  dotnet ef database update
  

  La commande update exécute la méthode Up dans des migrations qui n’ont pas été appliquées. Dans ce cas, la commande update exécute la méthode Up dans le fichier Migrations/<time-stamp>_InitialCreate.cs, ce qui entraîne la création de la base de données.

Remarque

Pour SQLite, le type de colonne pour le champ Price est défini sur TEXT. Cela sera résolu dans une étape ultérieure.

Contexte de données RazorPagesMovieContext :

• Dérive de Microsoft.EntityFrameworkCore.DbContext.
• Spécifie les entités qui sont incluses dans le modèle de données.
• Coordonne les fonctionnalités EF Core, telles que Créer, Lire, Mettre à jour et Supprimer, pour le modèle Movie.

La classe RazorPagesMovieContext dans le fichier généré Data/RazorPagesMovieContext.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Data
{
    public class RazorPagesMovieContext : DbContext
    {
        public RazorPagesMovieContext (DbContextOptions<RazorPagesMovieContext> options)
            : base(options)
        {
        }

        public DbSet<RazorPagesMovie.Models.Movie> Movie { get; set; } = default!;
    }
}

Le code précédent crée une propriété DbSet<Movie> pour le jeu d’entités. Dans la terminologie Entity Framework, un jeu d’entités correspond généralement à une table de base de données. Une entité correspond à une ligne dans la table.

Le nom de la chaîne de connexion est transmis au contexte en appelant une méthode sur un objet DbContextOptions. Pour le développement local, le système de configuration lit la chaîne de connexion à partir du fichier appsettings.json.

Tester l’application

1. Exécutez l’application et ajoutez /Movies à l’URL dans le navigateur (http://localhost:port/movies).

   Si vous voyez le message d’erreur suivant :

   SqlException: Cannot open database "RazorPagesMovieContext-GUID" requested by the login. The login failed.
   Login failed for user 'User-name'.
   

   Vous avez manqué l’étape des migrations.

2. Testez le lien Créer nouveau.

   

   Remarque

   Vous ne pourrez peut-être pas entrer de virgules décimales dans le champ Price. Pour prendre en charge la validation jQuery pour les paramètres régionaux autres que « Anglais » qui utilisent une virgule (« , ») comme décimale et des formats de date autres que le format « Anglais (États-Unis »), l’application doit être localisée. Pour obtenir des instructions sur la localisation, consultez ce problème GitHub.

3. Testez les liens Modifier, Détails et Supprimer.

Le prochain didacticiel décrit les fichiers créés par la génération de modèles automatique.

Examiner le contexte inscrit avec l’injection de dépendances

ASP.NET Core comprend l’injection de dépendances. Des services, tels que le contexte de base de données EF Core, sont inscrits avec l’injection de dépendance au démarrage de l’application. Ces services sont affectés aux composants qui les nécessitent (par exemple les Pages Razor) par le biais de paramètres de constructeur. Le code de constructeur qui obtient une instance de contexte de base de données est indiqué plus loin dans le tutoriel.

L’outil de génération de modèles automatique a créé automatiquement un contexte de base de données et l’a inscrit dans le conteneur d’injection de dépendances. Le code mis en surbrillance suivant est ajouté au fichier Program.cs par le générateur de modèles :

Visual Studio

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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

Visual Studio Code

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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.MapStaticAssets();
app.MapRazorPages();

app.Run();

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

Précédent : Bien démarrerSuivant : Pages Razor obtenues par génération de modèles automatique