Crea la tua prima app Web con ASP.NET Core usando Blazor
Intro
Scopo
Crea la tua prima app Web con ASP.NET Core usando Blazor in Visual Studio Code.
Prerequisiti
Nessuna.
macOS 12.0 o versioni successive.
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.
.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 .NET 8 SDK, VS Code e C# Dev Kit. Se qualcosa è già installato un elemento, WinGet ignorerà tale passaggio di installazione.
Per creare la prima applicazione .NET con Visual Studio Code, configurare l'ambiente:
-
Scaricare e installare .NET SDK:
Scaricare .NET 8 SDK x64 (Intel)
Scaricare .NET 8 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:
-
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.
![C# Dev Kit' di VS Code]()
Fare clic sul link per scaricare il file.
Aprire la cartella dei download e fare doppio clic sul file per avviare l'installazione.
Selezionare le istruzioni per l'installazione di Terminale o Dev Home
Dopo aver fatto doppio clic sul file, verrà aperto un terminale e verrà visualizzato che il file di configurazione winget è pronto per installare .NET 8 SDK, 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 completamento dell'operazione dovrebbe richiedere circa 5 minuti e al termine verrà visualizzato l'output seguente nel terminale.
Dopo aver fatto doppio clic sul file, verrà aperto Dev Home e verrà visualizzato il file di configurazione di WinGet pronto per installare .NET 8 SDK, VS Code se non è disponibile e C# Dev Kit.
Leggere il contratto di licenza e accettarlo facendo clic su "Accetto e voglio continuare" in basso a sinistra e quindi su "Imposta come amministratore" in basso a destra. Selezionare "Sì" quando viene chiesto se si desidera consentire a Dev Home di apportare modifiche al dispositivo.
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.
Dev Home sta installando tutto il necessario per iniziare! Il completamento dell'operazione dovrebbe richiedere circa 5 minuti e al termine verrà visualizzato l'output seguente nella finestra.
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.
Dopo aver configurato l'ambiente, aprire un nuovo terminale VS Code. Nella barra degli strumenti selezionare Terminale, quindi Nuovo terminale.
Nota: se si apre VS Code tramite un terminale, sarà necessario abilitare Attendibilità 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.
dotnet
Se l'installazione è riuscita, dovrebbe essere visualizzato un output simile al seguente:
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.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
BlazorAppnel riquadro comandi quando richiesto. Premere Immettere per confermare.
Abilitare l'attendibilità dell'area di lavoro selezionando la casella e selezionando Sì, autori attendibili.
Se si ha un abbonamento 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
BlazorAppin 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
BlazorAppin 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.razorconfigura il router Blazor.- La directory
Pagescontiene alcune pagine Web di esempio per l'app.
BlazorApp.csprojdefinisce 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.jsonall'interno della directoryPropertiesdefinisce 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.
Selezionare il pulsante blu Esegui ed esegui debug.
Visual Studio Code apre un menu di configurazioni di avvio. Selezionare C#: BlazorApp [Configurazione predefinita].
È quindi necessario selezionare un debugger. Seleziona C#.
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:
@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.
@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
onclickviene 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.
Aprire il file Home.razor nell'editor di testo preferito. Il file Home.razor esiste già ed è stato creato quando hai eseguito il comando dotnet new. 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.
@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.
Dopo aver salvato questa modifica, il comando dotnet watch app applicherà la modifica all'app in esecuzione in modo che il componente Counter venga visualizzato nel 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
IncrementAmountcon un attributo[Parameter]. - Modificare il metodo
IncrementCountper usareIncrementAmountquando si incrementa il valore dicurrentCount.
Il codice seguente illustra come ottenere questo risultato. Le righe evidenziate mostrano le modifiche.
@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:
@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.
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:
Potrebbe interessarti anche...
