Blazor
Esistono molti approcci per creare app Web. Per creare app Web altamente interattive e veloci, in genere si usa un sacco di JavaScript.
Un altro approccio è l'uso del framework Blazor di Microsoft, che consente di usare C# e .NET per gestire tutti i problemi di sviluppo Web.
Che cos'è Blazor?
Blazor è un framework per la creazione di pagine Web con HTML, CSS e C#. È possibile definire il layout e la progettazione del sito Web usando CSS e HTML standard. I componenti interattivi delle pagine Web possono quindi essere gestiti con il codice C# eseguito in un server o nel browser mediante una tecnologia standard Web denominata WebAssembly. Blazor consente di definire le pagine Web e i componenti usando la sintassi Razor, una combinazione pratica di HTML e C#. È possibile riutilizzare facilmente i componenti Blazor all'interno di altre pagine e componenti. Questa funzionalità significa che è possibile creare e riutilizzare facilmente parti dell'app.
Che cos'è WebAssembly?
WebAssembly è una tecnologia standard disponibile in ogni browser moderno che consente l'esecuzione del codice, simile a JavaScript, in un browser. È possibile usare gli strumenti per preparare il codice C# da usare nel browser come app WebAssembly e questi strumenti sono inclusi in .NET SDK.
Aggiornare immediatamente l'app con Ricaricamento rapido
Quando sviluppi un'app, vuoi assicurarti che il flusso di sviluppo sia veloce in modo da visualizzare il modo in cui le modifiche influiscono sull'app. Si perde molto tempo per apportare una modifica, salvarla, ricompilare tutte le risorse e ridistribuire l'app nel browser.
È possibile migliorare questo flusso di lavoro usando Ricaricamento rapido. Con Ricaricamento rapido, puoi applicare una modifica all'app in esecuzione senza dover riavviarla.
Componenti di Blazor
Quando crei app con Blazor, la tua app è costituita da molti componenti, ognuno con la propria area di responsabilità. Per creare componenti si usano i file Razor con estensione razor . Quindi, che cos'è Razor?
Razor è una sintassi di programmazione che combina la sintassi HTML con il codice C#. Ecco un esempio:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
In questo esempio, @product.Name viene risolto nella stringa "Blazor", che viene quindi sottoposto a rendering all'interno del div tag . L'output di cui è stato eseguito il rendering è simile al seguente:
<div>Blazor</div>
La parte superiore dell'esempio Razor è costituita dal markup HTML di cui verrà eseguito il rendering del componente. È possibile eseguire il rendering del valore delle espressioni C# usando il @ carattere . Razor continuerà a interpretare il codice C# dopo @ finché non identifica un tag e quindi riprende il rendering del codice HTML. È possibile essere espliciti su quando l'espressione C# inizia e termina usando parens: @(...).
Tutti gli elementi all'interno @code {} di contiene codice C# per definire i membri della classe di componenti generata. È possibile considerare un file Razor come un modo pratico per definire una classe C# che definisce la logica di rendering HTML. Il blocco viene usato @code per definire i membri C# per il tipo di componente, ad esempio campi, proprietà e metodi.
Applicazione di stili a un componente Blazor
I componenti Blazor eseguono il rendering di HTML, in modo da poter applicare lo stile ai componenti Blazor usando i normali fogli di stile CSS. In alternativa, i componenti Blazor hanno una funzionalità denominata isolamento CSS che consente di creare regole di stile che si applicano solo al contenuto di tale componente. Creando un file con lo stesso nome del componente e aggiungendo l'estensione del nome file CSS, Blazor riconosce questa denominazione come stili che devono essere applicati solo al contenuto HTML nel componente corrispondente.
I componenti Blazor possono anche definire il contenuto da aggiungere all'intestazione HTML della pagina usando un tag speciale HeadContent :
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Il rendering di questo style tag e contenuto viene eseguito all'interno del head tag della pagina.
Componenti instradabili
Il file Home.razor è un componente che può essere spostato da un Web browser. Contiene html, C# e riferimenti ad altri componenti Blazor. È possibile identificare questo file come pagina dalla presenza della direttiva @page "/" nella prima riga. Questa direttiva assegna la route "/" al componente e indica a Blazor di rispondere con il contenuto di questo file quando viene richiesta la pagina predefinita all'indirizzo "/".