Aller au contenu principal

23-3 Décortiquer le projet Blazor (Admin)

Le projet client Blazor est un projet, comme son nom l'indique, purement client. On peut faire un comparatif assez direct avec un projet Angular ou Vue, comme vu en Web 2/3.

Ce projet n'a accès qu'au navigateur de l'utilisateur, il n'a pas de "connaissance" du serveur et de son contexte.

Si ce projet veut accéder d'une façon ou d'une autre à de l'information stockée au niveau du serveur, cette communication doit se faire par API.

Le projet Blazor est ensuite responsable de traiter la réponse JSON et de modifier l'interface (HTML) en conséquence.

Structure de dossiers et fichiers​

Voici la description des dossiers de base que vous observerez dans votre projet Blazor:

  1. wwwroot: Ce dossier contient les fichiers statiques de l'application, tels que les images, les fichiers CSS et les scripts JavaScript. Ces fichiers sont servis directement par le serveur Web lorsqu'ils sont demandés par le navigateur. Le dossier wwwroot comprend également un fichier index.html qui est la page d'entrée de l'application.

  2. Pages: Ce dossier contient les composants Razor qui représentent les différentes pages de l'application. Les composants Razor sont des fichiers avec l'extension .razor qui combinent le balisage HTML et le code C# pour définir des vues interactives. Les fichiers de ce dossier sont généralement mappés aux routes de l'application en fonction de leur nom et de l'utilisation de la directive @page.

  3. Shared/components (facultatif): Le dossier Shared contient les composants Razor réutilisables qui peuvent être inclus dans plusieurs pages ou d'autres composants de l'application. Ces composants peuvent inclure des éléments tels que des en-têtes, des pieds de page, des menus de navigation ou d'autres éléments d'interface utilisateur partagés.

  4. Services (facultatif): Ce dossier peut être ajouté pour stocker les services C# qui fournissent des fonctionnalités spécifiques, telles que la communication avec des API externes, la gestion de l'état ou d'autres tâches. Les services peuvent être injectés dans les composants Razor à l'aide du système d'injection de dépendances.

  5. App.razor: Ce fichier est le composant racine de l'application Blazor. Il définit généralement le routage et les dispositions principales de l'application.

  6. Layout/MainLayout.razor: Ce fichier représente la mise en page principale de l'application. Il définit la structure de base de la page, y compris les en-têtes, les pieds de page, les menus de navigation et les zones de contenu. Les autres composants de l'application, tels que les pages, sont insérés dans cette mise en page. Ce fichier est utilisé par App.razor.

  7. _Imports.razor: Ce fichier contient les déclarations using globales pour les espaces de noms utilisés dans les composants Razor de l'application. Les déclarations dans ce fichier sont automatiquement disponibles pour tous les composants Razor, évitant ainsi la nécessité de les déclarer individuellement dans chaque composante.

  8. Program.cs: Ce fichier contient le point d'entrée de l'application Blazor WebAssembly. Il configure et lance l'hôte Blazor, enregistre les services et charge les composants requis pour démarrer l'application.

Les principaux fichiers en détail​

Program.cs​

Ce fichier contient le point d'entrée de l'application Blazor WebAssembly. Il configure et lance l'hôte Blazor, enregistre les services et charge les composants requis pour démarrer l'application.

Snowfall.Web.Admin/Program.cs
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Snowfall.Web.ClientAdmin;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();
info
  • builder.RootComponents.Add<App>("#app");: défini comme composante racine le div avec le id app dans index.html. C'est la prochaine étape.
  • builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });: ajoute à l'injection de dépendance un client HTTP que nous pourrons utiliser pour faire des requêtes d'API ayant comme URL de base la même adresse que le client Blazor.

index.html​

Tout commence par un fichier index.html dans le dossier wwwroot du projet Admin. C'est la page d'entrée de l'application.

Snowfall.Web.Admin/wwwroot/index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snowfall.Web.Admin</title>
    <base href="/" />
    <link rel="stylesheet" href="css/app.css" />
    <!-- If you add any scoped CSS files, uncomment the following to load them
    <link href="Snowfall.Web.Admin.styles.css" rel="stylesheet" /> -->
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
info

Les deux lignes importantes dans ce fichier sont celles en surbrillance:

  • <div id="app">...</div>: il s'agit de la portion "dynamique". C'est ce div qui contiendra le contenu affiché par l'application. Pour un parallèle Angular, il s'agit de la composante racine.
  • <script src="_framework/blazor.webassembly.js"></script>: fichier JavaScript responsable de démarrer le client Blazor, les dépendances, etc.

App.razor​

Ce fichier est le composant racine de l'application Blazor. Il définit généralement le routage et les dispositions principales de l'application.

Snowfall.Web.Admin/App.razor
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
info
  • <Found Context="routeData">: dans le cas où la route est "trouvée" et valide, charge la vue/page associée avec comme layout MainLayout. C'est la ligne suivante qui précise cet aspect: <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
  • <NotFound>: défini le comportement si la route n'est pas valide (not found)

MainLayout.razor​

Ce fichier représente la mise en page principale de l'application. Il définit la structure de base de la page, y compris les en-têtes, les pieds de page, les menus de navigation et les zones de contenu. Les autres composants de l'application, tels que les pages, sont insérés dans cette mise en page. Il est utilisé par App.razor.

Snowfall.Web.Admin/Layout/MainLayout.razor
@inherits LayoutComponentBase

@Body
info

@Bodyindique où dans le gabarit le contenu doit être généré/affiché.

Pages/Home.razor​

Finalement, on arrive à la page d'accueil qui affiche Hello, world!.

Snowfall.Web.Admin/Pages/Home.razor
@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Le code vous semblera familier avec l'utilisation du @ puisqu'il s'agit ici de code Razor, soit le même système de gabarit que dans le projet MVC.

La directive @page "/" signifie que cette page répondra au chemin d'accès /, soit la racine de l'application.

info

La page est au fond un composant. Tout comme dans Angular, parfois nous utilisions des composants pour créer une page, alors qu'à d'autres moments les composants étaient utilisés pour des éléments visuels bien précis (ex.: barre de navigation).