Créez votre première application web avec ASP.NET Core à l’aide de Blazor

Windows Linux macOS

Essayez le compteur

Dans l'application en cours d'exécution, accédez à la page Compteur en cliquant sur l'onglet Compteur dans la barre latérale à gauche. La page suivante devrait alors s'afficher :

La page du compteur présente un bouton cliquez ici pour augmenter le nombre d’éléments montrés sur la page.

Sélectionnez le bouton Cliquez-moi pour augmenter le nombre sans rafraîchir la page. L'incrémentation d'un compteur dans une page Web nécessite normalement l'écriture de JavaScript, mais avec Blazor, vous pouvez utiliser C#.

Vous trouverez l’implémentation du composant Counter dans le fichier Counter.razor situé dans le répertoire Components/Pages.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Une requête pour /counter dans le navigateur, comme spécifié par la directive @page en haut, amène le composant Counter à restituer son contenu. La directive @rendermode active le rendu interactif du serveur pour le composant, afin qu’il puisse gérer les événements d’interface utilisateur à partir du navigateur.

Chaque fois que le bouton Cliquez-moi est sélectionné :

  • L’événement onclick est déclenché.
  • La méthode IncrementCount est appelée.
  • Le currentCount est incrémenté.
  • Le composant est affiché pour afficher le nombre mis à jour.
Continuer