Crea la tua prima app Web con ASP.NET Core usando Blazor

Windows Linux macOS

Prova il contatore

Nell'app in esecuzione passare alla pagina Contatore facendo clic sulla scheda Contatore nella barra laterale a sinistra. Dovrebbe essere quindi visualizzata la pagina seguente:

La pagina Contatore include un pulsante Fare clic qui per incrementare il numero mostrato nella pagina.

Seleziona il pulsante Cliccami per incrementare il conteggio senza aggiornare la pagina. L'incremento di un contatore in una pagina Web richiede in genere la scrittura di JavaScript, ma con Blazor puoi usare C#.

L'implementazione del componente Counter è disponibile nel file Counter.razor, all'interno della directory 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++;
    }
}

Una richiesta di /counter nel browser, come specificato dalla direttiva @page nella parte superiore, fa in modo che il componente Counter esegua il rendering del rispettivo contenuto. La direttiva @rendermode abilita il rendering interattivo del server per il componente, in modo che possa gestire gli eventi dell'interfaccia utente dal browser.

Ogni volta che viene selezionato il pulsante Fare clic qui:

  • L'evento onclick viene generato.
  • Viene chiamato il metodo IncrementCount.
  • Il currentCount è incrementato.
  • Viene eseguito il rendering del componente per visualizzare il conteggio aggiornato.
Continua