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

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 utilisons une base de données SQLite pour stocker les pizzas.

Dans cet exercice, vous ajoutez 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 qui prennent 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>New Terminal.
Dans le nouveau terminal, définissez votre emplacement sur le répertoire BlazingPizza .
```
cd BlazingPizza
```

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

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

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

  <ItemGroup>
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="9.0.0-*" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.0-*" />
    <PackageReference Include="System.Net.Http.Json" Version="9.0.0-*" />
  </ItemGroup>

Ajouter un contexte de base de données

Dans Visual Studio Code, créez un dossier dans le dossier BlazingPizza . Nommez-les données.
Dans le dossier Données , créez un fichier nommé PizzaStoreContext.cs.
Dans le nouveau fichier, 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 d’avoir un contrôleur qui accède à la base de données.
Enregistrez vos modifications avec Ctrl+S.

Ajout d'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 permet d’interroger la base de données pour obtenir des spéciaux de pizza et de les retourner en tant que 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 une base de données SQLite existante et en crée une avec des pizzas prédéfinies.

Créez un fichier dans le répertoire de données . 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 PizzaSpecial objets 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 app.Run(); méthode :

// 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 le PizzaStoreContext. S’il n’existe pas de base de données déjà créée, elle appelle la SeedData classe statique pour en créer une.

À l’heure actuelle, l’application ne fonctionne pas, car elle PizzaStoreContext n’est pas encore initialisée. Dans le 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 AddHttpClient instruction permet à l’application d’accéder aux commandes HTTP. L’application utilise un HttpClient pour obtenir le JSON pour les offres spéciales de pizza. La deuxième instruction inscrit le nouveau PizzaStoreContext fichier et fournit le nom de fichier de la base de données SQLite.

Utiliser la base de données pour afficher des pizzas

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

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

Ce code remplace OnInitialized() par OnInitializedAsync(). Les fonctionnalités spéciales seront désormais renvoyées au format JSON depuis l'application de façon asynchrone.
Il existe certaines erreurs que vous devez corriger. Ajoutez ces @inject instructions sous la @page directive :
```
@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 d’exécution s’affiche lorsque vous exécutez l’application. JsonReader a déclenché une exception.
N’oubliez pas que l’application doit créer JSON à l’adresse (http://localhost:5000/specials). Accédez à cette URL.

L’application ne sait pas comment acheminer cette requête. Vous découvrez le routage dans le module consacré au routage Blazor. Nous allons corriger l’erreur maintenant.
Sélectionnez 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 doit maintenant être :

...
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 est créé correctement.
Accédez à (http://localhost:5000/specials) pour voir :

Le JSON contient les pizzas répertoriées dans l'ordre décroissant de prix, comme spécifié dans le contrôleur spécial pour les pizzas.

Rétroaction

Cette page vous a-t-elle été utile ?