ASP .NET Core MVC – Créer une application Blazor consommant un service WebApi

Pré-requis
Pour créer une application avec Blazor consommant un service WebApi, les logiciels et composants nécessaires sont les suivants :

  • .NET Core 2.1 SDK
  • Visual Studio 2017 (version 15.9 ou ultérieure)
  • Blazor Language Services extension (ASP .NET Core Blazor Language Services)
  • Les templates Blazor (télécharger ici)

Le projet de cet article a été réalisé avec la version 0.7 de Blazor.

Mise en oeuvre
Dans cet article, nous allons créer une page qui affiche des informations sur des formations. Les données sur les formations seront communiquées par un service implémenté avec WebApi.
Dans cette application, l’application « cliente » devra partager du code avec l’application « serveur ». Ainsi, ce code pourra s’exécuter aussi bien côté client, que côté serveur.
Nous créerons donc 3 projets, dont les références sont indiquées par des flèches vertes ci-dessous :

Le projet LearningCompany.Server est une application ASP .NET Core MVC vide.
Le projet LearningCompany.Client est une application Blazor. Dans ce projet, ajouter le package NuGet Microsoft.AspNetCore.Blazor.Server.
Le projet LearningCompany.Shared est une bibliothèque de classe ciblant le Framework .NET Standard (version 2.0.3).

Code partagé
Dans le projet LearningCompany.Shared, créons une classe nommée Formation. Elle permettra à l’application « server » de retourner des informations sur des formations à l’application « cliente ». Voici son implémentation :

public class Formation
{
    public string Libelle { get; set; }
    public byte NombreJours { get; set; }

    // Nécessaire pour le parsing côté client.
    public Formation()
    {

    }

    public Formation(string aLibelle, byte aNombreJours)
    {
        this.Libelle = aLibelle;
        this.NombreJours = aNombreJours;
    }
}

Implémentation de l’application « serveur »
Commençons par créer un service avec WebApi. Dans l’application « serveur », ajouter un « contrôleur d’API vide » nommé Learning. Voici son implémentation :

[Route("api/[controller]")]
[ApiController]
public class LearningController : Controller
{
    [HttpGet("[action]")]
    public IEnumerable<Formation> GetListeFormations()
    {
        return new List<Formation>()
        {
            new Formation("Langage C#", 5),
            new Formation("Application Web avec ASP .NET Core MVC et C#", 5),
            new Formation("Vue d'ensemble de .NET Core", 1),
            new Formation("Windows Presentation Foundation", 5),
            new Formation("Créer des pages Web avec HTML, CSS et JavaScript", 3),
            new Formation("Implémenter des services REST avec WebApi", 2)
        };
    }
}

Lorsque ce contrôleur est exécuté suite à la réception d’une requête de type HTTP Get sans paramètre, il retourne une liste de formations.

Puis, modifions la classe StartUp. La méthode ConfigureServices active le service MVC et la compression des réponses HTTP :

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc();

    services.AddResponseCompression(options =>
    {
        options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
        {
            MediaTypeNames.Application.Octet,
            WasmMediaTypeNames.Application.Wasm,
        });
    });
}

Et la méthode Configure pour ajouter des middlewares :

  • Pour activer la compression du flux retourné à l’application cliente
  • Pour activer le routage des requêtes vers les actions des contrôleurs
  • Pour activer Blazor et indiquer l’application à utiliser
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseMvc(routes =>
    {
        routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
    });

    app.UseBlazor<Client.Startup>();
}

Implémentation de l’application « cliente »
Ajouter une page Razor nommée ListeFormations.cshtml. Voici son implémentation :

@using LearningCompany.Shared
@page "/ListeFormations"
@inject HttpClient Http

<h1>Liste des formations</h1>

@if (ListeDataFormations == null)
{
    <p><em>Chargement des données...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Libellé</th>
                <th style="text-align:center;">Durée (jours)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Formation formation in ListeDataFormations)
            {
                <tr>
                    <td>@formation.Libelle</td>
                    <td style="text-align:center;">@formation.NombreJours</td>
                </tr>
            }
        </tbody>
    </table>
}

@functions {
    Formation[] ListeDataFormations;

    protected override async Task OnInitAsync()
    {
        ListeDataFormations = await Http.GetJsonAsync<Formation[]>("api/Learning/GetListeFormations");
    }
}

La méthode OnInitAsync envoie une requête HTTP Get à l’application « serveur » pour consommer le service REST et obtenir la liste des formations. Le code Razor de cette page permet d’afficher les informations obtenues.

Dans le menu NavMenu.cshtml, ajouter un élément permettant d’accéder au menu :

<li class="nav-item px-3">
    <NavLink class="nav-link" href="ListeFormations">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Formations
    </NavLink>
</li>

Exécution de l’application
Voici le résultat :

About: James RAVAILLE

Travaillant avec la plateforme Microsoft .NET depuis 2002, j’alterne les missions de formation et d’ingénierie avec cette plateforme. J’écris ce blog pour transmettre mes connaissances à tout développeur, qu’il soit débutant ou expérimenté.