Esercizio - Creare ed eseguire un'app Web Blazor

  • 8 minuti

Configura l'ambiente di sviluppo .NET e crea la prima app web Blazor.

Questo modulo offre la possibilità di usare l'interfaccia della riga di comando di .NET, Visual Studio Code o Visual Studio 2022 per lo sviluppo locale. Se sviluppi con Visual Studio Code, assicurati di installare l'estensione C# Dev Kit usata in questo modulo.

Questo modulo usa .NET 8.0 SDK. Assicurarsi di avere installato .NET 8.0 eseguendo il comando seguente nel terminale dei comandi preferito:

dotnet --list-sdks

Verrà visualizzato un output simile all'esempio seguente:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Assicurarsi che sia elencata una versione che inizia con 8. Se il comando non è presente nell'elenco o non viene trovato, installare la versione più recente di .NET 8.0 SDK.

Crea una nuova app Web Blazor con C# Dev Kit

Per creare un nuovo progetto di app web Blazor in Visual Studio Code con C# Dev Kit:

  1. Visualizza il riquadro comandi usando CTRL+MAIUSC+P e quindi digitare ".NET".

  2. Trova e seleziona .NET: Comando Nuovo progetto.

  3. Seleziona Blazor Web App nell'elenco a discesa.

  4. Seleziona la cartella in cui vuoi creare il nuovo progetto.

  5. Assegna al progetto il nome BlazorApp e premi INVIO per confermare.

  6. Visualizza il nuovo progetto di app Blazor in Esplora soluzioni.

Facoltativo: Crea una nuova app Blazor con l'interfaccia della riga di comando di .NET

Per creare un progetto di app Web Blazor usando .NET SDK dalla riga di comando, usa il comando seguente:

dotnet new blazor

Indipendentemente dal fatto che sia stata creata l'app Blazor con Visual Studio Code o l'interfaccia della riga di comando di .NET, il progetto generato contiene i file e le pagine seguenti:

  • Program.cs è il punto di ingresso per l'app che avvia il server e dove configuri i servizi app e il middleware.
  • App.razor è il componente radice per l'app.
  • Routes.razor configura il router Blazor.
  • La directory Components/Pages contiene alcune pagine web di esempio per l'app.
  • BlazorApp.csproj definisce il progetto dell'app e le relative dipendenze e può essere visualizzato facendo doppio clic sul nodo del progetto in Esplora soluzioni.
  • Il file launchSettings.json all'interno della directory Proprietà definisce impostazioni di profilo diverse per l'ambiente di sviluppo locale. Al momento della creazione del progetto, viene assegnato automaticamente un numero di porta e salvato in questo file.

Esegui l'app con il debugger integrato

  1. In Visual Studio Code seleziona Esegui dal menu.

  2. Seleziona quindi Avvia debug.

  3. Seleziona C# dall'elenco a discesa Seleziona debugger.

  4. Seleziona C#: BlazorApp [Configurazione predefinita]

    Viene compilata e avviata l'app con il debug abilitato. L'app si aprirà automaticamente nel browser predefinito. Il browser potrebbe visualizzare un messaggio che indica che il sito non è sicuro. È possibile procedere senza problemi.

    Screenshot che mostra l'app Blazor predefinita in esecuzione in un browser.

Facoltativo: Esegui l'app con l'interfaccia della riga di comando di .NET

  1. Nella finestra del terminale copia e incolla il comando seguente per eseguire l'app e controlla le modifiche apportate ai file:

    dotnet watch

    Questo comando compila e avvia l'app e quindi applica eventuali modifiche al codice all'app in esecuzione. L'app si aprirà automaticamente nel browser predefinito. Il browser potrebbe avvisare che il sito non ha ancora un certificato valido; è sicuro procedere.

La prima app Blazor è stata eseguita correttamente.

Creare una nuova app Blazor

Visual Studio è un IDE completo per lo sviluppo .NET che semplifica la creazione di app Blazor.

Per usare Visual Studio per creare e usare app Web Blazor, assicurati di installare il carico di lavoro "ASP.NET e sviluppo web" usando il programma di installazione di Visual Studio.

Screenshot della selezione del carico di lavoro ASP.NET e sviluppo Web nel programma di installazione di Visual Studio.

Per creare una nuova app Web Blazor con Visual Studio:

  1. Avviare Visual Studio e selezionare Crea un nuovo progetto.

  2. Nella finestra Crea un nuovo progetto digitare Blazor nella casella di ricerca e premere INVIO.

  3. Seleziona il modello Blazor Web App e seleziona Avanti.

    Screenshot della schermata 'Crea nuovo progetto' di Visual Studio 2022 e del modello Blazor.

  4. Nella finestra Configura il nuovo progetto immetti BlazorApp come nome del progetto e seleziona Avanti:

    Screenshot della schermata

  5. Nella finestra Informazioni aggiuntive seleziona .NET 8.0 (supporto a lungo termine) nell'elenco a discesa Framework, se non è già selezionato e fai clic sul pulsante Crea.

    Quando crei un'app web Blazor, puoi selezionare tra varie opzioni, ad esempio se abilitare l'autenticazione, quali modalità di rendering interattive abilitare e in che misura vuoi che l'app sia interattiva. Per questa app, verifica che le impostazioni predefinite siano selezionate nel modo seguente:

    • Tipo di autenticazione: Nessuna
    • Modalità di rendering interattiva: Server
    • Posizione di interattività: Per pagina/componente

    Screenshot della schermata Informazioni aggiuntive di Visual Studio 2022 per il progetto Blazor.

Il tuo progetto viene creato e caricato in Visual Studio. Esamina il contenuto del progetto usando Esplora soluzioni.

Screenshot di Esplora soluzioni di Visual Studio 2022 con un elenco di file in un progetto Blazor predefinito.

Sono stati creati diversi file per offrire una semplice app Blazor pronta per l'esecuzione:

  • Program.cs è il punto di ingresso per l'app che avvia il server e dove configuri i servizi app e il middleware.
  • App.razor è il componente radice per l'app.
  • Routes.razor configura il router Blazor.
  • La directory Components/Pages contiene alcune pagine web di esempio per l'app.
  • BlazorApp.csproj definisce il progetto dell'app e le relative dipendenze e può essere visualizzato facendo doppio clic sul nodo del progetto in Esplora soluzioni.
  • Il file launchSettings.json all'interno della directory Proprietà definisce impostazioni di profilo diverse per l'ambiente di sviluppo locale. Al momento della creazione del progetto, viene assegnato automaticamente un numero di porta e salvato in questo file.

Eseguire l'app

Fai clic sul pulsante Avvia debug (freccia verde) nella barra degli strumenti debug in Visual Studio per eseguire l'app.

Screenshot della barra degli strumenti Debug in Visual Studio con il pulsante Avvia debug evidenziato.

Quando l'app è in esecuzione, puoi applicare le modifiche al codice all'app in esecuzione facendo clic sul pulsante Ricaricamento rapido.

Screenshot della barra degli strumenti Debug in Visual Studio con il pulsante Ricaricamento rapido evidenziato.

Puoi arrestare l'app in qualsiasi momento facendo clic sul pulsante Arresta nella barra degli strumenti superiore.

Screenshot della barra degli strumenti Debug in Visual Studio con il pulsante Arresta debug evidenziato.

La prima volta che si esegue un'app web in Visual Studio, verrà configurato un certificato di sviluppo per l'hosting dell'app tramite HTTPS e quindi verrà richiesto di considerare attendibile il certificato. È consigliabile accettare di considerare attendibile il certificato. Il certificato viene usato solo per lo sviluppo locale e senza che la maggior parte dei browser si lamenti della sicurezza del sito Web.

Attendi l'avvio dell'app nel browser. Una volta visualizzata la pagina seguente, hai eseguito correttamente la prima app Blazor.

Screenshot che mostra l'app Blazor predefinita in esecuzione in un browser.

Questa app Blazor verrà usata negli esercizi seguenti.