Componenti Razor

Completato

Dopo aver configurato l'ambiente di sviluppo, si esaminerà la struttura di un progetto Blazor e si apprenderà come funzionano i componenti Blazor.

Home page

La home page dell'app è definita dal file Home.razor che si trova all'interno della directory Components/Pages. Home.razor contiene il codice seguente:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

La direttiva @page in alto specifica la route per questa pagina, in modo che il componente Home venga visualizzato quando l'utente passa alla radice dell'app. Il tag PageTitle è un componente Blazor che imposta il titolo per la pagina corrente in modo che venga visualizzato nella scheda del browser. Il resto del file è normale codice HTML che definisce il contenuto per la pagina.

Che cos'è Razor?

Razor è una sintassi di markup basata su HTML e C#. Un file Razor (con estensione 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.

Che cosa sono i componenti Razor?

Se si esplorano i file nel progetto Blazor, è possibile notare che la maggior parte dei file che costituiscono il progetto sono file con estensione razor. In Blazor un file Razor definisce un componente riutilizzabile che costituisce una parte dell'interfaccia utente dell'app. I componenti definiscono il codice HTML di cui eseguire il rendering e come gestire gli eventi utente.

In fase di compilazione, ogni componente Razor è incorporato in una classe C#, che può includere elementi comuni dell'interfaccia utente, come lo stato, la logica di rendering, i metodi del ciclo di vita e i gestori di eventi. Poiché i componenti Blazor creati in Razor sono solo classi C#, è possibile usare codice .NET arbitrario dai componenti.

Utilizzo di componenti

Per usare un componente di un altro componente, aggiungere un tag di tipo HTML con un nome corrispondente al nome del componente. Ad esempio, se si dispone di un componente denominato MyButton.razor, è possibile aggiungere un componente MyButton a un altro componente aggiungendo un tag <MyButton />.

Parametri del componente

I componenti possono anche avere parametri, che consentono di passare i dati al componente quando viene usato. I parametri del componente vengono definiti aggiungendo una proprietà C# pubblica al componente che ha anche un attributo [Parameter]. È quindi possibile specificare un valore per un parametro del componente usando un attributo di tipo HTML che corrisponda al nome della proprietà. Il valore del parametro può essere qualsiasi espressione C#.

Blocco @code

Il blocco @code in un file Razor viene usato per aggiungere membri di classe C# (campi, proprietà e metodi) a un componente. È possibile usare @code per tenere traccia dello stato del componente, aggiungere parametri del componente, implementare eventi del ciclo di vita del componente e definire gestori eventi.

Provare il contatore

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

Selezionare il pulsante Fare clic qui per incrementare il contatore senza aggiornare la pagina. L'incremento di un contatore in una pagina Web richiede in genere la scrittura di JavaScript, ma con Blazor è possibile usare C#.

L'implementazione del componente Counter è disponibile in 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 per /counter nel browser, come specificato dalla direttiva @page in alto, determina il rendering del contenuto del componente Counter. 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 si seleziona il pulsante Click me:

• Viene attivato l'evento onclick.
• Viene chiamato il metodo IncrementCount .
• Il blocco currentCount viene incrementato.
• Viene eseguito il rendering del componente per visualizzare il conteggio aggiornato.