Guida verificata con Ubuntu: 20.04
Problemi in questa pagina? Segnalali in questa discussione
Introduzione
Blazor WebAssembly è un framework SPA (Single Page Application) open source sviluppato da Microsoft per la creazione di applicazioni web UI lato client, basate su .NET e sul linguaggio di programmazione C# anziché su JavaScript.
Per creare applicazioni lato server sono invece disponibili Blazor Server e Blazor Hybrid.
Vantaggi
- Può essere eseguito direttamente nel browser (non sono richiesti plug-in).
Funziona con tutti i moderni browser web (compreso quelli in ambito mobile).
Può essere distribuito su un server di pagine statiche (ad esempio Github Pages o Surge).
Richiede una conoscenza di base (o pressoché nulla) di JavaScript per costruire un sito, quindi è ideale per chi sviluppa applicazioni desktop in C# e vuole dedicarsi allo sviluppo web.
Conversione PWA integrata.
Compatibile con le librerie JavaScript esistenti.
Svantaggi
Il download di un'applicazione di grandi dimensioni in un browser può richiede diverso tempo, poiché il runtime .NET e gli assembly vengono scaricati e memorizzati nella cache del browser. Ciò può influire sull'esperienza dell'utente.
Creazione di un'applicazione Blazor WebAssembly
Il seguente progetto sarà realizzato con VisualStudioCode.
Prerequisiti:
È richiesta la conoscenza di base del linguaggio di programmazione C# e dei concetti relativi alle web app.
Deve essere installato .NET SDK. Consultare questa guida per installare l'SDK.
Per sviluppare in C# in VisualStudioCode deve essere installata l'estensione C# (normalmente l'editor propone di installarla quando si apre un file C#); per installare le estensioni di VisualStudioCode nel VS Code Extension Marketplace consultare questa guida.
Seguire la procedura descritta di seguito:
Selezionare dal menù principale File → Apri cartella.
Nella finestra di dialogo Apri cartella creare una cartella TestBlazorApp e selezionarla.
Fare quindi clic su Aprire. Per impostazione predefinita il nome della cartella diventerà il nome e il namespace del progetto.
Aprire il terminale integrato da VisualStudioCode selezionando Visualizza → Terminale dal menu principale ed eseguire il seguente comando:
dotnet new blazorwasm
Verranno creati tutti i file del progetto. Convalidare tutte le richieste di VisualStudioCode per installare le estensioni mancanti.
Per avviare l'applicazione, eseguire il seguente comando:
dotnet run
Nel terminale verranno visualizzate le seguenti righe:
info: Microsoft.Hosting.Lifetime[14] Now listening on: https://localhost:7166 info: Microsoft.Hosting.Lifetime[14] Now listening on: http://localhost:5214 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down.Fare clic sul link http://localhost:5214 tenendo premuto Ctrl. La pagina web, che contiene il testo Hello World! verrà aperta nel browser predefinito.
Se si fa clic sul collegamento il browser potrebbe avvertire che il sito non è sicuro, poiché non usa il protocollo HTTPS; tuttavia è possibile continuare senza rischi.
In alternativa al comando dotnet run si può usare dotnet watch che, tra le altre cose, lancerà direttamente il link con HTTPS.
Nella barra laterale sinistra si possono consultare altre due pagine: Counter e Fetch data (per maggiori informazioni su Counter consultare questo paragrafo).
Premere i tasti Ctrl + C per terminare.
Analisi della pagina Counter
Selezionare il pulsante Click me per incrementare il conteggio senza aggiornare la pagina.
L'implementazione del componente Counter si trova in Pages/Counter.razor:
1 @page "/counter"
2
3 <PageTitle>Counter</PageTitle>
4
5 <h1>Counter</h1>
6
7 <p role="status">Current count: @currentCount</p>
8
9 <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
10
11 @code {
12 private int currentCount = 0;
13
14 private void IncrementCount()
15 {
16 currentCount++;
17 }
18 }
Il codice cobina HTML e C#. Tutto il codice in C# si trova nella direttiva @code. Si accede alla variabile currentCount nella pagina usando @currentCount.
Una richiesta di /counter nel browser, come specificato dalla direttiva @page in alto, provoca il rendering del contenuto del componente Counter.
Ogni volta che si seleziona il pulsante Click me:
Viene attivato l'evento onclick.
Viene richiamato il metodo IncrementCount.
Viene incrementato currentCount.
- Il componente viene predisposto per mostrare il conteggio aggiornato.
Ulteriori risorse
Sito ufficiale (in inglese)
Awesome Blazor (utile raccolta di risorse per Blazor)