Exercice - Accéder aux données d’un composant Blazor - Training

5 minutes

Les pizzas codées en dur actuelles dans l’application doivent être remplacées par une base de données. Vous pouvez utiliser Microsoft Entity Framework pour ajouter des connexions à des sources de données. Dans cette application, nous allons utiliser une base de données SQLite pour stocker les pizzas.

Dans cet exercice, vous allez ajouter des packages pour prendre en charge les fonctionnalités de base de données, connecter les classes à une base de données back-end et ajouter une classe d’assistance pour précharger des données pour les pizzas de l’entreprise.

Ajouter des packages pour prendre en charge l’accès à la base de données

Arrêtez l’application si elle est toujours en cours d’exécution.
Dans Visual Studio Code, sélectionnez Terminal>Nouveau terminal.
Dans le nouveau e terminal, définissez votre emplacement sur le répertoire BlazingPizza.
```
cd BlazingPizza
```

Exécutez les commandes suivantes pour ajouter les packages Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.Sqlite et System.Net.Http.Json :

dotnet add package Microsoft.EntityFrameworkCore --version 6.0.8
dotnet add package Microsoft.EntityFrameworkCore.Sqlite --version 6.0.8
dotnet add package System.Net.Http.Json --version 6.0.0

Ces commandes ajoutent des références de package à votre fichier BlazingPizza.csproj :

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.8" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.8" />
    <PackageReference Include="System.Net.Http.Json" Version="6.0.0" />
  </ItemGroup>

Ajouter un contexte de base de données

Dans Visual Studio Code, créez un dossier dans le dossier BlazingPizza. Nommez-le Data.
Créez un fichier dans le dossier Data. Nommez-le PizzaStoreContext.cs.

Entrez ce code pour la classe :

using Microsoft.EntityFrameworkCore;

namespace BlazingPizza.Data;

public class PizzaStoreContext : DbContext
{
    public PizzaStoreContext(DbContextOptions options) : base(options)
    {
    }

    public DbSet<PizzaSpecial> Specials { get; set; }
}

Cette classe crée un contexte de base de données que nous pouvons utiliser pour inscrire un service de base de données. Le contexte nous permet également de disposer d’un contrôleur qui accède à la base de données.

Enregistrez vos modifications.

Ajouter un contrôleur

Créez un dossier dans le dossier BlazingPizza. Nommez-le Controllers.
Créez un fichier dans le dossier Controllers. Nommez-le SpecialsController.cs.

Entrez ce code pour la classe :

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using BlazingPizza.Data;

namespace BlazingPizza.Controllers;

[Route("specials")]
[ApiController]
public class SpecialsController : Controller
{
    private readonly PizzaStoreContext _db;

    public SpecialsController(PizzaStoreContext db)
    {
        _db = db;
    }

    [HttpGet]
    public async Task<ActionResult<List<PizzaSpecial>>> GetSpecials()
    {
        return (await _db.Specials.ToListAsync()).OrderByDescending(s => s.BasePrice).ToList();
    }
}

Cette classe crée un contrôleur qui nous permettra d’interroger la base de données afin de rechercher des pizzas spéciales et de les retourner au format JSON à l’URL (http://localhost:5000/specials).

Enregistrez vos modifications.

Charger des données dans la base de données

L’application vérifie s’il existe déjà une base de données SQLite et en crée une avec quelques pizzas prédéfinies.

Créez un fichier dans le répertoire Data. Nommez-le SeedData.cs.

Entrez ce code pour la classe :

namespace BlazingPizza.Data;

public static class SeedData
{
    public static void Initialize(PizzaStoreContext db)
    {
        var specials = new PizzaSpecial[]
        {
            new PizzaSpecial()
            {
                Name = "Basic Cheese Pizza",
                Description = "It's cheesy and delicious. Why wouldn't you want one?",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/cheese.jpg",
            },
            new PizzaSpecial()
            {
                Id = 2,
                Name = "The Baconatorizor",
                Description = "It has EVERY kind of bacon",
                BasePrice = 11.99m,
                ImageUrl = "img/pizzas/bacon.jpg",
            },
            new PizzaSpecial()
            {
                Id = 3,
                Name = "Classic pepperoni",
                Description = "It's the pizza you grew up with, but Blazing hot!",
                BasePrice = 10.50m,
                ImageUrl = "img/pizzas/pepperoni.jpg",
            },
            new PizzaSpecial()
            {
                Id = 4,
                Name = "Buffalo chicken",
                Description = "Spicy chicken, hot sauce and bleu cheese, guaranteed to warm you up",
                BasePrice = 12.75m,
                ImageUrl = "img/pizzas/meaty.jpg",
            },
            new PizzaSpecial()
            {
                Id = 5,
                Name = "Mushroom Lovers",
                Description = "It has mushrooms. Isn't that obvious?",
                BasePrice = 11.00m,
                ImageUrl = "img/pizzas/mushroom.jpg",
            },
            new PizzaSpecial()
            {
                Id = 7,
                Name = "Veggie Delight",
                Description = "It's like salad, but on a pizza",
                BasePrice = 11.50m,
                ImageUrl = "img/pizzas/salad.jpg",
            },
            new PizzaSpecial()
            {
                Id = 8,
                Name = "Margherita",
                Description = "Traditional Italian pizza with tomatoes and basil",
                BasePrice = 9.99m,
                ImageUrl = "img/pizzas/margherita.jpg",
            },
        };
        db.Specials.AddRange(specials);
        db.SaveChanges();
    }
}

La classe utilise un contexte de base de données passé, crée des objets PizzaSpecial dans un tableau, puis les enregistre.

Dans l’explorateur de fichiers, sélectionnez Program.cs.
En haut, ajoutez une référence à un nouveau PizzaStoreContext :
```
using BlazingPizza.Data;
```
Cette instruction permet à l’application d’utiliser le nouveau service.

Insérez ce segment au-dessus de la méthode app.Run(); :

...
// Initialize the database
var scopeFactory = app.Services.GetRequiredService<IServiceScopeFactory>();
using (var scope = scopeFactory.CreateScope())
{
    var db = scope.ServiceProvider.GetRequiredService<PizzaStoreContext>();
    if (db.Database.EnsureCreated())
    {
        SeedData.Initialize(db);
    }
}

app.Run();

Cette modification crée une étendue de base de données avec PizzaStoreContext. Si aucune base de données n’est déjà créée, elle appelle la classe statique SeedData pour en créer une.

Pour le moment, l’application ne fonctionne pas, car nous n’avons pas initialisé le PizzaStoreContext. Dans la section supérieure Add Services to the container du fichier Program.cs, ajoutez ce code sous les services actuels (lignes qui démarrent builder.Services.) :
```
  builder.Services.AddHttpClient();
  builder.Services.AddSqlite<PizzaStoreContext>("Data Source=pizza.db");
```
Ce code inscrit deux services. La première instruction AddHttpClient permet à l’application d’accéder aux commandes HTTP. L’application utilise un HttpClient pour obtenir le JSON pour les pizzas spéciales. La seconde instruction inscrit le nouveau PizzaStoreContext et fournit le nom de fichier de la base de données SQLite.

Utiliser la base de données pour afficher les pizzas

Nous pouvons maintenant remplacer la pizza codée en dur dans la page Index.razor.

Dans l’explorateur de fichiers, sélectionnez Index.razor.
Remplacez la méthode OnInitialized() existante par :
```
protected override async Task OnInitializedAsync()
{
    specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>(NavigationManager.BaseUri + "specials");
}
```
Notes

Ce code a remplacé OnInitialized() par OnInitializedAsync(). Les pizzas spéciales sont maintenant retournées de l’application au format JSON de façon asynchrone.
Certaines erreurs doivent être corrigées. Ajoutez ces instructions @inject sous la directive @page :
```
@inject HttpClient HttpClient
@inject NavigationManager NavigationManager
```
Enregistrez toutes vos modifications, puis sélectionnez F5 ou Exécuter. Sélectionnez ensuite Démarrer le débogage.

Une erreur de runtime se produit pendant l’exécution de l’application. JsonReader a levé une exception.
N’oubliez pas que l’application doit créer le JSON à l’adresse (http://localhost:5000/specials). Accédez à cette URL.

L’application ne sait pas comment acheminer cette requête. Vous en apprendrez davantage sur le routage dans le module sur le routage Blazor. Nous allons corriger l’erreur maintenant.
Appuyez sur Maj + F5 ou sélectionnez Arrêter le débogage.
Dans l’explorateur de fichiers, sélectionnez Program.cs.

Au milieu du fichier, après les lignes qui démarrent app., ajoutez ce point de terminaison :

app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

Le code est désormais :

...
app.MapRazorPages();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
...

Appuyez sur F5 ou sélectionnez Exécuter. Sélectionnez ensuite Démarrer le débogage.

L’application doit maintenant fonctionner, mais vérifions que le JSON a été correctement créé.
Accédez à (http://localhost:5000/specials) pour voir :

Dans le JSON, les pizzas sont répertoriées par ordre décroissant du prix tel que spécifié dans le contrôleur de pizzas spéciales.

Continuer

Exercice - Accéder aux données d’un composant Blazor

Ajouter des packages pour prendre en charge l’accès à la base de données

Ajouter un contexte de base de données

Ajouter un contrôleur

Charger des données dans la base de données

Utiliser la base de données pour afficher les pizzas

Commentaires