Chapitre 3 : Architecture Blazor Web App (.NET 10)

Module : Programmation .Net C#

Niveau : 4ème Génie Informatique (Spécialité Data Science)

Prérequis : TP 3 validé (Première application Blazor)

Introduction

Dans le TP 3, vous avez abandonné l'austère console noire pour le monde coloré du Web. Vous avez créé une application interactive avec le modèle Blazor Web App de .NET 10. Ce modèle moderne unifie la flexibilité du Web et la puissance de C#. Ce chapitre dévoile ce qui se passe réellement "sous le capot" lorsque vous activez l'interactivité.

I. Architecture : Le Modèle Unifié de .NET 10

Depuis .NET 8 (et confirmé en .NET 10), Microsoft a introduit le concept de "Blazor Web App". Ce modèle est hybride et flexible.

1. Les Modes de Rendu (Render Modes)

Une page Blazor peut être rendue de plusieurs façons. C'est le développeur qui choisit :

Static Server (SSR) - Par défaut : La page est générée 100% côté serveur (comme du PHP). Rapide, bon pour le SEO, mais pas d'interactivité (les boutons ne marchent pas).
Interactive Server (Celui du TP) : La page devient vivante. Un canal SignalR (WebSocket) est ouvert. Le code C# tourne sur le serveur et pilote le navigateur à distance.
Interactive WebAssembly : Le code C# (DLL) est téléchargé et tourne dans le navigateur du client.

2. Focus sur le mode "Interactive Server" (TP3)

C'est le mode que nous avons utilisé pour avoir l'effet "Temps Réel". Voici son architecture :

Figure 1 : L'architecture Interactive Server

3. Le concept de SPA (Single Page Application)

En mode interactif, la page ne se recharge jamais entièrement (pas de F5). SignalR envoie juste les petits morceaux de HTML qui ont changé. C'est ce qui donne cette fluidité.

II. Structure d'un Projet Blazor

Lorsque vous créez un nouveau projet, vous obtenez une structure standardisée. Voici les fichiers primordiaux :

Fichier / Dossier	Rôle Principal
`Program.cs`	Le Chef d'Orchestre. C'est le point d'entrée. Il configure le serveur Web, l'injection de dépendances (Services) et lance l'application.
`App.razor`	La Racine. Le composant parent de toute l'application. Il contient la structure HTML de base (`<html>`, `<body>`) et charge les scripts Blazor.
`Routes.razor`	Le Router. Il analyse l'URL demandée et décide quel composant afficher. Si l'URL n'existe pas, il affiche un message "Not Found".
`_Imports.razor`	Les Usings Globaux. Tous les `using` déclarés ici sont automatiquement disponibles dans tous les composants `.razor` du dossier. Évite de répéter `@using` partout.
`Components/Pages/`	Vos Pages. C'est ici que vous créez vos vues (ex: `Home.razor`, `Counter.razor`). Chaque fichier avec `@page` devient une route.
`wwwroot/`	Le Statique. Contient les fichiers CSS, JavaScript, images et polices qui sont envoyés directement au navigateur.

III. La Syntaxe Razor : Mariage du HTML et du C#

Les fichiers .razor mélangent balises HTML et logique C#. Le caractère magique est l'arobase @.

1. Les Directives de Base

Directive	Description
`@page "/url"`	Définit la route (URL) pour accéder à ce composant.
`@using`	Importe des namespaces (comme dans un fichier .cs).
`@code { ... }`	Bloc contenant la logique C# (variables, méthodes).

2. Logique dans la Vue (Vu dans l'Activité 2)

Vous pouvez utiliser des structures de contrôle C# directement dans le HTML :

<p>
    Statut : 
    @if (IsSystemOK) 
    {
        <span class="text-success">OK</span>
    }
    else
    {
        <span class="text-danger">ERREUR</span>
    }
</p>

IV. Interactivité : Data Binding & Événements

C'est ici que Blazor remplace JavaScript. Nous lions l'interface utilisateur (UI) aux variables C#.

1. Binding d'Événement (`@onclick`)

Utilisé pour réagir aux actions de l'utilisateur.

<button @onclick="RefreshSystem">Actualiser</button>

@code {
    void RefreshSystem() {
        // Code exécuté sur le serveur !
    }
}

2. Binding de Donnée (`@bind`) - Vu dans l'Exercice 1

Le Two-Way Binding (liaison bidirectionnelle) permet de synchroniser une variable et un champ de saisie en temps réel.

Si l'utilisateur tape dans l'input → La variable C# change.
Si le code change la variable → L'input se met à jour.

// Lien direct entre l'input HTML et la variable C# Temperature
<input @bind="Temperature" />

<p>Vous avez saisi : @Temperature</p>

@code {
    private string Temperature = "0";
}

V. Bonnes Pratiques & Architecture

Même si Blazor est puissant, ne mettez pas tout votre code dans le fichier .razor.

Modèles : Créez des classes C# (comme `SensorData.cs` dans l'Activité 5) pour structurer vos données.
Services : La logique métier complexe (accès BDD, calculs lourds) doit être déportée dans des classes de Service injectables (ce sera le sujet du TP 4).

Chapter 3: Blazor Web App Architecture (.NET 10)

Module: .Net C# Programming

Level: 4th Year Computer Engineering (Data Science Specialty)

Prerequisite: LAB 3 Validated (First Blazor App)

Introduction

In LAB 3, you moved from the austere black console to the colorful world of the Web. You created an interactive application using the Blazor Web App model from .NET 10. This modern model unifies Web flexibility with C# power. This chapter reveals what really happens "under the hood" when you enable interactivity.

I. Architecture: The .NET 10 Unified Model

Since .NET 8 (and confirmed in .NET 10), Microsoft introduced the "Blazor Web App" concept. It is hybrid and flexible.

1. Render Modes

A Blazor page can be rendered in several ways. The developer chooses:

Static Server (SSR) - Default: The page is 100% server-generated (like PHP). Fast, good SEO, but no interactivity (buttons don't work).
Interactive Server (Used in LAB): The page comes alive. A SignalR channel (WebSocket) opens. C# code runs on the server and drives the browser remotely.
Interactive WebAssembly: C# code (DLL) downloads and runs inside the client browser.

2. Focus on "Interactive Server" Mode (TP3)

This is the mode we used to achieve the "Real-Time" effect. Here is its architecture:

Figure 1: Interactive Server Architecture

3. The "Single Page Application" (SPA) Concept

In interactive mode, the page never fully reloads (no F5). SignalR sends only the small HTML chunks that changed. This provides the smoothness.

II. Blazor Project Structure

When you create a new project, you get a standardized structure. Here are the essential files:

File / Folder	Main Role
`Program.cs`	The Conductor. The entry point. Configures the Web server, Dependency Injection (Services), and starts the app.
`App.razor`	The Root. The parent component of the entire app. It contains the basic HTML structure (`<html>`, `<body>`) and loads Blazor scripts.
`Routes.razor`	The Router. Analyzes the requested URL and decides which component to display. If the URL doesn't exist, it shows a "Not Found" message.
`_Imports.razor`	Global Usings. All `using` statements declared here are automatically available in all `.razor` components within the folder. Avoids repeating `@using` everywhere.
`Components/Pages/`	Your Pages. This is where you create your views (e.g., `Home.razor`, `Counter.razor`). Each file with `@page` becomes a route.
`wwwroot/`	Static Assets. Contains CSS, JavaScript, images, and fonts that are served directly to the browser.

III. Razor Syntax: The Marriage of HTML and C#

.razor files mix HTML tags and C# logic. The magic character is the at-symbol @.

1. Basic Directives

Directive	Description
`@page "/url"`	Defines the URL route to access this component.
`@using`	Imports namespaces (like in a .cs file).
`@code { ... }`	Block containing C# logic (variables, methods).

2. Logic in the View (Seen in Activity 2)

You can use C# control structures directly within HTML:

<p>
    Status : 
    @if (IsSystemOK) 
    {
        <span class="text-success">OK</span>
    }
    else
    {
        <span class="text-danger">ERROR</span>
    }
</p>

IV. Interactivity: Data Binding & Events

This is where Blazor replaces JavaScript. We bind the user interface (UI) to C# variables.

1. Event Binding (`@onclick`)

Used to react to user actions.

<button @onclick="RefreshSystem">Refresh</button>

@code {
    void RefreshSystem() {
        // Code executed on the server!
    }
}

2. Data Binding (`@bind`) - Seen in Exercise 1

Two-Way Binding allows synchronizing a variable and an input field in real-time.

If user types in input → C# variable changes.
If code changes variable → Input updates.

// Direct link between HTML input and C# variable Temperature
<input @bind="Temperature" />

<p>You typed: @Temperature</p>

@code {
    private string Temperature = "0";
}

V. Best Practices & Architecture

Even though Blazor is powerful, don't put all your code in the .razor file.

Models: Create C# classes (like `SensorData.cs` in Activity 5) to structure your data.
Services: Complex business logic (DB access, heavy calculations) should be moved to injectable Service classes (this will be the topic of LAB 4).

Chapitre 3 : Architecture Blazor Web App (.NET 10)

Introduction

I. Architecture : Le Modèle Unifié de .NET 10

1. Les Modes de Rendu (Render Modes)

2. Focus sur le mode "Interactive Server" (TP3)

3. Le concept de SPA (Single Page Application)

II. Structure d'un Projet Blazor

III. La Syntaxe Razor : Mariage du HTML et du C#

1. Les Directives de Base

2. Logique dans la Vue (Vu dans l'Activité 2)

IV. Interactivité : Data Binding & Événements

1. Binding d'Événement (`@onclick`)

2. Binding de Donnée (`@bind`) - Vu dans l'Exercice 1

V. Bonnes Pratiques & Architecture

Chapter 3: Blazor Web App Architecture (.NET 10)

Introduction

I. Architecture: The .NET 10 Unified Model

1. Render Modes

2. Focus on "Interactive Server" Mode (TP3)

3. The "Single Page Application" (SPA) Concept

II. Blazor Project Structure

III. Razor Syntax: The Marriage of HTML and C#

1. Basic Directives

2. Logic in the View (Seen in Activity 2)

IV. Interactivity: Data Binding & Events

1. Event Binding (`@onclick`)

2. Data Binding (`@bind`) - Seen in Exercise 1

V. Best Practices & Architecture

🎙️ Sélectionner une voix

🎙️ Select a voice