Construire une application de base de données de films Blazor (Partie 2 - Ajouter et construire un modèle

Cet article est la deuxième partie du tutoriel de l'application de base de données de films Blazor qui vous enseigne les bases de la construction d'un ASP.NET Core Blazor Web App avec des fonctionnalités pour gérer une base de données de films.

Dans cette partie de la série de tutoriels :

• On ajoute à l'application une classe représentant un film dans une base de données.
• Les services et outils Entity Framework Core (EF Core) créent un contexte de base de données et une base de données. EF Core est un mappeur objet-relationnel (O/RM) qui simplifie l'accès aux données. Vous écrivez d'abord des classes modèles, et EF Core crée la base de données à partir des classes modèles, ce que l'on appelle l'échafaudage.
• Des outils supplémentaires permettent d'échafauder une interface utilisateur basée sur des composants Razor pour interagir avec les enregistrements de films dans la base de données via le contexte de la base de données.

Ajouter un modèle de données

Dans l'explorateur de solutions, cliquez avec le bouton droit de la souris sur le projet BlazorWebAppMovies et sélectionnez Ajouter> un nouveau dossier. Nommez le dossier Models.

Cliquez avec le bouton droit de la souris sur le dossier Models. Sélectionnez Ajouter>classe. Nommez le fichier Movie.cs. Utilisez le contenu suivant pour le fichier.

Ajoutez un dossier au projet nommé Models.

Ajoutez un fichier de classe au dossier Models nommé Movie.cs. Utilisez le contenu suivant pour le fichier.

Ajoutez un dossier au projet nommé Models.

Ajoutez un fichier de classe au dossier Models nommé Movie.cs. Utilisez le contenu suivant pour le fichier.

Models/Movie.cs :

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models;

public class Movie
{
    public int Id { get; set; }

    public string? Title { get; set; }

    public DateOnly ReleaseDate { get; set; }

    public string? Genre { get; set; }

    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

La classe Movie contient :

• Une propriété d'identifiant d'enregistrement (Id), requise par EF Core et la base de données pour le suivi des enregistrements. Dans la base de données, la propriété Id est la clé primaire de l'enregistrement.
• Autres propriétés décrivant des aspects d'un film :
  • Titre (Title)
  • Date de sortie (ReleaseDate)
  • Genre (Genre)
  • Prix (Price)

Le point d'interrogation sur un type string indique que la propriété est nullable (elle peut contenir une valeur null).

Le fournisseur de base de données EF Core sélectionne les types de données en fonction des types .NET des propriétés du modèle. Le fournisseur prend également en compte d'autres métadonnées fournies par System.ComponentModel.DataAnnotations, qui sont un ensemble de classes d'attributs placées au-dessus de la propriété d'un modèle avec le format suivant, où l'espace réservé {ANNOTATION} est le nom de l'annotation. Vous pouvez placer plusieurs annotations sur la même ligne, séparées par des virgules à l'intérieur des crochets, ou vous pouvez placer plusieurs annotations sur des lignes séparées, ce qui est l'approche adoptée dans cette série de tutoriels.

[{ANNOTATION}]

La propriété Price du fichier de classe Movie possède deux annotations de données :

[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

Ces annotations précisent

• Que la propriété détient un type de données de type devise.
• La colonne de la base de données est une décimale de 18 chiffres avec deux décimales.

De plus amples informations sur les annotations de données, y compris l'ajout d'annotations de données pour la validation, sont abordées dans une partie ultérieure de la série de didacticiels.

Sélectionnez Build>solution de build dans la barre de menu ou appuyez sur la touche F6 du clavier. Confirmez dans le panneau Sortie que la build a réussi.

Ajouter des packages et des outils Nuget

Pour ajouter les packages et outils NuGet requis, exécutez les commandes CLI .NET suivantes dans le terminal (menu Terminal, >Nouveau terminal).

Collez toutes les commandes suivantes à la requête (>) du Terminal. Lorsque vous collez plusieurs commandes, un avertissement apparaît indiquant que plusieurs commandes vont s'exécuter. Ne tenez pas compte de cet avertissement et poursuivez l'opération de collage.

Lorsque vous collez plusieurs commandes, toutes les commandes s'exécutent sauf la dernière. Cette dernière ne s'exécute pas tant que vous n'avez pas appuyé sur la touche Entrée du clavier.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Importante

Après l'exécution des huit premières commandes, veillez à appuyer sur la touche Entrée du clavier pour exécuter la dernière commande.

Remarque

Les commandes précédentes sont des commandes CLI .NET, et les commandes CLI .NET sont exécutées lorsqu'elles sont saisies à une requête PowerShell, qui est l'interpréteur de commande par défaut du Terminal VS Code.

Enregistrez le fichier projet.

Les commandes précédentes ajoutent :

• Outils d'interface de ligne de commande (CLI) pour EF Core.
• aspnet-codegeneratoroutil d'échafaudage.
• Concevoir des outils temporels pour EF Core.
• Les fournisseurs SQLite et SQL Server avec le package EF Core comme dépendance.
• Microsoft.VisualStudio.Web.CodeGeneration.Design pour les échafaudages.
• Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore pour utiliser la méthode d'extension AddDatabaseDeveloperPageExceptionFilter dans le fichier Program, qui capture les exceptions liées à la base de données.

Dans la palette de commandes (Ctrl+Maj+P), utilisez la commande .NET: Build pour créer l'application.

Confirmez que l'application a été compilée avec succès.

Ajouter des packages et des outils Nuget

Pour ajouter les packages et outils NuGet requis, exécutez les commandes CLI .NET suivantes dans un interpréteur de commande ouvert dans le dossier racine du projet.

Collez toutes les commandes suivantes à la requête (>) de l'interpréteur de commande. Lorsque vous collez plusieurs commandes, un avertissement apparaît indiquant que plusieurs commandes vont s'exécuter. Ne tenez pas compte de cet avertissement et poursuivez l'opération de collage.

Lorsque vous collez plusieurs commandes, toutes les commandes s'exécutent sauf la dernière. Cette dernière ne s'exécute pas tant que vous n'avez pas appuyé sur la touche Entrée du clavier.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Enregistrez le fichier projet.

Les commandes précédentes ajoutent :

• Outils d'interface de ligne de commande (CLI) pour EF Core.
• aspnet-codegeneratoroutil d'échafaudage.
• Concevoir des outils temporels pour EF Core.
• Les fournisseurs SQLite et SQL Server avec le package EF Core comme dépendance.
• Microsoft.VisualStudio.Web.CodeGeneration.Design pour les échafaudages.
• Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore pour utiliser la méthode d'extension AddDatabaseDeveloperPageExceptionFilter dans le fichier Program, qui capture les exceptions liées à la base de données.

Dans un interpréteur de commande ouvert sur le dossier racine du projet, exécutez la commande dotnet build :

dotnet build

Confirmez que l'application a été compilée avec succès.

Effectuer la génération de modèles automatique pour le modèle

Dans cette section, le modèle Movie est utilisé pour échafauder un contexte de base de données et une interface utilisateur pour gérer les films dans la base de données. L'échafaudage .NET est un framework de génération de code pour les applications .NET. Vous utilisez l'échafaudage pour ajouter rapidement du code de base de données et d'interface utilisateur qui interagit avec les modèles de données.

Cliquez avec le bouton droit de la souris sur le dossier Components/Pages et sélectionnez Ajouter>Ajouter un nouvel élément d'échafaudage :

La boîte de dialogue Ajouter un nouvel élément d'échafaudage étant ouverte sur le composant Installé>Communs>Blazor>Razor, sélectionnez RazorComponents using Entity Framework (CRUD). Cliquez sur le bouton Ajouter.

CRUD est un acronyme pour Create, Read, Update, and Delete (créer, lire, mettre à jour et supprimer). L'échafaudage produit des composants de création, d'édition, de suppression, de détails et d'index pour l'application.

Complétez la boîte de dialogue Razor :

• La liste déroulante Modèle comprend d'autres modèles permettant de créer spécifiquement des composants de création, d'édition, de suppression, de détail et de liste. Cette liste déroulante est utile lorsque vous devez créer un type de composant spécifique lié à une classe de modèle. Laissez la liste déroulante Modèle réglée sur CRUD pour échafauder un ensemble complet de composants.
• Dans la liste déroulante Classe de modèle, sélectionnez Movie (BlazorWebAppMovies.Models).
• Pour la classe DbContext, sélectionnez le bouton + (signe plus).
• Dans la boîte de dialogue modale Ajouter un contexte de données, le nom de classe BlazorWebAppMovies.Data.BlazorWebAppMoviesContext est généré. Utilisez la valeur générée par défaut. Cliquez sur le bouton Ajouter.
• Après la fermeture de la boîte de dialogue du modèle, la liste déroulante fournisseur de base de données indique par défaut SQL Server. Lorsque vous créerez des applications à l'avenir, vous pourrez sélectionner le fournisseur approprié pour la base de données que vous utilisez. Les options incluent SQLite, PostgreSQL et Azure Cosmos DB. Laissez la liste déroulante Fournisseur de base de données réglée sur SQL Server.
• Sélectionnez Ajouter.

Dans le terminal (menu Terminal>Nouveau terminal) ouvert dans le répertoire racine du projet, exécutez la commande suivante. SQLite est utilisé comme base de données pour les utilisateurs qui adoptent l'outil VS Code pour cette série de tutoriels.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD est un acronyme pour Create, Read, Update, and Delete (créer, lire, mettre à jour et supprimer). Le générateur blazor avec le modèle CRUD produit des composants de création, d'édition, de suppression, de détails et d'index pour l'application.

Le tableau suivant détaille les options du générateur de code ASP.NET Core utilisées dans la commande précédente :

• -dbProvider: Fournisseur de base de données à utiliser. Les options comprennent sqlserver (par défaut), sqlite, cosmos, postgres.
• -dc :La classe DbContext à utiliser, y compris l'espace de noms (BlazorWebAppMovies.Data).
• -m : Nom du modèle.
• -outDir: Le répertoire de sortie des composants générés. Un dossier est créé à partir du nom du modèle dans le répertoire de sortie pour contenir les composants (par exemple, MoviePages dans ce cas).

Dans un interpréteur de commande ouvert sur le dossier racine du projet, exécuter la commande suivante. SQLite est utilisé comme base de données pour les utilisateurs qui adoptent l'outil .NET CLI pour cette série de tutoriels.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD est un acronyme pour Create, Read, Update, and Delete (créer, lire, mettre à jour et supprimer). Le générateur blazor avec le modèle CRUD produit des composants de création, d'édition, de suppression, de détails et d'index pour l'application.

Le tableau suivant détaille les options du générateur de code ASP.NET Core utilisées dans la commande précédente :

• -dbProvider: Fournisseur de base de données à utiliser. Les options comprennent sqlserver (par défaut), sqlite, cosmos, postgres.
• -dc :La classe DbContext à utiliser, y compris l'espace de noms (BlazorWebAppMovies.Data).
• -m : Nom du modèle.
• -outDir: Le répertoire de sortie des composants générés. Un dossier est créé à partir du nom du modèle dans le répertoire de sortie pour contenir les composants (par exemple, MoviePages dans ce cas).

Le fichier appsettings.json est mis à jour avec la chaîne de connexion utilisée pour se connecter à une base de données locale. Dans l'exemple suivant, {CONNECTION STRING} est la chaîne de connexion générée automatiquement par l'échafaudeur :

"ConnectionStrings": {
  "BlazorWebAppMoviesContext": "{CONNECTION STRING}"
}

Avertissement

Ne stockez pas de secrets d'application, de chaînes de connexion, d'informations d'identification, de mots de passe, de numéros d'identification personnels (PIN), de code C#/.NET privé ou de clés/tokens privés dans le code côté client, qui est toujours non sécurisé. Dans les environnements de test/staging et de production, le code Blazor côté serveur et les API Web doivent utiliser des flux d'authentification sécurisés qui évitent de conserver les informations d'identification dans le code du projet ou les fichiers de configuration. En dehors des tests de développement local, nous recommandons d'éviter d'utiliser des variables d'environnement pour stocker des données sensibles, car les variables d'environnement ne constituent pas l'approche la plus sûre. Pour les tests de développement local, il est recommandé d'utiliser l'outil Secret Manager pour sécuriser les données sensibles. Pour plus d'informations, voir Conserver en toute sécurité les données sensibles et les informations d'identification.

Fichiers créés et mis à jour par l'échafaudage

Le processus d'échafaudage crée les fichiers de composants suivants et le fichier de classe du contexte de la base de données de films :

• Components/Pages/MoviePages
  • Create.razor : Crée de nouvelles entités de film.
  • Delete.razor : Supprime une entité vidéo.
  • Details.razor : Affiche les détails de l'entité du film.
  • Edit.razor : Met à jour une entité de film.
  • Index.razor : Liste des entités cinématographiques (enregistrements) dans la base de données.
• Data/BlazorWebAppMoviesContext.cs: Fichier de contexte de la base de données (DbContext).

Les fichiers de composants du dossier MoviePages sont décrits plus en détail dans la partie suivante de ce didacticiel. Le contexte de base de données est décrit plus loin dans cet article.

Si le dossier MoviePages et les ressources ne sont pas présents après la génération automatique de modèles, retournez à la section Effectuer la génération automatique de modèles et régénérez automatiquement le modèle Movie, en vous assurant de sélectionner le générateur automatique de modèles Razor Components using Entity Framework (CRUD) sous Installation du >composant>Blazor>Razor commun dans la boîte de dialogue Ajouter un nouvel élément généré automatiquement.

ASP.NET Core est construit avec l'injection de dépendances, qui est un modèle de conception de logiciel pour réaliser l'inversion de contrôle (IoC) entre les classes et leurs dépendances. Les services, tels que le contexte de la base de données EF Core, sont enregistrés avec l'injection de dépendances lors du démarrage de l'application. Ces services sont injectés dans les composants Razor pour être utilisés par ces derniers.

Le composant QuickGrid est un composant Razor permettant d’afficher efficacement les données sous forme tabulaire. L'échafaudeur place un composant QuickGrid dans le composant Index (Components/Pages/Index.razor) pour afficher les entités vidéo. L'appel à AddQuickGridEntityFrameworkAdapter sur la collection de services ajoute un adaptateur EF Core pour que QuickGrid reconnaisse les instances EF Core fournies par IQueryable<T> et résolve les requêtes de base de données de manière asynchrone pour plus d'efficacité.

En combinaison avec UseDeveloperExceptionPage, AddDatabaseDeveloperPageExceptionFilter capture les exceptions liées à la base de données qui peuvent être résolues à l'aide des migrations Entity Framework. Lorsque ces exceptions se produisent, une réponse HTML est générée avec des détails sur les actions possibles pour résoudre le problème.

Le code suivant est ajouté au fichier Program par l'échafaudeur :

builder.Services.AddDbContextFactory<BlazorWebAppMoviesContext>(options =>
    options.UseSqlServer(
        builder.Configuration.GetConnectionString("BlazorWebAppMoviesContext") ?? 
        throw new InvalidOperationException(
            "Connection string 'BlazorWebAppMoviesContext' not found.")));

builder.Services.AddQuickGridEntityFrameworkAdapter();

builder.Services.AddDatabaseDeveloperPageExceptionFilter();

Créer le schéma initial de la base de données en utilisant la fonctionnalité de migration de EF Core.

La fonctionnalité de migration de EF Core :

• crée le schéma initial de la base de données
• Met à jour de manière incrémentale le schéma de la base de données pour qu'il reste synchronisé avec le modèle de données de l'application. Les données existantes dans la base de données sont préservées.

EF Core adopte l'approche code-first pour la conception et la maintenance des bases de données :

• Les classes d'entités sont créées et mises à jour en premier dans l'application.
• La base de données est créée et mise à jour à partir des classes d'entités de l'application.

Il s'agit de la procédure inverse des approches de type base de données d'abord, dans lesquelles la base de données est d'abord conçue, construite et mise à jour. L’adoption de l'approche code-first EF Corevise à accélérer le processus de développement des applications, car la plupart des procédures de création et de gestion de base de données difficiles et fastidieuses sont gérées de manière transparente par les outils EF Core, vous permettant ainsi de vous concentrer sur le développement d'applications.

Dans cette section, Visual Studio Connected Services est utilisé pour émettre des commandes EF Core qui :

• Ajoutez une migration initiale.
• Mettre à jour la base de données à l'aide de la migration initiale.

Dans l'Explorateur de solutions, double-cliquez sur Connected Services. Dans la zone SQL Server Express LocalDB des dépendances de service, sélectionnez les trois points (...) suivis de Ajouter une migration :

Donnez à la migration un nom de migrationInitialCreate, qui est un nom décrivant la migration. Attendez que le contexte de la base de données se charge dans le champ DbContext class names, ce qui peut prendre quelques secondes. Sélectionnez Terminer pour créer la migration :

Cliquez sur le bouton Fermer une fois l'opération terminée.

L'ajout d'une migration génère du code pour créer le schéma initial de la base de données. Le schéma est basé sur le modèle spécifié dans DbContext.

Sélectionnez à nouveau les trois points (...), puis la commande Mettre à jour la base de données :

La boîte de dialogue Mettre à jour la base de données avec la dernière migration s'ouvre. Attendez que le champ DbContext class names soit mis à jour et que les migrations précédentes soient chargées, ce qui peut prendre quelques secondes. Cliquez sur le bouton Terminer :

La commande de mise à jour de la base de données exécute les migrations de méthodes Up qui n'ont pas été appliquées dans un fichier de code de migration créé par le porteur d'échafaudage. Dans ce cas, la commande exécute la méthode Up dans le fichier Migrations/{TIME STAMP}_InitialCreate.cs, qui crée la base de données. L'espace réservé {TIME STAMP} est un horodatage.

Cliquez sur le bouton Fermer une fois l'opération terminée.

Cliquez avec le bouton droit de la souris sur le fichier de projet BlazorWebAppMovies (BlazorWebAppMovies.csproj) et sélectionnez Ouvrir dans le terminal intégré.

La fenêtre Terminal s'ouvre avec une requête de commande dans le répertoire du projet, qui contient le fichier Program et le fichier de projet de l'application (.csproj).

Exécutez la commande CLI .NET suivante pour ajouter une migration initiale. La commande migrations génère du code pour créer le 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. N'importe quel nom peut être utilisé, mais la convention est d'utiliser un nom qui décrit la migration.

dotnet ef migrations add InitialCreate

Une fois la commande précédente terminée, mettez à jour la base de données à l'aide de la commande update. La commande update exécute la méthode Up sur les migrations qui n'ont pas été appliquées dans un fichier de code de migration créé par l'échafaudeur. Dans ce cas, la commande exécute les migrations de la méthode Up dans le fichier Migrations/{TIME STAMP}_InitialCreate.cs, ce qui crée la base de données. L'espace réservé {TIME STAMP} est un horodatage.

dotnet ef database update

À partir du dossier racine du projet, exécutez la commande CLI .NET suivante pour ajouter une migration initiale. La commande migrations génère du code pour créer le 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. N'importe quel nom peut être utilisé, mais la convention est d'utiliser un nom qui décrit la migration.

dotnet ef migrations add InitialCreate

Une fois la commande précédente terminée, mettez à jour la base de données à l'aide de la commande update. La commande update exécute la méthode Up sur les migrations qui n'ont pas été appliquées dans un fichier de code de migration créé par l'échafaudeur. Dans ce cas, la commande exécute les migrations de la méthode Up dans le fichier Migrations/{TIME STAMP}_InitialCreate.cs, ce qui crée la base de données. L'espace réservé {TIME STAMP} est un horodatage.

dotnet ef database update

Le contexte de la base de données BlazorWebAppMoviesContext (Data/BlazorWebAppMoviesContext.cs) :

• Dérive de Microsoft.EntityFrameworkCore.DbContext.
• Spécifie les entités incluses dans le modèle de données.
• Coordonne la fonctionnalité EF Core, telle que les opérations CRUD, pour le modèle Movie.
• Contient une propriété DbSet<TEntity> pour l'ensemble d'entités Movie. Dans la terminologie EF, un ensemble 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, la chaîne de connexion est lue à partir du fichier appsettings.json.

Avertissement

Ne stockez pas de secrets d'application, de chaînes de connexion, d'informations d'identification, de mots de passe, de numéros d'identification personnels (PIN), de code C#/.NET privé ou de clés/tokens privés dans le code côté client, qui est toujours non sécurisé. Dans les environnements de test/staging et de production, le code Blazor côté serveur et les API Web doivent utiliser des flux d'authentification sécurisés qui évitent de conserver les informations d'identification dans le code du projet ou les fichiers de configuration. En dehors des tests de développement local, nous recommandons d'éviter d'utiliser des variables d'environnement pour stocker des données sensibles, car les variables d'environnement ne constituent pas l'approche la plus sûre. Pour les tests de développement local, il est recommandé d'utiliser l'outil Secret Manager pour sécuriser les données sensibles. Pour plus d'informations, voir Conserver en toute sécurité les données sensibles et les informations d'identification.

Tester l'application

Exécutez l'application.

Ajoutez /movies à l'URL dans la barre d'adresse du navigateur pour naviguer vers la page des films Index.

Une fois la page Index chargée, sélectionnez le lien Create New.

Ajoutez un film à la base de données. Dans l'exemple suivant, le film de science-fiction classique The Matrix (©1999 Warner Bros. Entertainment Inc.) est ajouté en tant que première entrée de film. La sélection du bouton Create ajoute le film à la base de données :

Lorsque vous sélectionnez le bouton Create, les données du film sont envoyées au serveur et enregistrées dans la base de données.

Dans .NET 9, le débogueur Visual Studio peut se bloquer avec une NavigationException sur la ligne qui revient à la page Index :

Pour résoudre ce problème :

1. Désélectionnez la case à cocher Interrompre lorsque ce type d'exception est géré par l'utilisateur.
2. Sélectionnez le bouton Continuer dans la barre de menu pour poursuivre l'exécution.

L’exception n’est pas levée lorsqu’une méthode NavigateTo est exécutée dans le reste de la série de tutoriels.

Dans .NET 10 ou version ultérieure :

• Les mises à jour de la façon dont NavigateTo gère la navigation n’entraînent jamais de NavigationException.
• Le débogueur Visual Studio ne se bloque pas lors du traitement des appels NavigateTo avec un point de terminaison valide.

Lorsque l'application revient à la page Index, l'entité ajoutée apparaît :

Ouvrez la page Edit. Modifiez l'enregistrement du film et enregistrez les modifications.

Examinez la page Delete, mais ne supprimez pas le film Matrix de la base de données. La présence de cet enregistrement de film est précieuse pour l'étape suivante du didacticiel, où le rendu HTML est étudié et où certaines améliorations sont apportées aux données affichées. Si vous avez déjà supprimé le film, ajoutez-le à nouveau à la base de données en utilisant la page Create avant de passer à la partie suivante de la série de didacticiels.

Arrêter l'application

Arrêtez l'application en utilisant l'une des approches suivantes :

• Fermez la fenêtre du navigateur.
• Dans Visual Studio, soit :

  • Utilisez le bouton Stop dans la barre de menu de Visual Studio :

    

  • Appuyez sur Maj+F5 sur le clavier.

Arrêtez l'application en utilisant l'approche suivante :

1. Fermez la fenêtre du navigateur.
2. Dans VS Code, soit :
   • Dans le menu Exécuter, sélectionnez Arrêter le débogage.
   • Appuyez sur Maj+F5 sur le clavier.

Arrêtez l'application en utilisant l'approche suivante :

1. Fermez la fenêtre du navigateur.
2. À partir de l’interpréteur de commandes, appuyez sur Ctrl+C.

Résolvez les problèmes à l'aide de l'exemple terminé

Si vous rencontrez un problème en suivant le tutoriel que vous ne pouvez pas résoudre à partir du texte, comparez votre code au projet complété dans le référentiel d'échantillons Blazor :

Blazor échantillons du référentiel GitHub (dotnet/blazor-samples)

Sélectionnez le dossier de la dernière version. Le dossier d'échantillons pour le projet de ce tutoriel est nommé BlazorWebAppMovies.

Ressources supplémentaires

EF Core documentation :

• Entity Framework Core
• Référence des outils Entity Framework Core - .NET Core CLI
• Types de données
• SaveChangesAsync : Le document sur l'API contient des informations de base sur la manière dont les entités sont sauvegardées et sur la détection des changements.
• Classe Startup et méthodes basées sur l'environnement
• dotnet aspnet-codegenerator
• Injection de dépendances dans ASP.NET Core
• Composant ASP.NET CoreBlazor « QuickGrid »

Informations juridiques

The Matrix est une marque déposée et protégée par copyright de Warner Bros. Entertainment Inc..

Étapes suivantes

Précédent : créer une Blazor Web AppSuivant : en savoir plus sur les composants Razor