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.

Vantaggi

• Può essere eseguito direttamente nel browser.
• Non sono richiesti plug-in per il browser.
• Funziona in tutti i moderni browser web, compresi quelli mobili.

• Può essere distribuito su un server di pagine statiche (ad esempio Github Pages o Surge).

• Richiede una conoscenza minima o nulla di JavaScript per costruire un sito web 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 richiede un certo tempo perché il runtime .NET e gli assembly vengono scaricati e memorizzati nella cache del browser, il che può influire sull'esperienza dell'utente.

Creazione di un'applicazione Blazor WebAssembly

Questo progetto sarà realizzato con VisualStudioCode.

Prerequisiti:

• È richiesta la conoscenza di base:

  1. del linguaggio di programmazione C#

  2. dei concetti di web app.

• .NET SDK deve essere installato. 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:

1. Selezionare dal menù principale File → Apri cartella.

2. Nella finestra di dialogo Apri cartella creare una cartella TestBlazorApp e selezionarla.

3. Fare quindi clic su Aprire. Per impostazione predefinita il nome della cartella diventerà il nome e il namespace del progetto.

4. Aprire il terminale integrato da VisualStudioCode selezionando Visualizza → Terminale dal menu principale e 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.

5. Per avviare l'applicazione, eseguire il seguente comando:

   dotnet run

   Nel terminale vengono 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.

6. Fare Ctrl + Clic sul link http://localhost:5214. La pagina web, che contiene il testo Hello World! viene aperta nel browser.

   
   

   Se si fa clic sul collegamento https, il browser vi avvertirà che il sito non è sicuro, ma è possibile continuare senza rischi. La pagina sarà considerata non sicura.

   
   

   • Invece del comando dotnet run si può usare dotnet watch che, tra le altre cose, lancerà direttamente il link https.

   Nella barra laterale sinistra si possono consultare altre due pagine: Counter et Fetch data. Alcune spiegazioni sulla pagina Counter in questo paragrafo
   

7. Fare Ctrl + C per finire.

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 mischia HTML e C#. Tutto il codice 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":

• L'evento onclick viene attivato.

• Viene richiamato il metodo IncrementCount.

• currentCount viene incrementato.

• Il componente viene reso per mostrare il conteggio aggiornato.

Ulteriori risorse

• Sito ufficiale (in inglese)

• Manuale

• Awesome Blazor (una raccolta di fantastiche risorse Blazor)

CategoryNuoviDocumenti