Creare un'interfaccia utente con i componenti Blazor

Completato

I componenti Blazor consentono di definire pagine Web o parti di HTML che includono contenuto dinamico usando il codice .NET. In Blazor è possibile formulare contenuto dinamico usando C#, invece di usare JavaScript.

Si supponga di lavorare per una società di consegna di pizze per creare un nuovo sito Web moderno. Si inizia con una pagina di benvenuto che diventerà la pagina di destinazione per la maggior parte degli utenti del sito. Vuoi visualizzare offerte speciali e pizze popolari in quella pagina.

In questa unità si apprenderà come creare componenti in Blazor e scrivere codice che esegue il rendering del contenuto dinamico su tali componenti.

Comprendere i componenti Blazor

Blazor è un framework che gli sviluppatori possono usare per creare un'interfaccia utente interattiva avanzata scrivendo codice C#. Con Blazor è possibile usare la stessa lingua per tutto il codice, sia sul lato server che sul lato client. È possibile eseguirne il rendering per la visualizzazione in molti browser diversi, inclusi i browser nei dispositivi mobili.

Note

Esistono due modelli di hosting per il codice nelle app Blazor:

• Blazor Server: in questo modello l'app viene eseguita nel server Web all'interno di un'app ASP.NET Core. Sul lato client, gli aggiornamenti dell'interfaccia utente, gli eventi e le chiamate JavaScript vengono inviati tramite una connessione SignalR tra il client e il server. In questo modulo discutiamo e scriviamo il codice per questo modello.
• Blazor WebAssembly: in questo modello, l'app Blazor, le relative dipendenze e il runtime .NET vengono scaricati ed eseguiti nel browser.

In Blazor si compila l'interfaccia utente da parti autonome di codice denominate componenti. Ogni componente può contenere una combinazione di codice HTML e C#. I componenti vengono scritti usando la sintassi Razor, in cui il codice è contrassegnato con la @code direttiva . È possibile usare altre direttive per accedere alle variabili, associare ai valori e ottenere altre attività di rendering. Quando l'app viene compilata, il codice HTML e il codice vengono compilati in una classe componente. I componenti vengono scritti come file con un'estensione .razor .

Note

La sintassi Razor viene usata per incorporare il codice .NET nelle pagine Web. È possibile usarlo nelle applicazioni ASP.NET MVC (Model-View-Controller) in cui i file hanno un'estensione .cshtml . La sintassi Razor viene usata in Blazor per scrivere componenti. Questi componenti hanno invece l'estensione .razor e non esiste una separazione rigorosa tra controller e visualizzazioni.

Ecco un semplice esempio di componente Blazor:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

In questo esempio, il codice imposta il valore di una variabile stringa, denominato welcomeMessage. Questa variabile viene sottoposta a rendering all'interno dei tag <p> nel codice HTML. Più avanti in questa unità verranno esaminati esempi più complessi.

Creare componenti Blazor

Quando si crea un'app Blazor utilizzando il modello blazor nell'interfaccia della riga di comando dotnet, diversi componenti sono inclusi per impostazione predefinita.

dotnet new blazor -o BlazingPizzaSite

I componenti predefiniti includono la home page Index.razor e il componente demo Counter.razor . Entrambi questi componenti vengono inseriti nella cartella Pages . È possibile modificare queste visualizzazioni in base alle proprie esigenze oppure eliminarle e sostituirle con i nuovi componenti.

Per aggiungere un nuovo componente a un'app Web esistente, usare questo comando:

dotnet new razorcomponent -n PizzaBrowser -o Pages

• L'opzione -n specifica il nome del componente da aggiungere. In questo esempio viene aggiunto un nuovo file denominato PizzaBrowser.razor.
• L'opzione -o specifica la cartella che si desidera contenere il nuovo componente.

Important

Il nome di un componente Blazor deve iniziare con un carattere maiuscolo.

Dopo aver creato il componente, è possibile aprirlo per essere modificato con Visual Studio Code:

code Pages/PizzaBrowser

Scrivere codice in un componente Blazor

Quando si compila un'interfaccia utente in Blazor, si combinano markup HTML statico e CSS con codice C#, spesso nello stesso file. Per differenziare questi tipi di codice, usare la sintassi Razor. La sintassi Razor include direttive, precedute dal simbolo, che delimitano codice @ C#, parametri di routing, dati associati, classi importate e altre funzionalità.

Si consideri nuovamente questo componente di esempio:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

È possibile riconoscere il markup HTML con <h1> i tag e <p> . Questo markup è il framework statico della pagina, in cui il codice inserisce contenuto dinamico. Il markup Razor è costituito dagli elementi seguenti:

• Direttiva@page: questa direttiva fornisce un modello di route a Blazor. In fase di esecuzione Blazor individua una pagina di cui eseguire il rendering associando questo modello all'URL richiesto dall'utente. In questo caso, potrebbe corrispondere a un URL del formato http://yourdomain.com/index.
• Direttiva@code: questa direttiva dichiara che il testo nel blocco seguente è codice C#. È possibile inserire tutti i blocchi di codice necessari in un componente. È possibile definire membri della classe componente in questi blocchi di codice e impostarne i valori dal calcolo, dalle operazioni di ricerca dei dati o da altre origini. In questo caso, il codice definisce un singolo membro componente denominato welcomeMessage e imposta il relativo valore stringa.
• Direttive di accesso ai membri: se si vuole includere il valore di un membro nella logica di rendering, usare il @ simbolo seguito da un'espressione C#, ad esempio il nome del membro. In questo caso, la @welcomeMessage direttiva viene usata per rendere il valore del welcomeMessage membro nei <p> tag.