|
Dimensione: 4697
Commento:
|
Dimensione: 5056
Commento:
|
| Le cancellazioni sono segnalate in questo modo. | Le aggiunte sono segnalate in questo modo. |
| Linea 66: | Linea 66: |
| }}} Nella barra laterale sinistra si possono consultare altre due pagine: `Counter` et `Fetch data`. Alcune spiegazioni sulla pagina `Counter` in questo [[#CounterCode|paragrafo]] |
}}}<<BR>> Nella barra laterale sinistra si possono consultare altre due pagine: `Counter` et `Fetch data`. Alcune spiegazioni sulla pagina `Counter` in questo [[#CounterCode|paragrafo]]<<BR>> |
| Linea 72: | Linea 72: |
| {{{#!cplusplus @page "/counter" |
|
| Linea 73: | Linea 75: |
| <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++; } } }}} |
|
Attenzione! Questa è una Pagina di prova. Le informazioni riportate potrebbero essere incomplete, errate e potenzialmente pericolose. Per contribuire alla realizzazione di questa pagina consultare la discussione di riferimento. |
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 esistono Blazor Server e Blazor Hybrid ma queste tecnologie non vengono trattate in questa guida.
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 dei linguaggi di programmazione C#, Html e CSS.
.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:
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.
Nel terminale 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 vengono visualizzate le seguenti righe
Génération... 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 Ctrl + Clic sul link http://localhost:5214. La pagina web viene aperta nel browser:
Se si fa clic sul collegamento https, viene visualizzato un errore di certificato. Si dovranno seguire le istruzioni visualizzate nel terminale per creare un nuovo certificato e, se necessario, seguire i link indicati per applicare le procedure. Con alcuni browser questo non sarà sufficiente e la pagina sarà sempre considerata non sicura.
Nella barra laterale sinistra si possono consultare altre due pagine: Counter et Fetch data. Alcune spiegazioni sulla pagina Counter in questo paragrafo
Fare Ctrl + C per finire.
Analisi della pagina Counter
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 }
