Funzionamento di Blazor

Completato

Blazor offre molte funzionalità che consentono di iniziare e distribuire rapidamente il prossimo progetto di app Web. Di seguito vengono descritte le funzionalità principali di Blazor per decidere se usare Blazor per la prossima app Web.

Componenti di Blazor

Le app Blazor vengono create dai componenti. Un componente Blazor è un elemento riutilizzabile dell'interfaccia utente Web. Un componente Blazor incapsula sia la logica di rendering che di gestione degli eventi dell'interfaccia utente. Blazor include vari componenti predefiniti per la gestione dei moduli, la convalida dell'input dell'utente, la visualizzazione di set di dati di grandi dimensioni, l'autenticazione e l'autorizzazione. Gli sviluppatori possono anche creare e condividere i propri componenti personalizzati e molti componenti Blazor predefiniti sono disponibili nell'ecosistema Blazor.

Usare tecnologie Web standard

È possibile creare componenti Blazor usando la sintassi Razor, una combinazione utile di HTML, CSS e C#. Un file Razor contiene codice HTML normale e quindi codice C# per definire qualsiasi logica di rendering, come istruzioni condizionali, flusso di controllo e valutazione delle espressioni. I file Razor vengono quindi compilati in classi C# che incapsulano la logica di rendering del componente. Poiché i componenti Blazor creati in Razor sono solo classi C#, è possibile chiamare codice .NET arbitrario dai componenti.

Gestione degli eventi dell'interfaccia utente e data binding

I componenti Blazor interattivi possono gestire le interazioni standard dell'interfaccia utente Web usando i gestori dell'evento C#. I componenti possono aggiornare il proprio stato in risposta agli eventi dell'interfaccia utente e modificare il rendering di conseguenza. Blazor include anche il supporto per il data binding bidirezionale agli elementi dell'interfaccia utente come modo per mantenere sincronizzato lo stato dei componenti con gli elementi dell'interfaccia utente.

Di seguito è riportato un esempio di un semplice componente contatore Blazor implementato in Razor. La maggior parte del contenuto è HTML, mentre il blocco @code contiene C#. Ogni volta che viene premuto il pulsante, viene richiamato il metodo C# IncrementCount, che incrementa il campo currentCount e quindi il componente esegue il rendering del valore aggiornato:

<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++;
    }
}

Rendering lato server e lato client

Blazor supporta il rendering lato server e lato client dei componenti per gestire varie architetture dell'interfaccia utente Web. I componenti sottoposti a rendering dal server possono accedere alle risorse del server, ad esempio database e servizi back-end. Per impostazione predefinita, il rendering dei componenti Blazor viene eseguito in modo statico dal server, generando codice HTML in risposta alle richieste.

È anche possibile configurare i componenti del server in modo che siano interattivi, così da poter gestire eventi arbitrari dell'interfaccia utente, mantenere lo stato tra le interazioni ed eseguire il rendering degli aggiornamenti in modo dinamico. I componenti server interattivi gestiscono interazioni e aggiornamenti dell'interfaccia utente tramite una connessione WebSocket con il browser.

In alternativa, il rendering dei componenti Blazor può essere eseguito in modo interattivo dal client. Il componente viene scaricato nel client ed eseguito dal browser tramite WebAssembly. I componenti WebAssembly interattivi possono accedere alle risorse client tramite la piattaforma Web, ad esempio l'archiviazione locale e l'hardware, e possono anche funzionare offline dopo il download.

È possibile scegliere di eseguire il rendering di componenti diversi dal server o dal client all'interno della stessa app. Molte delle pagine nell'app potrebbero non richiedere alcuna interattività e possono essere sottoposte a rendering statico dal server, mentre altre parti più interattive dell'app possono essere gestite dal server o dal client. È possibile decidere quale modalità di rendering del componente usare in fase di progettazione o runtime. Con Blazor è possibile creare l'architettura dell'app Web più adatta allo scenario.

Uso di Blazor per creare una pizzeria

L'interfaccia utente dell'app per la pizzeria è suddivisa in molti componenti riutilizzabili: un layout di pagina con una barra di spostamento, singole pagine, un catalogo e un editor di pizze, un componente per gli ordini e così via. Blazor offre un supporto integrato per molti di questi componenti, ad esempio i componenti per i moduli e la convalida. Molte delle pagine nell'app possono essere gestite dal server usando il rendering statico lato server in modo che il sito sia principalmente senza stato e pronto per la scalabilità. Se è necessaria un'maggiore interattività, i componenti vengono resi interattivi applicando una modalità di rendering interattiva. Per eseguire l'offload del lavoro dal server, il rendering dei componenti interattivi viene eseguito sul client tramite WebAssembly. Creando l'intera app con un singolo stack di sviluppo Web, l'app si integra rapidamente e presto iniziano ad arrivare gli ordini di pizza.

Continua