Partager via

Créer une application Blazor de base de données de films (Partie 8 - Ajouter de l'interactivité)

Note

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 huitième partie du tutoriel de l'application de base de données de films Blazor qui vous apprend les bases de la construction d'une Blazor Web App ASP.NET Core avec des fonctionnalités de gestion d'une base de données de films.

Jusqu'à ce point du tutoriel, l'ensemble de l'application a été activé pour l'interactivité, mais l'application n'a adopté l'interactivité que dans son composant d'exemple Counter. Cette partie de la série de didacticiels explique comment adopter l'interactivité dans le composant Index film.

Important

Confirmez que l'application n'est pas en cours d'exécution pour les étapes suivantes.

Adopter l'interactivité

L'interactivité signifie qu'un composant a la capacité de traiter les événements de l'interface utilisateur via le code C#, comme le clic d'un bouton. Les événements sont traités soit sur le serveur par le moteur d'exécution ASP.NET Core, soit dans le navigateur du client par le moteur d'exécution Blazor basé sur WebAssembly. Ce tutoriel adopte le rendu interactif côté serveur (SSR interactif), également connu sous le nom de rendu de serveur interactif (InteractiveServer). Le rendu côté client (CSR), qui est intrinsèquement interactif, est traité dans la documentation de référence Blazor.

La RSS interactive permet une expérience utilisateur riche comme celle que l'on attendrait d'une application client, mais sans qu'il soit nécessaire de créer des points de terminaison d'API pour accéder aux ressources du serveur. Les interactions avec l'interface utilisateur sont gérées par le serveur via une connexion SignalR en temps réel avec le navigateur. Le contenu des pages interactives est pré-rendu, c'est-à-dire que le contenu sur le serveur est initialement généré et envoyé au client sans activer les gestionnaires d'événements pour les contrôles rendus. Avec le prérendu, le serveur produit l'interface HTML de la page dès que possible en réponse à la requête initiale, ce qui rend l'application plus réactive pour les utilisateurs.

Examinez l'API dans le fichier Program (Program.cs) qui permet le SSR interactif. Les services de composants Razor sont ajoutés à l'application pour permettre aux composants Razor d'effectuer un rendu statique à partir du serveur (AddRazorComponents) et d'exécuter du code avec un SSR interactif (AddInteractiveServerComponents) :

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

MapRazorComponents mappe les composants définis dans le composant racine App à l'assemblage .NET donné et rend les composants routables, et AddInteractiveServerRenderMode configure le hub SignalR de l'application pour prendre en charge le SSR interactif :

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

Jusqu'à ce stade de la série de tutoriels, les appels à AddInteractiveServerComponents et AddInteractiveServerRenderMode n'étaient pas nécessaires pour les pages de film car l'application n'a adopté les fonctionnalités SSR statiques que pour les composants de film. Cet article explique comment adopter des fonctionnalités interactives dans le composant movie Index

Lorsque Blazor définit le type de rendu d'un composant, le rendu est appelé mode de rendu du composant. Le tableau suivant présente les modes de rendu disponibles pour le rendu des composants Razor dans un Blazor Web App.

Name Description Emplacement du rendu Interactive
Serveur statique Rendu statique côté serveur (SSR statique) Serveur
Serveur interactif Rendu interactif côté serveur (SSR interactif) utilisant Blazor Server. Serveur
WebAssembly interactif Rendu côté client (CSR) utilisant Blazor WebAssembly. Client
Auto interactif SSR interactif utilisant Blazor Server initialement, puis CSR lors des visites ultérieures après le téléchargement du bundle Blazor. Serveur, puis client

Pour appliquer un mode de rendu à un composant, le développeur utilise la directive @rendermode ou l'attribut de directive sur l'instance du composant ou sur la définition du composant :

  • L'exemple suivant montre comment définir le mode de rendu sur une instance de composant avec l'attribut de directive @rendermode. L'exemple suivant utilise un composant hypothétique de dialogue (Dialog) dans un composant parent de chat (Chat).

    Dans le fichier Components/Pages/Chat.razor :

    <Dialog @rendermode="InteractiveServer" />

  • L'exemple suivant montre comment définir le mode de rendu d'une définition de composant à l'aide de la directive @rendermode. L'exemple suivant illustre la définition du mode de rendu dans un fichier de définition du composant (SalesForecast) d'une prévision de vente hypothétique (.razor).

    En haut du fichier Components/Pages/SalesForecast.razor :

    @page "/sales-forecast"
@rendermode InteractiveServer

En utilisant les approches précédentes, vous pouvez appliquer un mode de rendu par page/composant. Toutefois, une application entière peut adopter un mode de rendu unique par l'intermédiaire d'un composant racine qui, par héritage, définit ensuite le mode de rendu de tous les autres composants chargés. C'est ce qu'on appelle l'interactivité globale, par opposition à l'interactivité par page/composant. L'interactivité globale est utile si la majeure partie de l'application requiert des fonctionnalités interactives. L'interactivité globale est généralement appliquée via le composant App, qui est le composant racine d'une application créée à partir du modèle de projet Blazor Web App.

Note

De plus amples informations sur les modes de rendu et l'interactivité globale sont fournies dans la documentation de référence de Blazor. Pour les besoins de ce tutoriel, l'application n'adopte le RSS interactif que par page/composant. Après ce tutoriel, vous êtes libre d'utiliser cette application pour étudier les autres modes de rendu des composants et l'emplacement de l'interactivité globale.

Ouvrez le fichier du composant du film Index (Components/Pages/MoviePages/Index.razor) et ajoutez la directive @rendermode suivante immédiatement après la directive @page pour rendre le composant interactif :

@rendermode InteractiveServer

Pour voir comment le fait de rendre un composant interactif améliore l'expérience utilisateur, apportons trois améliorations à l'application dans les sections suivantes :

  • Ajouter la pagination au composant movie QuickGrid.
  • Rendre le composant QuickGrid triable.
  • Remplacer le formulaire HTML permettant de filtrer les films par titre par du code C# qui :
    • S'exécute sur le serveur.
    • Rend le contenu de manière interactive via la connexion SignalR sous-jacente.

Ajouter la pagination au QuickGrid

Le composant QuickGrid peut paginer les données de la base de données.

Ouvrez le composant Index (Components/Pages/Movies/Index.razor). Ajoutez une instance PaginationState au bloc @code. Étant donné que le didacticiel n'utilise que cinq enregistrements vidéo pour la démonstration, définissez ItemsPerPage sur 2 éléments afin de démontrer la pagination. Normalement, le nombre d'éléments à afficher devrait être fixé à une valeur plus élevée ou être défini dynamiquement au moyen d'une liste déroulante.

private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };

Définissez la propriété QuickGrid du composant Pagination à pagination :

- <QuickGrid Class="table" Items="FilteredMovies">
+ <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">

Pour fournir une interface utilisateur pour la pagination sous le composant QuickGrid, ajoutez un composant Paginator sous le composant QuickGrid. Réglez le Paginator.State sur pagination :

<Paginator State="pagination" />

Lancez l'application et accédez à la page Index consacrée aux films. Vous pouvez parcourir les films à raison de deux films par page :

Liste de films montrant la deuxième page de deux éléments

Le composant est interactif. La page n'est pas rechargée pour que la pagination se produise. La pagination est effectuée en direct sur la connexion SignalR entre le navigateur et le serveur, où l'opération de pagination est effectuée sur le serveur avec le résultat rendu renvoyé au client pour que le navigateur l'affiche.

Remplacez ItemsPerPage par une valeur plus raisonnable, par exemple cinq éléments par page :

- private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
+ private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };

QuickGrid triable

Ouvrez le composant Index (Components/Pages/Movies/Index.razor).

Ajoutez Sortable="true" (Sortable) au titre PropertyColumn<TGridItem,TProp> :

- <PropertyColumn Property="movie => movie.Title" />
+ <PropertyColumn Property="movie => movie.Title" Sortable="true" />

Vous pouvez trier les QuickGrid par titre de film en sélectionnant la colonne Title. La page n'est pas rechargée pour que le tri soit effectué. Le tri est effectué en direct sur la connexion SignalR, où l'opération de tri est effectuée sur le serveur et le résultat rendu est renvoyé au client :

Liste de films triée par la colonne Titre

Utiliser le code C# et l'interactivité pour effectuer une recherche par titre

Dans une partie précédente de la série de tutoriels, le composant Index a été modifié pour permettre à l'utilisateur de filtrer les films par titre. Pour ce faire, il a fallu

  • Ajout d'un formulaire HTML qui émet une requête GET au serveur avec la chaîne de recherche du titre de l'utilisateur comme appairage champ-valeur de la chaîne de requête (par exemple, ?titleFilter=road+warrior si l'utilisateur recherche « road warrior »).
  • Ajouter du code au composant qui obtient la chaîne de recherche du titre à partir de la chaîne de requête et l'utilise pour filtrer les enregistrements de la base de données.

L'approche précédente est efficace pour un composant qui adopte une RSS statique, où la seule interaction entre le client et le serveur se fait par le biais de requêtes HTTP. Il n'y a pas de connexion SignalR en direct entre le client et le serveur, et il n'y a aucun moyen pour l'application sur le serveur de traiter le code C# de manière interactive en fonction des actions de l'utilisateur dans l'interface utilisateur du composant et de renvoyer le contenu.

Maintenant que le composant est interactif, il peut offrir une expérience utilisateur améliorée grâce aux fonctionnalités Blazor pour la liaison et le traitement des événements.

Ajoutez un gestionnaire d'événement délégué que l'utilisateur peut déclencher pour filtrer les enregistrements de films de la base de données. La méthode utilise la valeur de la propriété TitleFilter pour effectuer l'opération. Si l'utilisateur efface TitleFilter et effectue une recherche, la méthode charge la liste complète des films à afficher.

Supprimez les lignes suivantes du bloc @code :

- [SupplyParameterFromQuery]
- private string? TitleFilter { get; set; }
    
- private IQueryable<Movie> FilteredMovies =>
-     context.Movie.Where(m => m.Title!.Contains(TitleFilter ?? string.Empty));

Remplacez le code supprimé par le code suivant :

private string titleFilter = string.Empty;

private IQueryable<Movie> FilteredMovies => 
    context.Movie.Where(m => m.Title!.Contains(titleFilter));

Ensuite, le composant doit lier le champ titleFilter à un élément <input>, de sorte que l'entrée l'utilisateur soit stockée dans la variable titleFilter. La liaison est réalisée dans Blazor à l'aide de l'attribut de directive @bind.

Supprimez le formulaire HTML du composant :

- <form action="/movies" data-enhance>
-     <input type="search" name="titleFilter" />
-     <input type="submit" value="Search" />
- </form>

À sa place, ajoutez la balise Razor suivante :

<input type="search" @bind="titleFilter" @bind:event="oninput" />

@bind:event="oninput" exécute la liaison pour l'événement oninput du HTML, qui se déclenche lorsque la valeur de l'élément <input> est modifiée en conséquence directe de la saisie d'un utilisateur dans la boîte de recherche. L'élément QuickGrid est lié à FilteredMovies. Comme titleFilter change avec la valeur de la boîte de recherche, le re-rendement de QuickGrid lié à la méthode FilteredMovies filtre les entités vidéo sur la base de la valeur mise à jour de titleFilter.

Lancez l'application, tapez « road warrior » dans le champ de recherche et remarquez comment le QuickGrid est filtré pour chaque caractère saisi jusqu'à ce qu'il ne reste plus que le film Mad Max 2 : Le Défi lorsque le champ de recherche atteint « road  » (« road » suivi d'un espace).

Liste de films filtrée sur le film « Mad Max 2 : Le Défi » lorsque le champ de recherche atteint 'Mad' ('Mad' suivi d'une espace).

Le filtrage des enregistrements de la base de données est effectué sur le serveur, et le serveur renvoie de manière interactive le code HTML à afficher via la même connexion SignalR. La page ne se recharge pas. L'utilisateur a l'impression que ses interactions avec la page sont du code en cours d'exécution sur le client. En fait, c'est le code qui fait tourner le serveur.

Au lieu d'un formulaire HTML, la soumission d'une requête GET dans ce scénario aurait également pu utiliser JavaScript pour soumettre la requête au serveur, soit en utilisant l'API Fetch ou l'API XMLHttpRequest. Dans la plupart des cas, JavaScript peut être remplacé par Blazor et C# dans un composant interactif.

Style du composant QuickGrid

Vous pouvez appliquer des styles au composant QuickGrid rendu avec une feuille de style isolée du composant Index à l'aide de l'isolation CSS.

L’isolation CSS est appliquée en ajoutant un fichier de feuille de style à l’aide du format de nom de fichier {COMPONENT NAME}.razor.css, où l’espace réservé {COMPONENT NAME} est le nom du composant.

Pour appliquer des styles à un composant enfant, tel que le composant QuickGrid du composant Index, utilisez le pseudo-élément ::deep.

Dans le dossier MoviePages, ajoutez la feuille de style suivante pour le composant Index. Utilisez le pseudo-élément ::deep pour rendre la hauteur de la ligne 3em et centrer verticalement le contenu de la cellule de tableau.

Components/Pages/MoviePages/Index.razor.css :

::deep tr {
    height: 3em;
}

    ::deep tr > td {
        vertical-align: middle;
    }

Le ::deep pseudo-élément fonctionne uniquement avec les éléments descendants, de sorte que le composant QuickGrid doit être encapsulé avec un <div> ou un autre élément de niveau bloc afin d’appliquer les styles à celui-ci.

Dans Components/Pages/MoviePages/Index.razor, placez les balises <div> autour du composant QuickGrid :

+ <div>
    <QuickGrid ...>
        ...
    </QuickGrid>
+ </div>

Blazor réécrit les sélecteurs CSS pour qu’ils correspondent au balisage rendu par le composant. Les styles CSS réécrits sont regroupés et produits en tant que ressource statique. Vous n’avez donc pas besoin d’effectuer d’autres actions pour appliquer les styles au composant QuickGrid rendu.

Liste de films affichant des hauteurs de ligne à 3em avec un contenu centré verticalement

Nettoyer

Lorsque vous avez terminé le didacticiel et supprimé l'application d'exemple de votre système local, vous pouvez également supprimer la base de données BlazorWebAppMovies dans l'explorateur d'objets SQL Server (SSOX) de Visual Studio :

  1. Accédez à SSOX en sélectionnant View>SQL Server Object Explorateur dans la barre de menu.
  2. Affichez la liste des bases de données en sélectionnant les triangles situés à côté de SQL Server>(localdb)\MSSQLLocalDB>Databases.
  3. Cliquez avec le bouton droit de la souris sur la base de données BlazorWebAppMovies dans la liste et sélectionnez Supprimer.
  4. Cochez la case pour fermer les collections existantes avant de sélectionner OK.

Lors de la suppression de la base de données dans SSOX, les fichiers physiques de la base de données sont supprimés de votre dossier utilisateur Windows.

Lorsque vous avez terminé le tutoriel et que vous supprimez l'application exemple de votre système local, vous pouvez également supprimer manuellement la base de données BlazorWebAppMovies. L'emplacement de la base de données varie en fonction de la plateforme et du système d'exploitation, mais vous pouvez la rechercher par le nom de fichier indiqué dans la chaîne de connexion à la base de données du fichier de configuration de l'application (appsettings.json).

Lorsque vous avez terminé le tutoriel et que vous supprimez l'application exemple de votre système local, vous pouvez également supprimer manuellement la base de données BlazorWebAppMovies. L'emplacement de la base de données varie en fonction de la plateforme et du système d'exploitation, mais vous pouvez la rechercher par le nom de fichier indiqué dans la chaîne de connexion à la base de données du fichier de configuration de l'application (appsettings.json).

Félicitations !

Félicitations pour avoir terminé la série de tutoriels! Nous espérons que vous avez apprécié ce tutoriel sur Blazor. Blazor offre bien plus de fonctionnalités que nous n'avons pu en couvrir dans cette série, et nous vous invitons à explorer la documentation, les exemples et les exemples d'applications de Blazor pour en savoir plus. Bon codage avec Blazor!

Étapes suivantes

Si vous êtes novice en matière de Blazor, nous vous recommandons de lire les articles Blazor suivants qui couvrent des informations générales importantes pour le développement de Blazor :

Pour obtenir des conseils sur l’ajout d’une fonctionnalité de chargement de fichiers miniatures à l’exemple d’application de ce didacticiel, consultez ASP.NET Core Blazor chargements de fichiers.

Dans la barre de navigation latérale du site de documentation, les articles sont organisés par sujet et présentés grosso modo dans un ordre allant du général au spécifique ou du basique au complexe. La meilleure approche pour se familiariser avec Blazor est de lire la table des matières de haut en bas.

Dépannage 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 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.

Précédent : Ajouter un nouveau champ