Blazor : l'interface web en C#

<h3>@Titre</h3>
<p>Valeur actuelle : <b>@_valeur</b></p>

<button class="btn" @onclick="Incrementer" disabled="@(_valeur >= Maximum)">
    +1
</button>

@if (_valeur >= Maximum)
{
    <p class="alerte">Maximum atteint</p>
}

<ul>
@foreach (var h in _historique)
{
    <li @key="h.Id">@h.Date : @h.Valeur</li>
}
</ul>

@code {
    [Parameter] public string Titre { get; set; } = "Compteur";
    [Parameter] public int Maximum { get; set; } = 10;
    [Parameter] public EventCallback<int> OnChangement { get; set; }

    private int _valeur;
    private readonly List<Entree> _historique = [];

    private async Task Incrementer()
    {
        _valeur++;
        _historique.Add(new Entree(Guid.NewGuid(), DateTime.Now, _valeur));
        await OnChangement.InvokeAsync(_valeur);   // prévient le parent
    }

    private record Entree(Guid Id, DateTime Date, int Valeur);
}

<Compteur Titre="Paniers" Maximum="5" OnChangement="Enregistrer" />

@code {
    private void Enregistrer(int valeur) => Console.WriteLine($"nouvelle valeur : {valeur}");
}

@* Sur une page ou un composant *@
@rendermode InteractiveServer
@rendermode InteractiveWebAssembly
@rendermode InteractiveAuto
@rendermode @(new InteractiveServerRenderMode(prerender: false))   @* sans prérendu *@

@* Sur une instance précise, depuis le parent *@
<Compteur @rendermode="InteractiveServer" />

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

app.MapRazorComponents<App>()
   .AddInteractiveServerRenderMode()
   .AddInteractiveWebAssemblyRenderMode();

@implements IAsyncDisposable
@inject IJSRuntime JS

@code {
    private IJSObjectReference? _module;
    private CancellationTokenSource _cts = new();

    protected override async Task OnAfterRenderAsync(bool premierRendu)
    {
        if (!premierRendu) return;            // ← indispensable : sinon exécuté à chaque rendu
        _module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/graphique.js");
        await _module.InvokeVoidAsync("dessiner", _donnees);
    }

    public async ValueTask DisposeAsync()
    {
        _cts.Cancel();
        if (_module is not null) await _module.DisposeAsync();   // fuite mémoire sinon
    }
}

@implements IDisposable
@inject NotificationService Notifs

@code {
    private void Recevoir(string message)
    {
        _messages.Add(message);
        StateHasChanged();          // ← sans cela, rien ne bouge à l'écran
    }

    // Si l'événement vient d'un autre thread (timer, SignalR), il faut revenir
    // sur le fil de rendu du composant :
    private void RecevoirDepuisAilleurs(string m) =>
        InvokeAsync(() => { _messages.Add(m); StateHasChanged(); });

    protected override void OnInitialized() => Notifs.Recu += Recevoir;
    public void Dispose() => Notifs.Recu -= Recevoir;      // ← toujours
}

@rendermode InteractiveServer

<EditForm Model="_modele" OnValidSubmit="Envoyer" FormName="inscription">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>Nom
        <InputText @bind-Value="_modele.Nom" class="champ" />
        <ValidationMessage For="() => _modele.Nom" />
    </label>

    <label>Email       <InputText @bind-Value="_modele.Email" type="email" /></label>
    <label>Naissance   <InputDate @bind-Value="_modele.Naissance" /></label>
    <label>Catégorie   <InputSelect @bind-Value="_modele.Categorie">
        @foreach (var c in Enum.GetValues<Categorie>())
        {
            <option value="@c">@c</option>
        }
    </InputSelect></label>
    <label><InputCheckbox @bind-Value="_modele.Conditions" /> J'accepte</label>

    <button type="submit" disabled="@_envoi">@(_envoi ? "Envoi…" : "S'inscrire")</button>
</EditForm>

@code {
    [SupplyParameterFromForm] private Inscription _modele { get; set; } = new();
    private bool _envoi;

    private async Task Envoyer()
    {
        _envoi = true;
        try { await Service.InscrireAsync(_modele); }
        finally { _envoi = false; }
    }

    public class Inscription
    {
        [Required(ErrorMessage = "Le nom est obligatoire")]
        [StringLength(80, MinimumLength = 2)]
        public string Nom { get; set; } = "";

        [Required, EmailAddress] public string Email { get; set; } = "";
        public DateOnly Naissance { get; set; }
        public Categorie Categorie { get; set; }
        [Range(typeof(bool), "true", "true", ErrorMessage = "Acceptation requise")]
        public bool Conditions { get; set; }
    }
}

@* Longue liste : ne rend que ce qui est visible *@
<Virtualize Items="_produits" Context="p" ItemSize="42" OverscanCount="4" InitialIndex="500">
    <div class="ligne">@p.Nom — @p.Prix.ToString("C")</div>
</Virtualize>

@* Tableau avec tri et pagination *@
<QuickGrid Items="_requete" Pagination="_pagination" RowClass="@(p => p.Stock == 0 ? "rupture" : null)">
    <PropertyColumn Property="p => p.Nom" Sortable="true" />
    <PropertyColumn Property="p => p.Prix" Format="C" Align="Align.Right" />
    <TemplateColumn Title="Actions">
        <button @onclick="() => Modifier(context.Id)">Éditer</button>
    </TemplateColumn>
</QuickGrid>
<Paginator State="_pagination" />

@* Affichage conditionné aux droits *@
<AuthorizeView Roles="admin">
    <Authorized><button @onclick="Supprimer">Supprimer</button></Authorized>
    <NotAuthorized><p>Réservé aux administrateurs</p></NotAuthorized>
</AuthorizeView>

@* Rendu progressif : la page part tout de suite, les données arrivent ensuite *@
@attribute [StreamRendering]

@page "/produits"
@page "/produits/{Id:int}"                @* deux routes pour le même composant *@
@page "/catalogue/{*chemin}"              @* capture le reste du chemin *@

@inject NavigationManager Nav

@code {
    [Parameter] public int? Id { get; set; }
    [SupplyParameterFromQuery] public string? Recherche { get; set; }   // ?recherche=clavier

    private void Aller() => Nav.NavigateTo($"/produits/{42}");
    private void Remplacer() => Nav.NavigateTo("/accueil", replace: true);
    private void Forcer() => Nav.NavigateTo("/produits", forceLoad: true);   // rechargement complet

    // Recharger quand le paramètre de route change (le composant, lui, n'est pas recréé)
    protected override async Task OnParametersSetAsync() => await ChargerAsync(Id);
}

// C# → JS
await JS.InvokeVoidAsync("localStorage.setItem", "theme", "sombre");
var largeur = await JS.InvokeAsync<int>("eval", "window.innerWidth");   // à éviter : préfère un module

// Module ES6 isolé (la bonne pratique)
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/carte.js");
await module.InvokeVoidAsync("initialiser", "carte", 48.85, 2.35);

// JS → C# : passer une référence d'objet .NET
var reference = DotNetObjectReference.Create(this);
await module.InvokeVoidAsync("surClicCarte", reference);

[JSInvokable]
public void PointChoisi(double lat, double lon)
{
    _position = (lat, lon);
    StateHasChanged();
}
// ⚠️ reference.Dispose() dans DisposeAsync, sinon fuite mémoire côté .NET