Lire en anglais

Partager via

Créer une application de base de données de films Blazor (Partie 3 - En savoir plus sur les composants Razor)

  • Article
Sélectionnez vos outils

Notes

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

Important

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

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

Cet article est la troisième partie du tutoriel sur l’application de base de données de films Blazor qui vous apprend les bases de la création d’une application web ASP.NET Core Blazor Web App avec des fonctionnalités pour gérer une base de données de films.

Cette partie de la série de tutoriels examine les composants Razor du projet qui ont été générés automatiquement dans l’application. Des améliorations sont apportées pour l’affichage des données de films.

Composants Razor

Les applications Blazor sont basées sur les composants Razor, souvent appelés simples composants. Un composant est un élément d’interface utilisateur, comme une page, une boîte de dialogue ou un formulaire de saisie de données. Les composants sont des classes .NET C# intégrées dans des assemblys .NET.

Razor fait référence à la façon dont les composants sont généralement écrits sous la forme d’une page de balisage Razor (extension de fichier .razor) pour la logique et la composition de l’interface utilisateur côté client. Razor est une syntaxe qui combine des balises HTML à du code C# destiné à améliorer la productivité des développeurs.

Bien que les développeurs et les ressources en ligne utilisent le terme « composants Blazor », la documentation utilise le nom formel « composants Razor » (ou seulement « composants »).

L’anatomie d’un composant Razor a le modèle général suivant :

  • En haut de la définition de composant (fichier .razor), différentes directives Razor spécifient la façon dont le balisage du composant est compilé ou fonctionne.
  • Ensuite, le balisage Razor spécifie le rendu du code HTML, qui inclut des éléments HTML ordinaires.
  • Enfin, un bloc @code contient du code C# pour définir des membres pour la classe de composant, y compris les paramètres de composant et les gestionnaires d’événements.

Considérez le composant Welcome suivant (Welcome.razor) :

razor 
@page "/welcome"

<PageTitle>Welcome!</PageTitle>

<h1>Welcome to Blazor!</h1>

<p>@welcomeMessage</p>

@code {
    private string welcomeMessage = "We ❤️ Blazor!";
}

La première ligne représente une construction importante Razor dans les composants Razor, une directive Razor. Une directive Razor est un mot clé réservé précédé d’un préfixe @ qui apparaît dans le balisage Razor qui modifie la façon dont le balisage de composant est compilé ou fonctionne. La directive @pageRazor spécifie le modèle d’itinéraire du composant. Ce composant est atteint dans un navigateur à l’URL relative /welcome. Par convention, la plupart des directives d’un composant sont placées en haut du fichier de définition de composant.

Le composant PageTitle est un composant intégré à l’infrastructure qui spécifie un titre de page.

« Welcome to Blazor! » est le premier balisage du corps rendu du composant par le contenu de l’élément de titre H1 (<h1>).

Ensuite, un message de bienvenue s’affiche à l’aide de la syntaxe Razor en préfixant le symbole at (@) à une variable C# (welcomeMessage).

Le bloc @code contient le code C# du composant. welcomeMessage est une chaîne privée initialisée avec une valeur.

Cet article contient les sections suivantes :

  • Trois composants pour la navigation et la disposition des pages web sont décrits, les composants NavMenu, NavLink, et MainLayout.
  • Les composants créés par la génération automatique de modèles pour les opérations CRUD sur les entités de base de données de films sont abordés.

Le composant NavMenu (Components/Layout/NavMenu.razor) implémente la navigation de barre latérale à l’aide de composants, NavLink qui affichent des liens de navigation vers d’autres composants Razor.

Un composant NavLink se comporte comme un élément <a>, à ceci près qu’il ajoute/supprime une classe CSS active selon que son href correspond ou non à l’URL actuelle. La classe active permet à un utilisateur de comprendre quelle est la page active parmi les liens de navigation affichés. NavLinkMatch.All affecté au paramètre Match configure le composant pour afficher une classe CSS active lorsqu’elle correspond à l’URL actuelle entière.

Le composant NavLink intégré à l’infrastructure Blazor pour toute application Blazor à utiliser, tandis que le composant NavMenu ne fait que partie des modèles de projet Blazor.

Components/Layout/NavMenu.razor:

razor 
<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorWebAppMovies</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
    </nav>
</div>

Notez dans le premier élément NavMenu du composant <div> le texte du lien de marque (contenu de l’élément <a>). Remplacez la marque BlazorWebAppMovies par Sci-fi Movies :

diff 
- <a class="navbar-brand" href="">BlazorWebAppMovies</a>
+ <a class="navbar-brand" href="">Sci-fi Movies</a>

Pour permettre aux utilisateurs d’accéder à la page de films Index, ajoutez une entrée de menu de navigation au composant NavMenu. Immédiatement après le balisage (<div>) du Weather du composant NavLink, ajoutez le balisage suivant :

razor 
<div class="nav-item px-3">
    <NavLink class="nav-link" href="movies">
        <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
    </NavLink>
</div>

Composant final NavMenu après avoir apporté les modifications précédentes :

razor 
<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">Sci-fi Movies</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="nav flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="movies">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Movies
            </NavLink>
        </div>
    </nav>
</div>

Exécutez l’application pour afficher la marque mise à jour en haut de la navigation de barre latérale et un lien pour accéder à la page de films (Films) :

Application s’exécutant dans un navigateur montrant la marque en haut de la navigation de barre latérale sous la forme « Sci-fi Movies » et un lien « Movie » dans la barre latérale

Arrêtez l’application en fermant la fenêtre du navigateur.

Arrêtez l’application en fermant la fenêtre du navigateur et en appuyant sur Maj+F5 sur le clavier dans VS Code.

Arrêtez l’application en fermant la fenêtre du navigateur et en appuyant sur Ctrl+C dans l’interpréteur de commandes.

Composant MainLayout pour la disposition

Le composant MainLayout est la disposition par défaut de l’application. Le composant MainLayout hérite de la classe LayoutComponentBase, qui est une classe de base pour les composants qui représentent une disposition. Les composants de l’application qui utilisent la disposition sont affichés où Body (@Body) apparaît dans le balisage.

Components/Layout/MainLayout.razor:

razor 
@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

Le composant MainLayout adopte les spécifications supplémentaires suivantes :

  • Le composant NavMenu est affiché dans la barre latérale. Notez que vous devez uniquement placer une balise HTML avec le nom du composant pour afficher un composant à cet emplacement dans le balisage Razor. Cela vous permet d’imbriquer les composants entre eux et dans n’importe quelle disposition HTML que vous implémentez.
  • Le contenu de l’élément <main> inclut :
    • Un lien About qui envoie les utilisateurs à la page de destination de la documentation ASP.NET Core
    • Un élément <article> avec le paramètre Body (@Body), où les composants qui utilisent la disposition sont affichés
    • L’interface utilisateur d’erreur (<div id="blazor-error-ui" ...>), où une notification concernant une erreur non gérée s’affiche.

La disposition par défaut (composant MainLayout) est spécifiée dans le composant Routes (Components/Pages/Routes.razor) :

razor 
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />

Les composants individuels peuvent définir leur propre disposition qui n’est pas celle par défaut, et une disposition peut être appliquée à l’ensemble du dossier des composants via un fichier _Imports.razor dans le même dossier. Ces fonctionnalités sont décrites en détail dans la documentation Blazor.

Composants de création, lecture, mise à jour et suppression (CRUD)

Les sections suivantes expliquent la composition des composants CRUD de film et leur fonctionnement.

Index (composant)

Ouvrez le fichier de définition de composant Index (Components/Pages/Movies/Index.razor) et examinez les directives Razor en haut du fichier.

Le modèle d’itinéraire de la directive @page indique que l’URL de la page est /movies.

Les directives @using semblent accéder à l’API suivante :

La fabrique de contexte de base de données (IDbContextFactory<T>où le type (T) est BlazorWebAppMoviesContextinjecté dans le composant avec la @inject directive. L’approche de fabrique nécessite la suppression du contexte de base de données, de sorte que le composant implémente l’interface IAsyncDisposable avec la directive @implements.

Le titre de la page est défini via le composant Blazor de l’infrastructure PageTitle, et un titre de section H1 est le premier élément affiché :

razor 
<PageTitle>Index</PageTitle>

<h1>Index</h1>

Un lien est affiché pour accéder à la page Create à l’adresse /movies/create :

razor 
<p>
    <a href="movies/create">Create New</a>
</p>

Le composant QuickGrid affiche les entités cinématographiques. Le fournisseur d’éléments est un DbSet<Movie> obtenu à partir du contexte de base de données créé (CreateDbContext) de la fabrique de contexte de base de données injectée (DbFactory). Pour chaque entité de film, le composant affiche le titre, la date de sortie, le genre et le prix du film. Une colonne contient également des liens pour modifier, voir les détails et supprimer chaque entité de film.

razor 
<QuickGrid Class="table" Items="context.Movie">
    <PropertyColumn Property="movie => movie.Title" />
    <PropertyColumn Property="movie => movie.ReleaseDate" />
    <PropertyColumn Property="movie => movie.Genre" />
    <PropertyColumn Property="movie => movie.Price" />

    <TemplateColumn Context="movie">
        <a href="@($"movies/edit?id={movie.Id}")">Edit</a> |
        <a href="@($"movies/details?id={movie.Id}")">Details</a> |
        <a href="@($"movies/delete?id={movie.Id}")">Delete</a>
    </TemplateColumn>
</QuickGrid>

@code {
    private BlazorWebAppMoviesContext context = default!;

    protected override void OnInitialized()
    {
        context = DbFactory.CreateDbContext();
    }

    public async ValueTask DisposeAsync() => await context.DisposeAsync();
}

Dans ce bloc de code (@code) :

  • Le champ context détient le contexte de base de données, tapé sous la forme BlazorWebAppMoviesContext.
  • La méthode de cycle de vie OnInitialized affecte un contexte de base de données créé (CreateDbContext) à partir de la fabrique injectée (DbFactory) à la variable context.
  • La méthode DisposeAsync asynchrone supprime le contexte de base de données lorsque le composant est supprimé.

Notez comment le paramètre de contexte (Context) du TemplateColumn<TGridItem> spécifie un nom de paramètre (movie) pour l’instance de contexte de la colonne. La spécification d’un nom pour l’instance de contexte rend le balisage plus lisible (le nom par défaut du contexte est simplement context). Les propriétés de classe Movie sont lues à partir de l’instance de contexte. Par exemple, l’identificateur de film (Id) est disponible dans movie.Id.

Le symbole at (@) avec parenthèses (@(...)), appelé expression Razor explicite, permet au href de chaque lien d’inclure la propriété Id de l’entité de film dans la chaîne de requête de lien sous forme de chaîne interpolée ($...{...}...). Pour un identificateur de film (Id) de 7, la valeur de chaîne fournie au href pour modifier ce film est movies/edit?id=7. Lorsque le lien est suivi, le champ id est lu à partir de la chaîne de requête par le composant Edit pour charger le film.

Pour l’exemple vidéo de la dernière partie de la série de didacticiels, La matrice© , le composant QuickGrid affiche le balisage HTML suivant (certains éléments et attributs ne sont pas présents pour simplifier l’affichage). Découvrez comment les expressions explicites Razor et les chaînes interpolées ont généré les valeurs href des liens vers d’autres pages. L’identificateur du film dans la base de données est 3 dans cet exemple. Le id est donc 3 dans les chaînes de requête pour les pages Edit, Details, et Delete. Vous pouvez voir une valeur différente lorsque vous exécutez l’application.

HTML 
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>ReleaseDate</th>
            <th>Genre</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The Matrix</td>
            <td>3/29/1999</td>
            <td>Sci-fi (Cyberpunk)</td>
            <td>5.00</td>
            <td>
                <a href="movies/edit?id=3">Edit</a> |
                <a href="movies/details?id=3">Details</a> |
                <a href="movies/delete?id=3">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

Les noms de colonnes sont extraits des propriétés de modèle Movie, de sorte que la date de sortie n’a pas d’espace entre les mots. Ajoutez un Title à PropertyColumn<TGridItem,TProp> avec une valeur qui inclut une espace entre les mots :

diff 
- <PropertyColumn Property="movie => movie.ReleaseDate" />
+ <PropertyColumn Property="movie => movie.ReleaseDate" Title="Release Date" />

Exécutez l’application pour voir que la colonne affiche deux mots pour la date de sortie.

Arrêtez l’application en fermant la fenêtre du navigateur.

Arrêtez l’application en fermant la fenêtre du navigateur et en appuyant sur Maj+F5 sur le clavier dans VS Code.

Arrêtez l’application en fermant la fenêtre du navigateur et en appuyant sur Ctrl+C dans l’interpréteur de commandes.

Details (composant)

Ouvrez le fichier de définition de composant Details (Components/Pages/Movies/Details.razor).

La directive @page située en haut du fichier indique que l’URL relative de la page est /movies/details. Comme précédemment, le contexte de base de données est injecté et les espaces de noms sont fournis pour accéder à l’API (BlazorWebAppMovies.Models et Microsoft.EntityFrameworkCore). Le composant Details injecte également le NavigationManager de l’application, qui est utilisé pour diverses opérations liées à la navigation dans les composants.

razor 
@page "/movies/details"
@using Microsoft.EntityFrameworkCore
@using BlazorWebAppMovies.Models
@inject IDbContextFactory<BlazorWebAppMovies.Data.BlazorWebAppMoviesContext> DbFactory
@inject NavigationManager NavigationManager

Les détails d’une entité de film sont affichés uniquement si le film, situé par son identificateur (Id) à partir de la chaîne de requête, a été chargé pour l’affichage. La présence du film dans movie est vérifiée avec une instruction @ifRazor :

razor 
@if (movie is null)
{
    <p><em>Loading...</em></p>
}

Lorsque le film est chargé, il s’affiche sous la forme d’une liste de description (documentation MDN) avec deux liens :

  • Le premier lien permet aux utilisateurs de modifier l’entité.
  • Le deuxième lien permet aux utilisateurs de revenir à la page de films Index.

Les classes CSS ne sont pas affichées dans l’exemple suivant afin de simplifier le balisage Razor pour l’affichage :

razor 
<dl>
    <dt>Title</dt>
    <dd>@movie.Title</dd>
    <dt>ReleaseDate</dt>
    <dd>@movie.ReleaseDate</dd>
    <dt>Genre</dt>
    <dd>@movie.Genre</dd>
    <dt>Price</dt>
    <dd>@movie.Price</dd>
</dl>
<div>
    <a href="@($"/movies/edit?id={movie.Id}")">Edit</a> |
    <a href="@($"/movies")">Back to List</a>
</div>
</div>

Ajoutez une espace au contenu de l’élément de terme de description (<dt>) pour la date de sortie du film pour séparer les mots :

diff 
- <dt class="col-sm-2">ReleaseDate</dt>
+ <dt class="col-sm-2">Release Date</dt>

Examinez le C# du bloc @code du composant.

C# 
private Movie? movie;

[SupplyParameterFromQuery]
private int Id { get; set; }

protected override async Task OnInitializedAsync()
{
    using var context = DbFactory.CreateDbContext();
    movie = await context.Movie.FirstOrDefaultAsync(m => m.Id == Id);

    if (movie is null)
    {
        NavigationManager.NavigateTo("notfound");
    }
}

La variable movie est un champ privé de type Movie, qui est un type de référence null (?), ce qui signifie que movie peut être défini sur null.

Id est un paramètre de composant fourni à partir de la chaîne de requête du composant en raison de la présence de l’attribut [SupplyParameterFromQuery]. Si l’identificateur est manquant, Id prend par défaut la valeur zéro (0).

OnInitializedAsync est la première méthode de cycle de vie de composant que nous avons vue. Cette méthode est exécutée lorsque le composant se charge. FirstOrDefaultAsync est appelé sur le jeu de bases de données (DbSet<Movie>) pour récupérer l’entité de film et Id correspond au paramètre Id qui a été défini par la chaîne de requête. Si movie est null, NavigationManager.NavigateTo est utilisé pour accéder à un point de terminaison notfound.

Il n’existe pas de point de terminaison réel notfound (composant Razor) dans l’application. Lors de l’adoption du rendu côté serveur (SSR), Blazor n’a pas de mécanisme pour retourner un code d’état 404 (introuvable). En guise de solution de contournement temporaire, un code 404 est généré en accédant à un point de terminaison inexistant. Ce code généré automatiquement est destiné à votre implémentation ultérieure d’un résultat approprié lorsque l’entité n’est pas trouvée. Par exemple, vous pouvez faire en sorte que le composant redirige les utilisateurs vers une page où ils peuvent déposer une enquête auprès de votre équipe du support technique, ou vous pouvez supprimer le code NavigationManager et NavigationManager.NavigateTo injecté et le remplacer par un balisage Razor et un code qui affiche un message aux utilisateurs indiquant que l’entité n’a pas été trouvée.

Create (composant)

Ouvrez le fichier de définition de composant Create (Components/Pages/Movies/Create.razor).

Le composant utilise un composant intégré appelé EditForm, qui affiche un formulaire pour l’entrée utilisateur et inclut des fonctionnalités de validation.

Les classes CSS ne sont pas présentes dans l’exemple suivant pour simplifier l’affichage :

razor 
<EditForm method="post" Model="Movie" OnValidSubmit="AddMovie" FormName="create" Enhance>
    <DataAnnotationsValidator />
    <ValidationSummary role="alert" />
    <div>
        <label for="title">Title:</label> 
        <InputText id="title" @bind-Value="Movie.Title" /> 
        <ValidationMessage For="() => Movie.Title" /> 
    </div>
    <div>
        <label for="releasedate">ReleaseDate:</label> 
        <InputDate id="releasedate" @bind-Value="Movie.ReleaseDate" /> 
        <ValidationMessage For="() => Movie.ReleaseDate" /> 
    </div>
    <div>
        <label for="genre">Genre:</label> 
        <InputText id="genre" @bind-Value="Movie.Genre" /> 
        <ValidationMessage For="() => Movie.Genre" /> 
    </div>
    <div>
        <label for="price">Price:</label> 
        <InputNumber id="price" @bind-Value="Movie.Price" /> 
        <ValidationMessage For="() => Movie.Price" /> 
    </div>
    <button type="submit">Create</button>
</EditForm>

Ajoutez une espace au contenu de l’élément d’étiquette (<label>) pour la date de sortie du film pour séparer les mots :

diff 
- <label for="releasedate" class="form-label">ReleaseDate:</label>
+ <label for="releasedate" class="form-label">Release Date:</label>

Le paramètre Model est affecté au modèle, dans ce cas Movie. OnValidSubmit spécifie une méthode à appeler (AddMovie) lorsque le formulaire est envoyé et que les données sont valides. Par convention, chaque formulaire doit attribuer un FormName pour empêcher les collisions de formulaires lorsque plusieurs formulaires sont présents sur une page. L’indicateur Enhance active une fonctionnalité Blazor pour le rendu côté serveur (SSR) qui envoie le formulaire sans recharger complètement la page.

Pour la validation :

  • DataAnnotationsValidator ajoute la prise en charge de la validation des annotations de données, qui est abordée plus loin dans cette série de tutoriels.
  • Le composant ValidationSummary affiche une liste de messages de validation.
  • Les composants ValidationMessage<TValue> contiennent des messages de validation pour les champs du formulaire.

Blazor inclut plusieurs composants d’élément de formulaire pour vous aider à créer des formulaires, y compris EditForm et différents composants d’entrée, tels que InputText, InputDate<TValue> et InputNumber<TValue>. Chaque composant d’entrée est lié à une propriété de modèle avec une syntaxe @bind-ValueRazor, où Value est une propriété dans chaque composant d’entrée.

Dans le bloc @code du composant, le code C# inclut un paramètre de composant Movie lié au formulaire via l’attribut [SupplyParameterFromForm].

La méthode AddMovie :

  • Est appelée lorsque le formulaire est envoyé
  • Ajoute les données de film liées au modèle du formulaire (Movie) si la validation du formulaire réussit
  • SaveChangesAsync est appelé sur le contexte de base de données pour enregistrer le film.
  • NavigationManager est utilisé pour renvoyer les utilisateurs à la page films Index.
C# 
@code {
    [SupplyParameterFromForm]
    private Movie Movie { get; set; } = new();

    private async Task AddMovie()
    {
        using var context = DbFactory.CreateDbContext();
        context.Movie.Add(Movie);
        await context.SaveChangesAsync();
        NavigationManager.NavigateTo("/movies");
    }
}

Avertissement

Bien qu’il ne s’agit pas d’une préoccupation pour l’application dans ce tutoriel, la liaison de données de formulaire aux modèles de données d’entité peut être susceptible d’entraîner des attaques par surcharge POST. Vous trouverez des informations supplémentaires sur ce sujet plus loin dans cet article.

Delete (composant)

Ouvrez le fichier de définition de composant Delete (Components/Pages/Movies/Delete.razor).

Ajoutez une espace au contenu de l’élément de terme de description (<dt>) pour la date de sortie du film pour séparer les mots :

diff 
- <dt class="col-sm-2">ReleaseDate</dt>
+ <dt class="col-sm-2">Release Date</dt>

Examinez le balisage Razor du bouton Envoyer de EditForm (classe CSS supprimée par souci de simplicité) :

razor 
<button type="submit" disabled="@(movie is null)">Delete</button>

Le bouton Delete définit son disabled attribut HTML (documentation MDN) en fonction de la présence du film (et non null) à l’aide d’une expression explicite Razor (@(...)).

Dans le code C# du bloc @code, la méthode DeleteMovie supprime le film, enregistre les modifications apportées à la base de données et redirige les utilisateurs vers la page de films Index. Le point d’exclamation sur le champ de film (movie!) est l’opérateur null-forgiving (référence du langage C#) qui supprime les avertissements nullables pour movie.

C# 
private async Task DeleteMovie()
{
    using var context = DbFactory.CreateDbContext();
    context.Movie.Remove(movie!);
    await context.SaveChangesAsync();
    NavigationManager.NavigateTo("/movies");
}

Edit (composant)

Ouvrez le fichier de définition de composant Edit (Components/Pages/Movies/Edit.razor).

Ajoutez une espace au contenu de l’élément d’étiquette (<label>) pour la date de sortie du film pour séparer les mots :

diff 
- <label for="releasedate" class="form-label">ReleaseDate:</label>
+ <label for="releasedate" class="form-label">Release Date:</label>

Le composant utilise un EditForm similaire au composant Create.

L’identificateur Id de l’entité de film est stocké dans un champ masqué du formulaire :

razor 
<input type="hidden" name="Movie.Id" value="@Movie.Id" />

Examinez le code C# du bloc @code :

C# 
private async Task UpdateMovie()
{
    using var context = DbFactory.CreateDbContext();
    context.Attach(Movie!).State = EntityState.Modified;

    try
    {
        await context.SaveChangesAsync();
    }
    catch (DbUpdateConcurrencyException)
    {
        if (!MovieExists(Movie!.Id))
        {
            NavigationManager.NavigateTo("notfound");
        }
        else
        {
            throw;
        }
    }

    NavigationManager.NavigateTo("/movies");
}

private bool MovieExists(int id)
{
    using var context = DbFactory.CreateDbContext();
    return context.Movie.Any(e => e.Id == id);
}

Le EntityState de l’entité de film est définie sur Modified, ce qui signifie que l’entité est suivie par le contexte, existe dans la base de données et que l’ensemble de ses valeurs de propriété, ou une partie d’entre elles, sont modifiées.

S’il existe une exception d’accès concurrentiel et que l’entité de film n’existe plus au moment où les modifications sont enregistrées, le composant redirige vers le point de terminaison inexistant (notfound), ce qui entraîne le renvoi d’un code d’état 404 (introuvable). Vous pouvez modifier ce code pour avertir les utilisateurs que le film n’existe plus dans la base de données ou créer un composant non trouvé dédié et rediriger vers ce point de terminaison. Si le film existe et qu’une exception d’accès concurrentiel est levée, par exemple lorsqu’un autre utilisateur a déjà modifié l’entité, l’exception est levée à nouveau par le composant avec l’instruction throw (référence du langage C#). Des conseils supplémentaires sur la gestion de l’accès concurrentiel avec EF Core dans les applications Blazor sont fournis par la documentation Blazor.

Avertissement

Bien qu’il ne s’agit pas d’une préoccupation pour l’application dans ce tutoriel, la liaison de données de formulaire aux modèles de données d’entité peut être susceptible d’entraîner des attaques par surcharge POST. Vous trouverez des informations supplémentaires sur ce sujet dans la prochaine section.

Atténuer les attaques par surcharge POST

Les formulaires côté serveur dont le rendu est statique, par exemple ceux généralement utilisés dans les composants Create et Edit, peuvent être vulnérables à une attaque par surcharge POST, également appelée attaque par affectation en masse. Une attaque par surcharge POST se produit quand un utilisateur malveillant soumet un formulaire HTML via la méthode POST au serveur de traitement des données, en ajoutant des données correspondant à des propriétés qui ne font pas partie du formulaire affiché, et que le développeur ne souhaite pas que les utilisateurs modifient. L’expression « surcharge POST » signifie littéralement que l’utilisateur malveillant a surchargé le formulaire de données POST.

Dans les exemples de composants Create et Edit de ce tutoriel, le modèle Movie n’inclut pas de propriétés restreintes pour les opérations de création et de mise à jour, la surcharge POST n’est donc pas un problème. Toutefois, il est important de garder à l’esprit la surcharge POST quand vous utilisez des formulaires Blazor statiques avec rendu côté serveur (SSR) que vous créerez et modifierez à l’avenir.

Si vous souhaitez atténuer la surcharge POST, nous vous recommandons d’utiliser un modèle vue/objet DTO (objet de transfert de données) distinct pour le formulaire et la base de données durant les opérations de création (insertion) et de mise à jour. Quand le formulaire est envoyé, seules les propriétés du modèle vue/de l’objet DTO sont utilisées par le composant et le code C# pour modifier la base de données. Toutes les données supplémentaires incluses par un utilisateur malveillant sont abandonnées, ce qui empêche l’utilisateur malveillant de mener une attaque par surcharge POST.

Résolution des problèmes avec 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 terminé dans les exemples de référentiel Blazor :

Blazor exemples de dépôt GitHub (dotnet/blazor-samples)

Sélectionnez le dernier dossier de version. L’exemple de dossier du projet de ce tutoriel est nommé BlazorWebAppMovies.

Ressources supplémentaires

Étapes suivantes