Esercitazione su Blazor - Creare la prima app Web

Intro

Scopo

Crea la tua prima app Web con ASP.NET Core usando Blazor in Visual Studio Code.

Prerequisiti

Nessuna.

Tempo di completamento

10-15 minuti + tempo di download/installazione

Scenario

Crea, usa e modifica un semplice componente contatore.

Si preferisce Visual Studio o l'interfaccia della riga di comando?

Se si preferisce, è anche possibile iniziare a usare Blazor usando Visual Studio o l'interfaccia della riga di comando.

Scarica e installa

Per compilare la prima applicazione .NET, è necessario installare .NET SDK, Visual Studio Code e C# Dev Kit.

Informazioni su .NET SDK, Visual Studio Code e C# Dev Kit

.NET SDK (Software Development Kit) è una raccolta gratuita e open source di strumenti e librerie che sarà necessario compilare ed eseguire applicazioni con C#. C# è il linguaggio di programmazione moderno orientato agli oggetti che verrà usato per questa esercitazione.
Visual Studio Code (VS Code) è l'editor di codice leggero, gratuito e open source più popolare al mondo. Qui è dove si scriverà il codice C#.
C# Dev Kit è un potente set di estensioni VS Code che semplifica lo sviluppo di C#. Consente di scrivere, testare ed eseguire il debug del codice durante la compilazione di app.

Il file di Configurazione di .NET WinGet installerà automaticamente l'SDK per .NET 10, VS Code e C# Dev Kit. Se si qualcosa è già installato, WinGet ignorerà tale passaggio di installazione.

Scaricare e installare .NET SDK:

Istruzioni per installare l'SDK per .NET 10

Scarica .NET 10 SDK x64 (Intel)
Scarica .NET 10 SDK Arm64 (Apple Silicon)

Se si usa un Mac con un chip Apple M1 o M2, è necessario installare la versione Arm64 dell'SDK.
Scaricare e installare VS Code:

Scarica VS Code
Aprire VS Code e selezionare il pulsante estensioni nella barra attività di VS Code a sinistra. Digitare C# nella barra di ricerca, selezionare C# Dev Kit e quindi selezionare il pulsante Installa nella pagina delle estensioni di C# Dev Kit.

Scarica ed esegui il file di configurazione

Fare clic sul collegamento seguente per scaricare il file WinGet:

File di configurazione .NET WinGet

Aprire la cartella dei download e fare doppio clic sul file per avviare l'installazione. Se viene richiesto di selezionare un'applicazione per l'esecuzione del file, selezionare Gestione pacchetti Windows client.

Si aprirà un terminale dove si dovrebbe vedere che il file di Configurazione WinGet è pronto per installare l'SDK per .NET 10, VS Code se non è disponibile e C# Dev Kit.

Leggere il contratto di licenza e accettarlo digitando "y" nel terminale e premendo Invio.

Nota: è responsabilità dell'utente comprendere le impostazioni di configurazione che si sceglie di eseguire. Microsoft non è responsabile del file di configurazione creato o importato. Questa configurazione può modificare le impostazioni in Windows, installare software, modificare le impostazioni software (incluse le impostazioni di sicurezza) e accettare contratti utente per pacchetti e servizi di terze parti per conto dell'utente. Eseguendo questo file di configurazione, l'utente riconosce e accetta queste risorse e impostazioni. Tutte le applicazioni installate sono concesse in licenza dai proprietari. Microsoft non è responsabile né concede alcuna licenza su pacchetti o servizi di terze parti.

WinGet sta installando tutto il necessario per iniziare. Il tempo di installazione dipenderà dalle specifiche del computer, dalla velocità di rete e altro ancora. Il completamento può richiedere solo 5 minuti, ma fino a 15 minuti.

Alcuni passaggi di installazione potrebbero richiedere autorizzazioni a livello di amministratore per l'installazione. Controlla i prompt di Controllo dell'account utente nel barra delle applicazioni di Windows e fai clic su tale icona. Per continuare l'installazione, è necessario selezionare Sì se richiesto.

Al termine dell'installazione, è necessario visualizzare l'output seguente nel terminale.

Verificare che tutto sia installato correttamente

Ora che l'ambiente è configurato, andare a Cerca nella barra delle applicazioni di Windows e digitare Visual Studio Code. Fare clic sull'applicazione per aprire VS Code.

Nota: Se si apre VS Code tramite un terminale, sarà necessario abilitare trust dell'area di lavoro.

Per aprire un nuovo terminale, andare alla barra degli strumenti e selezionare Terminale seguito da Nuovo terminale.

Nel terminale eseguire il comando seguente per controllare l'installazione.

Terminal

dotnet

Se l'installazione è riuscita, dovrebbe essere visualizzato un output simile al seguente:

Terminal

Usage: dotnet [path-to-application]
Usage: dotnet [commands]

path-to-application:
The path to an application .dll file to execute.

commands:
-h|--help                         Display help.
--info                            Display .NET information.
--list-runtimes [--arch ]         Display the installed runtimes matching the host or specified architecture. Example architectures: arm64, x64, x86.
--list-sdks [--arch ]             Display the installed SDKs matching the host or specified architecture. Example architectures: arm64, x64, x86.

Se tutto sembra corretto, selezionare il pulsante Continuare di seguito per passare al passaggio successivo.

Si è verificato un errore?

Se si riceve un errore "dotnet" non è riconosciuto come comando interno o esterno, assicurarsi di aver aperto un nuovo terminale VS Code. Se il riavvio del VS Code o del computer non risolve il problema, usa il pulsante Si è verificato un problema per ricevere assistenza.

Crea la tua app

Aprire il riquadro comandi in VS Code premendo CTRL+MAIUSC+P.
Aprire il riquadro comandi in VS Code premendo by pressing CMD+MAIUSC+P.
Digitare .NET: per visualizzare i comandi che è possibile eseguire con C# Dev Kit.
Trovare e selezionare .NET: Nuovo progetto per creare un nuovo progetto .NET.
Scorrere verso il basso e selezionare Blazor Web App.
Scegliere il percorso della cartella in cui salvare il progetto.
Assegnare un nome al progetto BlazorApp nel riquadro comandi quando richiesto. Premere Immettere per confermare.
Seleziona il formato file della soluzione slnx.

Abilitare l'attendibilità dell'area di lavoro selezionando la casella e selezionando Sì, autori attendibili.

Dopo l'abilitazione, verrà richiesto di ricaricare l'estensione C# Dev Kit. Fare clic sul pulsante Ricarica estensioni

Se si ha una sottoscrizione di Visual Studio, accedere all'account. Se non viene visualizzato alcun messaggio di richiesta, fare clic sull'icona C# nella barra di stato di VS Code nella parte inferiore destra della finestra.

Nella barra laterale di VS Code assicurarsi che Esplora VS Code sia aperto. Qui verranno visualizzati la cartella BlazorApp e Esplora soluzioni.
Seguire con video qui di seguito per: comprimere la cartella BlazorApp, aprire Esplora soluzioni, aprire il progetto BlazorApp e trascinare e rilasciare Esplora soluzioni più in alto.

Comprimere la cartella BlazorApp in Esplora VS Code.
Fare clic sulla freccia di espansione a sinistra di Esplora soluzioni per espanderlo.
Fare clic sulla freccia di espansione a sinistra del progetto BlazorApp in Esplora soluzioni per espanderlo.
Trascinare la Esplora soluzioni sotto BlazorApp.

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

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 in cui si configurano i servizi app e il middleware.
All'interno della directory Components:
- App.razor è il componente principale dell’app.
- Routes.razor configura il router Blazor.
- La directory 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 BlazorApp nella Esplora soluzioni.
Il file launchSettings.json all'interno della directory Properties definisce impostazioni del profilo diverse per l'ambiente di sviluppo locale. Un numero di porta viene assegnato automaticamente al momento della creazione del progetto e salvato in questo file.

Se tutto sembra corretto, selezionare il pulsante Continuare di seguito per passare al passaggio successivo.

Esegui l'app

Selezionare l'icona Esegui ed esegui debug nella barra attività sul lato sinistro dell'area di lavoro.

Per poter eseguire ed effettuare il debug, assicurarsi che non ci siano file aperti nell'editor. Selezionare il pulsante blu Esegui ed effettua debug.

È necessario selezionare un debugger. Seleziona C#.

Successivamente, Visual Studio Code apre un menu di configurazioni di avvio. Selezionare C#: BlazorApp [Configurazione predefinita].

Attendere l'avvio dell'app nel browser. Dopo aver visualizzato la pagina seguente, è stata eseguita correttamente la prima app Blazor.

È possibile arrestare l'app in qualsiasi momento facendo clic sul pulsante di arresto nella barra degli strumenti superiore.

Per eseguire di nuovo l'applicazione, selezionare il menu a discesa a destra del pulsante Esegui in alto a destra e selezionare Eseguire il progetto associato a questo file.

La pagina visualizzata è definita dal file Home.razor che si trova all'interno della cartella Components/Pages. Ecco l'aspetto del contenuto:

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Contiene già il codice che la imposta come homepage e mostra i testi Hello, world! e Welcome to your new app. Il componente PageTitle imposta il titolo della pagina corrente in modo che venga visualizzato nella scheda del browser.

Si è verificato un errore?

Se si riceve un messaggio di errore che indica "La connessione non è privata" con codice di errore NET::ERR_CERT_INVALID, provare a riavviare tutte le finestre del browser in modo che il nuovo certificato possa essere prelevato dal browser ed eseguire di nuovo l'applicazione.

Se non riesci a risolvere il problema riscontrato, seleziona il pulsante Si è verificato un problema di seguito seguente per ricevere assistenza.

Prova il contatore

Nell'app in esecuzione passare alla pagina Contatore facendo clic sulla scheda Contatore nella barra laterale a sinistra. Dovrebbe essere quindi visualizzata la pagina seguente:

Seleziona il pulsante Cliccami per incrementare il conteggio senza aggiornare la pagina. L'incremento di un contatore in una pagina Web richiede in genere la scrittura di JavaScript, ma con Blazor puoi usare C#.

L'implementazione del componente Counter è disponibile nel file Counter.razor, all'interno della directory Components/Pages.

Components/Pages/Counter.razor

@page "/counter"
@rendermode InteractiveServer

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

Una richiesta di /counter nel browser, come specificato dalla direttiva @page nella parte superiore, fa in modo che il componente Counter esegua il rendering del rispettivo contenuto. La direttiva @rendermode abilita il rendering interattivo del server per il componente, in modo che possa gestire gli eventi dell'interfaccia utente dal browser.

Ogni volta che viene selezionato il pulsante Fare clic qui:

L'evento onclick viene generato.
Viene chiamato il metodo IncrementCount.
Il currentCount è incrementato.
Viene eseguito il rendering del componente per visualizzare il conteggio aggiornato.

Aggiungere un componente

Ognuno dei file .razor definisce un componente dell'interfaccia utente che può essere riutilizzato.

Apri il file Home.razor in Visual Studio. Il file Home.razor esiste già ed è stato creato quando hai creato il progetto. Si trova nella cartella Components/Pages all'interno della cartella BlazorApp creata in precedenza.

Aggiungi un componente Counter alla homepage dell'app aggiungendo un elemento <Counter /> alla fine del file Home.razor.

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Eseguire di nuovo l'app per visualizzare le modifiche. Il componente Counter verrà quindi visualizzato nella home page.

Modifica un componente

I parametri del componente vengono specificati usando attributi o contenuto figlio, che consentono di impostare proprietà sul componente figlio. Definire un parametro nel componente Counter per specificare l'incremento a ogni clic del pulsante:

Aggiungi una proprietà pubblica per IncrementAmount con un attributo [Parameter].
Modificare il metodo IncrementCount per usare IncrementAmount quando si incrementa il valore di currentCount.

Il codice seguente illustra come ottenere questo risultato. Le righe evidenziate mostrano le modifiche.

Components/Pages/Counter.razor

@page "/counter"
@rendermode InteractiveServer

<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;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

    private void IncrementCount()
    {
        currentCount += IncrementAmount;
    }
}

In Home.razor, aggiorna l'elemento <Counter> per aggiungere un attributo IncrementAmount che modifica il valore dell'incremento in dieci, come illustrato dalla riga evidenziata nel codice seguente:

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Applica la modifica all'app cliccando sul pulsante Ricaricamento rapido. Il componente Home ora un proprio contatore che aumenta di dieci unità ogni volta che si seleziona il pulsante Click me, come mostrato nell'immagine seguente. Il componente Counter (Counter.razor) in /counter continua a essere incrementato di uno.

Passaggi successivi

Congratulazioni, è stata creata ed eseguita la prima app di Blazor.

Continua l'apprendimento

Dopo aver ottenuto le nozioni di base, continuare a creare la prima app Blazor con il modulo di apprendimento autoguidato Blazor in Microsoft Learn in cui si creerà un'app elenco attività.

Microsoft Learn: Creare un'app elenco attività Blazor

Blazor per principianti

Informazioni su come creare un'app Blazor completa dall'inizio alla fine:

Documentazione di Blazor

Esplora la documentazione su Blazor per scoprire come creare app Web straordinarie.

Concetti relativi alla pubblicazione di Blazor

Continua su Microsoft Learn per imparare come pubblicare un'app Blazor e un'API .NET con App Web statiche di Azure.

Crea un'API REST

Creare un'API REST con ASP.NET