Il nostro Blog

Dopo aver installato l’ambiente di sviluppo, il passo successivo è creare un nuovo progetto Blazor.

Segui questi passaggi:

1. Apri Visual Studio: avvia Visual Studio sul tuo computer facendo clic sulla nuova icona, sul desktop o nel menù. Ma se hai lasciato il flag su “Avvia dopo l’installazione si aprirà” da solo. 

2. Seleziona “Crea un nuovo progetto”: nella finestra principale di Visual Studio, seleziona “File” nella barra dei menu, quindi “Nuovo” e infine “Progetto...”.

3. Scegli il tipo di progetto Blazor: nella finestra di creazione del nuovo progetto, cerca “Blazor” nella casella di ricerca dei modelli di progetto. Poi seleziona "Blazor Web App" tra le opzioni disponibili. Puoi scegliere tra un’applicazione Blazor Server o Blazor WebAssembly. Scegli Blazor Server per iniziare.

4. Configura il progetto: assegna un nome al tuo progetto nella casella “Nome del progetto” e specifica la posizione in cui desideri salvare il progetto. Puoi anche selezionare la versione del framework .NET che desideri utilizzare, ma di solito è consigliabile utilizzare l’ultima versione stabile.

5. Seleziona il modello di hosting: quando crei un progetto Blazor, verrà richiesto di selezionare il modello di hosting. Puoi scegliere tra lato server e lato client (WebAssembly). Per cominciare seleziona "Server”. 

6. Configura le opzioni aggiuntive (se necessario): puoi configurare ulteriori opzioni, come l’uso di HTTPS, l’autenticazione utente, ecc. Per ora, puoi mantenere le opzioni predefinite.

7. Premi “Crea”: dopo aver configurato il tuo progetto, premi il pulsante “Crea” per generare il progetto Blazor.

Una volta completati questi passaggi, Visual Studio creerà un nuovo progetto Blazor per te.

Da ora in poi puoi esplorare il codice sorgente, modificare le pagine di esempio e avviare l’applicazione per vedere i risultati nel browser integrato. Questo punto costituisce la base per iniziare a sviluppare con Blazor, e da qui puoi procedere con la modifica, l’aggiunta di funzionalità e l’apprendimento più approfondito delle caratteristiche di Blazor.

Passo 4: comprendi la struttura del progetto

Dopo aver creato un nuovo progetto Blazor, è importante comprendere la struttura di base del progetto per poter navigare facilmente tra i file e le risorse. La struttura di un progetto Blazor può variare a seconda del modello di hosting scelto (lato server o lato client), ma condividono comunque alcune caratteristiche comuni. Qui ci concentriamo sulla struttura generale di un progetto Blazor Lato Server:

1. Cartella “wwwroot”: questa cartella contiene i file statici che devono essere accessibili direttamente dal browser, come fogli di stile CSS, script JavaScript, immagini e altri asset statici. Ad esempio, puoi trovare qui il file wwwroot/index.html che rappresenta la pagina principale dell’applicazione.

2. Cartella “Pages”: la cartella “Pages” contiene le pagine web dell’applicazione. Ogni file Razor (.razor) in questa cartella rappresenta una pagina dell’applicazione. Ad esempio, Pages/Index.razor è la pagina principale predefinita.

3. Cartella “Shared”: in questa cartella, puoi trovare componenti Razor condivisi che possono essere utilizzati in più pagine dell’applicazione. I componenti Razor (.razor) sono parti riutilizzabili dell’interfaccia utente.

4. File “_Imports.razor”: questo file contiene le dichiarazioni di importazione per gli spazi dei nomi che possono essere utilizzati in tutti i file Razor dell’applicazione. Facilita l’utilizzo di classi e componenti senza dover dichiarare gli spazi dei nomi in ogni pagina.

5. File “Program.cs”: questo file contiene il metodo Main che avvia l’applicazione. Nella versione Lato Server, imposta il server Blazor e avvia l’hosting.

6. File “Startup.cs”: questo file contiene la configurazione dell’applicazione. Qui puoi impostare i servizi, configurare l’autenticazione, e definire altre configurazioni dell’applicazione.

7. File “wwwroot/_content”: in questo percorso, puoi trovare file CSS, JavaScript o altri asset condivisi che possono essere referenziati nelle pagine Razor.

8. File “wwwroot/appsettings.json”: questo file contiene le impostazioni di configurazione dell’applicazione, come le stringhe di connessione al database o altre configurazioni personalizzate.

9. File “Pages/_ViewImports.razor”: questo file contiene le dichiarazioni di importazione che saranno disponibili per tutte le pagine dell’applicazione. È simile a “_Imports.razor”, ma si applica solo alle pagine nella cartella “Pages”.

10. Altri file e cartelle: il progetto può contenere ulteriori file e cartelle a seconda delle esigenze specifiche del tuo progetto o delle librerie aggiuntive.

Comprendere questa struttura di base ti aiuterà a navigare più facilmente nel tuo progetto Blazor consentendoti di modificare, aggiungere o eliminare pagine, componenti e risorse statiche in modo efficace.

Esplorando questi file potrai inoltre iniziare a comprendere come Blazor organizza e gestisce le diverse parti di un’applicazione web.

Passo 5: modifica una pagina

Ora che hai compreso la struttura di base del progetto Blazor, è tempo di iniziare a modificare una pagina per vedere come funziona il framework.

Segui questi passaggi:

1. Apri una pagina: nella cartella “Pages”, trova il file Razor di una pagina. Ad esempio, puoi aprire Pages/Index.razor per iniziare a modificare la pagina principale.

2. Modifica il contenuto: all’interno del file Razor, troverai del markup HTML misto a codice C# tramite l’uso di sintassi Razor. Modifica il contenuto della pagina come preferisci. Ad esempio, puoi cambiare il testo di un elemento <h1> o aggiungere nuovi elementi HTML.

   <h1>Ciao, mondo!</h1> <p>Benvenuto nella mia applicazione Blazor.</p>

3. Aggiungi codice C#: puoi incorporare codice C# direttamente nelle pagine Razor. Aggiungi nuove variabili, esegui operazioni e utilizza il data binding per collegare dati alla tua interfaccia utente.

   <p>Il mio nome è @nome</p> @code { private string nome = “John”; }

4. Esegui l’applicazione: salva le tue modifiche e avvia l’applicazione. Puoi farlo premendo F5 in Visual Studio o eseguendo il comando dotnet run nella cartella del progetto tramite il prompt dei comandi. Apri il tuo browser e visita l’indirizzo locale (di solito http://localhost:5000) per vedere le tue modifiche.

5. Esplora la “live reload”: Blazor offre la live reload, il che significa che le modifiche al codice verranno riflesse automaticamente nel browser senza dover ricaricare manualmente la pagina.

Procedendo con queste modifiche, puoi iniziare a sperimentare con il modo in cui Blazor gestisce la separazione tra codice e markup, oltre a comprendere il concetto di data binding e la facilità con cui puoi incorporare logica C# nelle pagine web.

Esplora ulteriormente la documentazione di Blazor per approfondire argomenti come la gestione degli eventi, la navigazione tra pagine e l’utilizzo di componenti personalizzati.

Passo 6: utilizza il “data binding”

Il data binding è una delle caratteristiche fondamentali di Blazor che semplifica la connessione tra il codice C# e l’interfaccia utente HTML. Ti permette di collegare dinamicamente i dati nel codice C# alle parti visibili dell’interfaccia utente, consentendo una gestione agevole e reattiva dei dati.

Ecco come utilizzare il data binding in Blazor:

1. One-way data binding: utilizza l’@ symbol per inserire variabili C# direttamente nel markup HTML. Questo è noto come one-way data binding, in quanto il valore della variabile è visualizzato nell’interfaccia utente, ma eventuali modifiche nel markup non influenzano la variabile:

   <p>Il mio nome è @nome</p> @code { private string nome = "John"; }

2. Two-way data binding: per consentire la modifica bidirezionale dei dati tra il codice C# e l’interfaccia utente, puoi utilizzare l’elemento input insieme al modificatore @bind. In questo esempio, qualsiasi modifica all’input dell’utente verrà riflessa nella variabile nome e viceversa:

   <input type="text" @bind="nome" /> <p>Il mio nome è @nome</p> @code { private string nome = "John"; }

3. Event binding: puoi associare eventi HTML a metodi C# nel tuo codice. Ad esempio, eccomo come gestire un clic su un pulsante. In questo caso, il metodo MostraMessaggio viene chiamato quando il pulsante viene cliccato:

   <button @onclick="MostraMessaggio">Clicca</button> @code { private void MostraMessaggio() { Console.WriteLine("Pulsante cliccato!"); } }

4. Binding a liste e iterazione: puoi utilizzare il data binding per collegare collezioni di dati, come una lista di elementi, e iterare su di essi nell’interfaccia utente. In questo esempio, ogni elemento della lista viene visualizzato come un elemento della lista HTML:

   <ul> @foreach (var elemento in listaElementi) { <li>@elemento</li> } </ul> @code { private List<string> listaElementi = new List<string> { "Elemento 1", "Elemento 2", "Elemento 3" }; }

Esplorando e sperimentando con il data binding, puoi migliorare la reattività e l’interattività delle tue pagine Blazor. Questo è un aspetto potente di Blazor che semplifica la gestione dei dati e migliora l’esperienza di sviluppo complessiva.

Passo 7: aggiungi interattività

Blazor semplifica l’aggiunta di interattività alle tue pagine web senza la necessità di scrivere JavaScript. Puoi gestire eventi utente, come clic su pulsanti o input da tastiera, direttamente nel codice C# del tuo progetto.

Ecco come aggiungere interattività in Blazor:

1. Gestione degli eventi: puoi gestire eventi HTML, come clic su un pulsante, direttamente nel codice C#. In questo esempio, il metodo MostraMessaggio viene chiamato quando il pulsante viene cliccato:

   <button @onclick="MostraMessaggio">Clicca</button> @code { private void MostraMessaggio() { Console.WriteLine("Pulsante cliccato!"); } }

2. Utilizzo di variabili di stato: puoi utilizzare variabili di stato per mantenere lo stato dell’applicazione e renderizzare dinamicamente l’interfaccia utente in base a queste variabili. In questo esempio, la variabile stato viene aggiornata quando il pulsante viene cliccato:

   <p>Stato attuale: @stato</p> <button @onclick="CambiaStato">Cambia Stato</button> @code { private string stato = "Iniziale"; private void CambiaStato() { stato = "Modificato"; } }

3. Visualizzazione condizionale: puoi utilizzare dichiarazioni @if per mostrare o nascondere parti dell’interfaccia utente in base a condizioni logiche. In questo esempio, il messaggio verrà mostrato o nascosto in base al valore della variabile mostraMessaggio:

   @if (mostraMessaggio) { <p>Messaggio visualizzato!</p> } <button @onclick="MostraNascondiMessaggio">Mostra/Nascondi Messaggio</button> @code { private bool mostraMessaggio = false; private void MostraNascondiMessaggio() { mostraMessaggio = !mostraMessaggio; } }

4. Input utente e two-way data binding: utilizza gli elementi di input per consentire all’utente di inserire dati e collega questi input alle variabili C# utilizzando il two-way data binding. In questo esempio, la variabile inputUtente è collegata all’input dell’utente e viene visualizzata dinamicamente nella pagina:

   <input type="text" @bind="inputUtente" /> <p>Hai inserito: @inputUtente</p> @code { private string inputUtente = ""; }

Aggiungere interattività in Blazor è intuitivo e potente. Sfrutta la natura dichiarativa e reattiva di Blazor per creare pagine web dinamiche senza dover scrivere complesso codice JavaScript. Esplora ulteriormente le possibilità di gestione degli eventi e di aggiunta di interattività in base alle esigenze specifiche del tuo progetto.

Passo 8: crea componenti riutilizzabili

I componenti sono una parte essenziale di Blazor in quanto consentono di organizzare il codice in unità riutilizzabili. Puoi pensare a un componente Blazor come a un widget o a un controllo che può essere utilizzato in più parti dell’applicazione. Creare componenti ti permette di strutturare il tuo codice in modo più modulare e di promuovere la riutilizzabilità. Ecco come creare e utilizzare componenti in Blazor:

1. Creazione di un componente: per creare un componente, è sufficiente creare un nuovo file Razor (.razor) nella cartella “Shared” o in una cartella dedicata. Ad esempio, puoi creare un file chiamato MyComponent.razor:

   <!-- MyComponent.razor --> <div> <h3>@Titolo</h3> <p>@Contenuto</p> </div> @code { [Parameter] public string Titolo { get; set; } [Parameter] public string Contenuto { get; set; } }

2. Utilizzo del componente: dopo aver creato il componente puoi utilizzarlo all’interno di qualsiasi pagina Razor. Per farlo, aggiungi il tag del componente come se fosse un elemento HTML incorporato. In questo esempio, il componente MyComponent viene utilizzato nella pagina, passando i valori dei parametri Titolo e Contenuto:

   <!-- Utilizzo del componente in una pagina Razor --> <MyComponent Titolo="Titolo del Componente" Contenuto="Contenuto del Componente" />

3. Parametri del componente: i componenti possono accettare parametri, che sono proprietà C# contrassegnate con l’attributo [Parameter]. Questi parametri possono essere utilizzati per passare dati al componente.

4. Evento del componente: un componente può anche definire eventi che possono essere gestiti quando il componente viene utilizzato. Ad esempio, un componente di pulsante potrebbe definire un evento OnClick. L’evento OnClick può essere utilizzato nella pagina che utilizza il componente per gestire il clic del pulsante.

   <!-- MyButton.razor --> <button @onclick="OnButtonClick">Clicca</button> @code { [Parameter] public EventCallback OnClick { get; set; } private async Task OnButtonClick() { await OnClick.InvokeAsync(); } }

5. Riutilizzo e manutenzione semplificati: l’utilizzo di componenti rende più facile il riutilizzo del codice e semplifica la manutenzione. Se hai bisogno di apportare modifiche al comportamento o all’aspetto di un componente, puoi farlo in un unico punto e i cambiamenti saranno riflessi ovunque il componente viene utilizzato.

6. Comunicazione tra componenti: Blazor supporta la comunicazione tra componenti attraverso l’uso di servizi, eventi o la condivisione di dati attraverso il padre-figlio.

Utilizzando i componenti, puoi organizzare il tuo codice in modo più pulito e promuovere la riutilizzabilità. Questo è un aspetto fondamentale di Blazor che contribuisce a una gestione efficace delle interfacce utente complesse e delle funzionalità dell’applicazione.

Passo 9: aggiungi servizi

In Blazor puoi utilizzare l’iniezione di dipendenze per aggiungere servizi al tuo progetto. L’iniezione di dipendenze è un concetto chiave in .NET che consente di separare la logica di business da altri componenti, facilitando la manutenzione, il testing e la gestione dell’applicazione.

Ecco come aggiungere e utilizzare servizi in Blazor:

1. Crea un servizio: puoi creare un servizio creando una classe che implementa un’interfaccia o una classe base. Ad esempio, crea un servizio per gestire dati utente:

   csharp:

   // UserService.cs public interface IUserService { string GetUserName(); } public class UserService : IUserService { public string GetUserName() { return "John Doe"; } }

2. Registra il servizio: dopo aver creato il servizio, devi registrarlo nell’iniezione di dipendenze di Blazor. Questo di solito avviene nel file Startup.cs. In questo esempio, il servizio UserService è registrato come un servizio singleton. Ciò significa che esisterà un’unica istanza del servizio per l’intera durata dell’applicazione:

   csharp:

   // Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddSingleton<IUserService, UserService>(); }

3. Inietta il servizio in un componente: puoi iniettare il servizio in un componente utilizzando l’attributo @inject. In questo modo, il componente ha accesso al servizio IUserService e può chiamare il metodo GetUserName():

   html:

   @inject IUserService UserService <p>Ciao, @UserService.GetUserName()!</p>

4. Utilizzo nei componenti: puoi utilizzare il servizio nei tuoi componenti per gestire logiche complesse, accesso ai dati, autenticazione e altro ancora. In questo esempio, il servizio viene utilizzato in una pagina Blazor per visualizzare i dettagli dell’utente.

   html:

   @page "/utente" @inject IUserService UserService <h3>Dettagli Utente</h3> <p>Nome utente: @UserService.GetUserName()</p>

5. Scopes del servizio: puoi registrare i servizi con diversi scopes come Singleton, Scoped o Transient a seconda della tua esigenza. Ad esempio, Scoped crea una nuova istanza del servizio per ogni richiesta HTTP. La scelta dello scope dipende dalle esigenze specifiche del tuo servizio e della tua applicazione:

   csharp:

   // Startup.cs public void ConfigureServices(IServiceCollection services) { services.AddScoped<IUserService, UserService>(); }

L’utilizzo dei servizi in Blazor consente di mantenere il codice organizzato, facilita la gestione delle dipendenze e promuove la riusabilità. Puoi sfruttare la vasta gamma di servizi offerti dal framework .NET o creare i tuoi servizi personalizzati per soddisfare le esigenze specifiche della tua applicazione.

Passo 10: pubblica l’applicazione

Dopo aver sviluppato la tua applicazione Blazor, è il momento di pubblicarla in modo che possa essere distribuita e accessibile agli utenti. Puoi pubblicare l’applicazione Blazor in vari modi, tra cui la pubblicazione in un server web, il deployment su un servizio di hosting cloud o la distribuzione tramite contenitori.

Ecco i passaggi generali per pubblicare la tua applicazione Blazor:

1. Configurazione dell’applicazione per la pubblicazione: assicurati di aver configurato correttamente le impostazioni dell’applicazione per la produzione. Controlla il file appsettings.json per eventuali configurazioni specifiche e assicurati che sia configurato correttamente per l’ambiente di produzione.

2. Build dell’applicazione: esegui una build dell’applicazione Blazor utilizzando il comando dotnet publish. Questo comando compila l’applicazione e prepara i file necessari per la distribuzione. L’opzione -c Release specifica che la build deve essere ottimizzata per l’ambiente di produzione:

   bash:

   dotnet publish -c Release

3. Distribuzione su un server web: se desideri distribuire l’applicazione su un server web tradizionale, copia i file generati nella cartella bin\Release\netcoreapp3.x\publish (o una directory simile) sul server. Assicurati che il server sia configurato correttamente per ospitare applicazioni ASP.NET Core.

4. Deployment su un servizio di hosting cloud: se hai scelto di utilizzare un servizio di hosting cloud come Azure, AWS o Google Cloud, segui la documentazione del provider per distribuire l’applicazione. Molte di queste piattaforme offrono strumenti specifici per semplificare il deployment delle applicazioni .NET Core.

5. Distribuzione tramite contenitori: puoi anche distribuire l’applicazione Blazor in un contenitore Docker. Prima di tutto, crea un file Dockerfile nella radice del tuo progetto con le istruzioni necessarie per creare un’immagine Docker. Successivamente, usa i comandi Docker per creare e distribuire l’immagine del contenitore:

   dockerfile:

   FROM mcr.microsoft.com/dotnet/core/aspnet:3.1 AS base WORKDIR /app EXPOSE 80 FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build WORKDIR /src COPY . . RUN dotnet restore "NomeAppBlazor.csproj" RUN dotnet build "NomeAppBlazor.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "NomeAppBlazor.csproj" -c Release -o /app/publish FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENTRYPOINT ["dotnet", "NomeAppBlazor.dll"]

6. Test dell’applicazione distribuita: una volta distribuita, testa l’applicazione per assicurarti che funzioni correttamente in un ambiente di produzione. Controlla la connessione al database, la gestione delle risorse statiche e qualsiasi altra funzionalità specifica dell’ambiente di produzione.

7. Monitoraggio e manutenzione: implementa strumenti di monitoraggio e logging per tenere traccia delle prestazioni dell’applicazione in produzione. Controlla regolarmente i log per individuare e risolvere eventuali problemi.

Pubblicare un’applicazione Blazor è un passo cruciale nel processo di sviluppo ed è importante essere consapevoli delle diverse opzioni disponibili a seconda delle esigenze specifiche del tuo progetto. Assicurati di seguire le best practice di sicurezza, configurazione e gestione durante il deployment per garantire un’esperienza utente ottimale e sicura.

Concludendo

Ci auguriamo questa breve guida possa dare il la alla tua voglia di coding nell’ambiente di sviluppo che noi di ESSE I consigliamo di più.

Hai bisogno di supporto per installare il tuo Blazor e iniziare a programmare, o anche solo per creare la tua applicazione? Sai a chi rivolgerti. Inizia gratuitamente e senza costi oggi stesso condividendo i tuoi dubbi con noi attraverso la nostra pagina di contatto.

Non vediamo l'ora di darti una mano a trasformare i tuoi obiettivi in... codice sorgente! 

(foto: Midjourney)