## page was renamed from rafbor/BlazorWebAssembly
#format wiki
#LANGUAGE it
<<BR>>
<<Indice>>
<<Informazioni(forum="https://forum.ubuntu-it.org/viewtopic.php?f=46&t=651564"; rilasci="20.04")>>

= 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 '''[[https://docs.microsoft.com/it-it/dotnet/core/introduction|.NET]]''' e sul linguaggio di programmazione '''[[https://wiki.ubuntu-it.org/Programmazione/CSharp|C#]]''' anziché su '''!JavaScript'''.

{{{#!wiki tip
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 [[https://pages.github.com/|Github Pages]] o [[https://surge.sh/|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 [[Ufficio/EditorDiTesto/VisualStudioCode|VisualStudioCode]].

Prerequisiti:

 * È richiesta la conoscenza di base del linguaggio di programmazione '''C#''' e dei concetti relativi alle web app.
 * Deve essere installato '''.NET [[https://it.wikipedia.org/wiki/Software_development_kit|SDK]]'''. Consultare [[Programmazione/CSharp|questa guida]] per installare l'SDK.
 * Per sviluppare in '''C#''' in '''!VisualStudioCode''' deve essere installata l'estensione '''[[https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp|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 [[https://code.visualstudio.com/docs/editor/extension-gallery|questa guida]].

Seguire la procedura descritta di seguito:

 0. Selezionare dal menù principale '''''File → Apri cartella'''''. 
 0. Nella finestra di dialogo '''Apri cartella''' creare una cartella `TestBlazorApp` e selezionarla. 
 0. Fare quindi clic su '''Aprire'''. Per impostazione predefinita il nome della cartella diventerà il nome e il ''namespace'' del progetto.
 0. 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.
 0. 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.
}}}
 0. Fare clic sul link [[http://localhost:5214]] tenendo premuto '''Ctrl'''. La pagina web, che contiene il testo `Hello World!` verrà aperta nel browser predefinito.
 {{{#!wiki note
Se si fa clic sul collegamento il browser potrebbe avvertire che il sito non è sicuro, poiché non usa il protocollo [[https://it.wikipedia.org/wiki/HTTPS|HTTPS]]; tuttavia è possibile continuare senza rischi.
}}}
 {{{#!wiki tip
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 [[#CounterCode|paragrafo]]).
 0. Premere i tasti '''Ctrl + C''' per terminare.

<<Anchor(CounterCode)>>
= Analisi della pagina Counter =
Selezionare il pulsante '''Click me''' per incrementare il conteggio senza aggiornare la pagina.<<BR>>
L'implementazione del componente `Counter` si trova in `Pages/Counter.razor`:
{{{#!cplusplus
@page "/counter"

<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++;
    }
}
}}}
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 =

 * [[https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor|Sito ufficiale]] (in inglese)
 * [[https://raw.githubusercontent.com/dotnet-architecture/eBooks/main/current/blazor-for-web-forms-developers/Blazor-for-ASP-NET-Web-Forms-Developers.pdf|Manuale]]
 * [[https://github.com/AdrienTorris/awesome-blazor|Awesome Blazor]] (utile raccolta di risorse per Blazor)

----
CategoryProgrammazione