|
Dimensione: 4425
Commento:
|
Dimensione: 5056
Commento:
|
| Le cancellazioni sono segnalate in questo modo. | Le aggiunte sono segnalate in questo modo. |
| Linea 63: | Linea 63: |
| [[attachment:Blazor_1.png]] {{{#!wiki important 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. }}}<<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>> 0. Fare '''''Ctrl + C''''' per finire. |
|
| Linea 64: | Linea 70: |
| {{{#!wiki important 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. |
<<Anchor(CounterCode)>> = Analisi della pagina Counter = {{{#!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++; } } |
| Linea 68: | Linea 93: |
| 0. Fare '''''Ctrl + C''''' per finire. |
|
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 }
