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:
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.
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.
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 [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 BlazorApp nel 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 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.
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:
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.
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.
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.
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.
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 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.
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.
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à.
