Accéder aux données à partir d’un composant Blazor
- 7 minutes
Les sites web attrayants doivent afficher du contenu dynamique qui peut changer tout le temps. Apprendre à obtenir des données à partir d’une source dynamique, telle qu’une base de données ou un service web, est une technique fondamentale dans le développement web.
Supposons que vous travaillez pour une entreprise de livraison de pizzas sur son site web mis à jour. Vous disposez d’un ensemble de pages web présentées et conçues comme des composants Blazor. Vous souhaitez maintenant remplir ces pages avec des informations sur les pizzas, les garnitures et les commandes que vous souhaitez obtenir à partir d’une base de données.
Dans cette unité, vous allez apprendre à accéder aux données et à les afficher dans le balisage HTML pour l’affichage à l’utilisateur.
Création d’un service de données inscrit
Si vous souhaitez créer un site web dynamique qui montre la modification des informations aux utilisateurs, vous devez écrire du code pour obtenir ces données à partir de quelque part. Par exemple, supposons que vous disposez d’une base de données qui stocke toutes les pizzas vendues par votre entreprise. Étant donné que les pizzas changent toujours, c’est une mauvaise idée de les encoder en dur dans le code HTML du site web. Au lieu de cela, utilisez le code C# et Blazor pour interroger la base de données, puis mettez en forme les détails en tant que code HTML afin que l’utilisateur puisse choisir son favori.
Dans une application Blazor Server, vous pouvez créer un service inscrit pour représenter une source de données et obtenir des données à partir de celle-ci.
Note
Les sources de données que vous pouvez utiliser dans une application Blazor incluent des bases de données relationnelles, des bases de données NoSQL, des services web, différents services Azure et de nombreux autres systèmes. Vous pouvez utiliser des technologies .NET telles que Entity Framework, les clients HTTP et ODBC (Open Database Connectivity) pour interroger ces sources. Ces techniques dépassent la portée de ce module. Ici, vous allez apprendre à mettre en forme et utiliser des données obtenues à partir de l’une de ces sources et technologies.
La création d’un service inscrit commence par écrire une classe qui définit ses propriétés. Voici un exemple que vous pouvez écrire pour représenter une pizza :
namespace BlazingPizza.Data;
public class Pizza
{
public int PizzaId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public bool Vegetarian { get; set; }
public bool Vegan { get; set; }
}
La classe définit les propriétés et les types de données de la pizza. Vous devez vous assurer que ces propriétés correspondent au schéma de pizza dans la source de données. Il est judicieux de créer cette classe dans le dossier Données de votre projet et d’utiliser un espace de noms membre appelé Data. Si vous préférez, vous pouvez choisir d’autres dossiers et espaces de noms.
Ensuite, vous définissez le service :
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Notez que le service utilise un appel asynchrone pour accéder aux données et retourner une collection d’objets Pizza . La source de données peut être distante du serveur où le code Blazor est en cours d’exécution. Dans ce cas, utilisez un appel asynchrone. Ensuite, si la source de données répond lentement, d’autres codes peuvent continuer à s’exécuter lorsque vous attendez la réponse.
Vous devez inscrire le service en ajoutant une ligne à la Add Services to the container section du fichier Program.cs :
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Utilisation d’un service pour obtenir des données
Vous utilisez maintenant le service que vous avez défini en l’appelant dans un composant Blazor et en obtenant des données. Supposons que vous disposez du code de composant suivant et que vous souhaitez afficher des pizzas dans celle-ci :
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Injection du service
Avant de pouvoir appeler le service à partir du composant, vous devez utiliser l’injection de dépendances pour ajouter le service. Injectez le service en ajoutant le code suivant après la @page directive :
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
En règle générale, le composant et le service se trouvent dans différents membres d’espace de noms. Vous devez donc inclure la @using directive. Cette directive fonctionne de la même façon qu’une using instruction en haut d’un fichier de code C#. La @inject directive ajoute le service au composant actuel et initie une instance de celui-ci. Dans la directive, spécifiez le nom de la classe de service. Suivez-le par le nom que vous souhaitez utiliser pour l’instance du service dans ce composant.
Remplacer la méthode OnInitializedAsync
Un bon endroit pour appeler le service et obtenir des données se trouve dans la OnInitializedAsync méthode. Cet événement se déclenche lorsque l’initialisation du composant est terminée et reçoit ses paramètres initiaux, mais avant le rendu et l’affichage de la page à l’utilisateur. L’événement est défini sur la classe de base du composant Blazor. Vous pouvez le remplacer dans un bloc de code comme dans cet exemple :
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Appeler le service pour obtenir des données
Lorsque vous appelez le service, utilisez le await mot clé, car l’appel est asynchrone :
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Affichage des données à l’utilisateur
Après avoir obtenu des données à partir du service, vous souhaiterez l’afficher à l’utilisateur. Dans l’exemple de pizzas, nous attendons que le service retourne une liste de pizzas parmi lesquelles les utilisateurs peuvent choisir. Blazor inclut un ensemble complet de directives que vous pouvez utiliser pour insérer ces données dans la page que l’utilisateur voit.
Vérification des données
Tout d’abord, nous déterminons ce que la page affiche avant le chargement des pizzas en vérifiant si la todaysPizzas collection est null. Pour exécuter du code de rendu conditionnel dans un composant Blazor, utilisez la @if directive :
@if (todaysPizzas == null)
{
<p>We're finding out what pizzas are available today...</p>
}
else
{
<!-- This markup will be rendered once the pizzas are loaded -->
}
La @if directive restitue le balisage dans son premier bloc de code uniquement si l’expression C# retourne true. Vous pouvez également utiliser un else if bloc de code pour exécuter d’autres tests et afficher le balisage s’ils sont vrais. Enfin, vous pouvez spécifier un else bloc de code pour afficher le code si aucune des conditions précédentes n’a retourné true. En recherchant null dans le bloc de code @if, vous vous assurez que Blazor n’essaiera pas d’afficher les détails de pizza avant que des données n’aient été obtenues du service.
Note
Blazor inclut également la @switch directive pour le rendu du balisage basé sur un test qui peut retourner plusieurs valeurs. La @switch directive fonctionne de la même façon que l’instruction C# switch .
Rendu d’une collection d’objets
Si Blazor exécute l’instruction else dans le code précédent, vous savez que certaines pizzas ont été obtenues à partir du service. La tâche suivante consiste à afficher ces pizzas à l’utilisateur. Examinons comment afficher les données dans une table HTML simple.
Nous ne savons pas combien de pizzas sont disponibles lorsque nous coderons cette page. Nous pouvons utiliser la @foreach directive pour parcourir tous les objets de la todaysPizzas collection et afficher une ligne pour chacune d’elles :
<table>
<thead>
<tr>
<th>Pizza Name</th>
<th>Description</th>
<th>Vegetarian?</th>
<th>Vegan?</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var pizza in todaysPizzas)
{
<tr>
<td>@pizza.Name</td>
<td>@pizza.Description</td>
<td>@pizza.Vegetarian</td>
<td>@pizza.Vegan</td>
<td>@pizza.Price</td>
</tr>
}
</tbody>
</table>
Vous souhaitez probablement un affichage plus riche de pizzas que la table simple illustrée dans cet exemple. Vous pouvez mettre en forme le prix et d’autres valeurs. Collaborez avec vos concepteurs graphiques pour développer une interface utilisateur plus attrayante. Par exemple, incluez des images de chaque pizza.
Note
Blazor inclut d’autres directives de bouclage, telles que @for, @whileet @do while. Ces directives renvoient des blocs de balisage répétés. Ils fonctionnent de manière similaire aux boucles équivalentes C# for, while, et do...while.
Dans la leçon suivante, vous allez inscrire votre propre service de données.