Condividi tramite


Esercitazione: Introduzione a C# e ASP.NET Core in Visual Studio

In questa esercitazione per lo sviluppo in C# con ASP.NET Core si crea un'app Web C# ASP.NET Core in Visual Studio.

Questa esercitazione illustra come:

  • Creare un progetto di Visual Studio
  • Creare un'applicazione web C# ASP.NET Core
  • Apportare modifiche all'app Web
  • Esplorare le funzionalità dell'IDE
  • Eseguire l'app Web

Prerequisiti

Per completare questa esercitazione, è necessario:

  • Visual Studio installato. Visitare la pagina download di Visual Studio per una versione gratuita. Per ulteriori informazioni sull'aggiornamento alla versione più recente di Visual Studio, consultare gli aggiornamenti di Visual Studio .
  • Il carico di lavoro ASP.NET e sviluppo Web installato. Per verificare o installare questo carico di lavoro in Visual Studio, selezionare Strumenti>Ottieni strumenti e funzionalità. Per altre informazioni, vedere Modificare i carichi di lavoro o i singoli componenti.

Creare un progetto

Prima di tutto, si crea un progetto ASP.NET Core. Il tipo di progetto include tutti i file modello necessari per creare un sito Web completamente funzionante.

  1. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot mostra la finestra iniziale per Visual Studio. L'opzione Crea un nuovo progetto è evidenziata.

  2. Nella finestra Crea un nuovo progetto selezionare C# dall'elenco Linguaggio. Selezionare quindi Windows dall'elenco della piattaforma e Web dall'elenco dei tipi di progetto.

    Dopo aver applicato i filtri di linguaggio, piattaforma e tipo di progetto, selezionare il modello ASP.NET Core Web App e quindi selezionare Avanti.

    Screenshot che mostra il modello di progetto ASP.NET Core Web App evidenziato nella finestra di dialogo Nuovo progetto in Visual Studio.

  3. Nella finestra Configura il nuovo progetto, immettere MyCoreApp nel campo Nome progetto. Selezionare quindi Avanti.

    Screenshot che mostra la finestra Configura il nuovo progetto in Visual Studio con MyCoreApp immesso nel campo Nome progetto.

  4. Nella finestra Informazioni aggiuntive verificare che .NET Core 3.1 venga visualizzato nel campo Framework di destinazione.

    Da questa finestra è possibile abilitare il supporto docker e aggiungere il supporto per l'autenticazione. Il menu a discesa per tipo di autenticazione include le quattro opzioni seguenti:

    • Nessuna: Nessuna autenticazione.
    • Account Individuali: Queste autenticazioni vengono archiviate in un database locale o basato su Azure.
    • Microsoft Identity Platform: questa opzione usa Microsoft Entra ID o Microsoft 365 per l'autenticazione.
    • Windows: adatto per le applicazioni Intranet.

    Lasciare deselezionata la casella di Abilita Docker e selezionare Nessuna per Tipo di autenticazione.

    Screenshot che mostra le impostazioni predefinite nella finestra Informazioni aggiuntive in cui il framework di destinazione è impostato su .NET Core 3.1.

  5. Seleziona Crea.

Visual Studio apre il nuovo progetto.

  1. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot mostra la finestra iniziale per Visual Studio. L'opzione Crea un nuovo progetto è evidenziata.

  2. Nella finestra Crea un nuovo progetto, selezionare C# dall'elenco linguaggio. Selezionare quindi Windows dall'elenco Tutte le piattaforme e Web dall'elenco Tutti i tipi di progetto.

    Dopo aver applicato i filtri di linguaggio, piattaforma e tipo di progetto, seleziona il modello ASP.NET Core Web App (Razor Pages) e quindi seleziona Next.

    Screenshot che mostra il modello di progetto ASP.NET Core Web App selezionato e evidenziato nella pagina Crea un nuovo progetto.

  3. Nella finestra Configura il nuovo progetto, inserisci MyCoreApp nel campo Nome progetto. Selezionare quindi Avanti.

    Screenshot che mostra la finestra Configura il tuo nuovo progetto in Visual Studio con MyCoreApp inserito nel campo Nome progetto.

  4. Nella finestra Informazioni aggiuntive, verificare che .NET 8.0 venga visualizzato nel campo Framework di destinazione.

    Da questa finestra è possibile abilitare il supporto dei contenitori e aggiungere il supporto per l'autenticazione. Il menu a discesa per tipo di autenticazione include le quattro opzioni seguenti:

    • Nessuna: Nessuna autenticazione.
    • Account individuali: Queste autenticazioni vengono archiviate in un database locale o basato su Azure.
    • Microsoft Identity Platform: questa opzione usa Microsoft Entra ID o Microsoft 365 per l'autenticazione.
    • Windows: adatto per le applicazioni Intranet.

    Lasciare la casella di controllo Abilita supporto contenitori deselezionata e selezionare Nessuna per Tipo di autenticazione.

    Screenshot che mostra le impostazioni predefinite nella finestra Informazioni aggiuntive in cui il framework di destinazione è impostato su .NET 8.0.

  5. Selezionare Crea.

Visual Studio apre il nuovo progetto.

Informazioni sulla soluzione

Questa soluzione segue il modello di progettazione Razor Page. È diverso dal modello di progettazione Model-View-Controller (MVC) in quanto è semplificato per includere il codice del modello e del controller all'interno della pagina Razor stessa.

Visita guidata alla soluzione

  1. Il modello di progetto crea una soluzione con un singolo progetto ASP.NET Core denominato MyCoreApp. Selezionare la scheda Esplora soluzioni per visualizzarne il contenuto.

    Screenshot mostra il progetto MyCoreApp selezionato in Esplora soluzioni in Visual Studio.

  2. Espandi la cartella Pagine.

    Screenshot mostra il contenuto della cartella Pages in l'Esplora Soluzioni di Visual Studio.

  3. Selezionare il file Index.cshtml e visualizzare il file nell'editor di codice.

    Screenshot mostra il file Index dot c s h t m l aperto nell'editor di Visual Studio Code.

  4. Ogni file con estensione cshtml ha un file di codice associato. Per aprire il file di codice nell'editor, espandere il nodo Index.cshtml in Esplora soluzioni e selezionare il file Index.cshtml.cs.

    Screenshot mostra il file index dot c s h t m l selezionato nell'Esplora soluzioni in Visual Studio.

  5. Visualizzare il file Index.cshtml.cs nell'editor di codice.

    Screenshot mostra il file index dot c s h t m l dot c s aperto nell'editor di Visual Studio Code.

  6. Il progetto contiene una cartella wwwroot, che è la radice del sito Web. Espandere la cartella per visualizzarne il contenuto.

    Screenshot mostra la cartella radice www selezionata in Esplora soluzioni in Visual Studio.

    È possibile inserire contenuto statico del sito, ad esempio CSS, immagini e librerie JavaScript direttamente nei percorsi in cui si desidera.

    Il progetto contiene anche file di configurazione che gestiscono l'app Web in fase di esecuzione. L'applicazione predefinita configurazione viene archiviata in appsettings.json. Tuttavia, è possibile eseguire l'override di queste impostazioni usando appsettings.Development.json.

  7. Espandere il file appsettings.json per visualizzare il file appsettings.Development.json.

    Screenshot mostra appsettings dot j son selezionato ed espanso in Esplora soluzioni in Visual Studio.

Esegui, effettua il debug e apporta modifiche

  1. Nella barra degli strumenti selezionare il pulsante IIS Express per compilare ed eseguire l'app in modalità di debug. In alternativa, premere F5oppure passare a Debug>Avvia debug dalla barra dei menu.

    Screenshot mostra il pulsante I S Express evidenziato nella barra degli strumenti in Visual Studio.

    Nota

    Se viene visualizzato un messaggio di errore che indica Impossibile connettersi al server Web 'IIS Express', chiudere Visual Studio e riavviare il programma come amministratore. È possibile eseguire questa attività facendo clic con il pulsante destro del mouse sull'icona di Visual Studio dal menu Start e quindi selezionando l'opzione Esegui come amministratore dal menu di scelta rapida.

    È anche possibile che venga visualizzato un messaggio che chiede se si vuole accettare un certificato SSL EXPRESS iis. Per visualizzare il codice in un Web browser, selezionare e quindi selezionare se viene visualizzato un messaggio di avviso di sicurezza di completamento.

  2. Visual Studio avvia una finestra del browser. Nella barra dei menu dovrebbero essere visualizzate le pagine Home e Privacy.

  3. Selezionare Privacy dalla barra dei menu. La pagina Privacy nel browser visualizza il testo impostato nel file Privacy.cshtml.

    Screenshot mostra la pagina Privacy MyCoreApp con il testo seguente: Usare questa pagina per dettagliare l'informativa sulla privacy del sito.

  4. Tornare a Visual Studio, e quindi premere Shift+F5 per interrompere il debug. Questa azione chiude il progetto nella finestra del browser.

  5. In Visual Studio aprire Privacy.cshtml per la modifica. Successivamente, elimina la frase, Usa questa pagina per fornire dettagli sull'informativa sulla privacy del sito e sostituiscila con Questa pagina è in fase di costruzione dal @ViewData["TimeStamp"].

    Screenshot che mostra il file Privacy dot c s h t m l aperto nell'editor di Visual Studio Code con il testo aggiornato.

  6. A questo punto, verrà apportata una modifica al codice. Selezionare Privacy.cshtml.cs. Eseguire quindi la pulizia delle direttive using all'inizio del file usando la seguente scorciatoia:

    Passare il cursore o selezionare una direttiva using disattivata. Una lampadina Azioni rapide appare sotto il cursore o nel margine sinistro. Selezionare la lampadina e quindi selezionare Rimuovi usi non necessari.

    Screenshot mostra il file Privacy dot c s h t m l nell'editor di Visual Studio Code con la descrizione comando Azioni rapide esposta per una direttiva using disattivata.

    Selezionare ora Anteprima modifiche per visualizzare le modifiche apportate.

    Screenshot mostra la finestra di dialogo Anteprima modifiche. La finestra di dialogo mostra la direttiva da rimuovere e visualizza in anteprima la modifica del codice dopo la rimozione.

    Selezionare Applica. Visual Studio elimina le direttive using non necessarie dal file.

  7. Successivamente, nel metodo OnGet() modificare il corpo nel codice seguente:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Si noti che viene visualizzata una sottolineatura ondulata in DateTime. Viene visualizzata la sottolineatura ondulata perché questo tipo non rientra nell'ambito.

    Screenshot mostra un segno di errore, sotto forma di sottolineatura ondulata, per DateTime nell'editor di codice di Visual Studio.

    Aprire la barra degli strumenti elenco errori per visualizzare gli stessi errori elencati. Se non viene visualizzata la barra degli strumenti Elenco errori, vai a Visualizza>Elenco errori dalla barra dei menu superiore.

    Screenshot mostra la barra degli strumenti Elenco errori in Visual Studio con DateTime elencato.

  9. Correggiamo questo errore. Nell'editor di codice posizionare il cursore sulla riga contenente l'errore e quindi selezionare la lampadina Azioni rapide nel margine sinistro. Quindi, dal menu a discesa, selezionare utilizzando System; per aggiungere questa direttiva all'inizio del tuo file e risolvere gli errori.

    Screenshot mostra le opzioni delle Azioni Rapide dal relativo menu a discesa con il puntatore del mouse su System.

  10. Premere F5 per aprire il progetto nel Web browser.

  11. Nella parte superiore del sito Web, seleziona Privacy per visualizzare le modifiche.

    Screenshot che mostra la pagina privacy aggiornata che include le modifiche apportate.

  12. Chiudi il browser web, premi Shift+F5 per interrompere il debug.

Modificare la home page

  1. In Esplora soluzioni, espandere la cartella Pagine, e quindi selezionare Index.cshtml.

    Screenshot che mostra l'opzione Index dot c s h t l selezionata nel nodo Pages in Esplora soluzioni.

    Il file Index.cshtml corrisponde alla pagina Home nell'app Web, che viene eseguita in un browser Web.

     La screenshot mostra la home page dell'app Web nella finestra del browser.

    Nell'editor di codice, puoi vedere il codice HTML per il testo che appare nella Pagina Home.

    Screenshot mostra il file Index dot c s h t m l per la home page nell'editor di codice di Visual Studio.

  2. Sostituire il testo welcome con Hello World!

    Screenshot mostra il file Index dot c s h t m l nell'editor di codice di Visual Studio con il testo di benvenuto modificato in Hello World!.

  3. Selezionare IIS Express oppure premere CTRL+F5 per eseguire l'app e aprirla in un Web browser.

    Screenshot mostra il pulsante IIS Express evidenziato nella barra degli strumenti per Visual Studio.

  4. Nel Web browser vengono visualizzate le nuove modifiche nella pagina Home.

    Screenshot mostra la home page dell'app Web nella finestra del browser. Il testo aggiornato dice Hello World!

  5. Chiudere il browser web, premere MAIUSC+F5 per interrompere il debug e salvare il progetto. È ora possibile chiudere Visual Studio.

Presentazione della soluzione

  1. Il modello di progetto crea una soluzione con un singolo progetto ASP.NET Core denominato MyCoreApp. Selezionare la scheda Esplora Soluzioni per visualizzarne il contenuto.

    Screenshot mostra il progetto MyCoreApp selezionato e il relativo contenuto in Esplora soluzioni in Visual Studio.

  2. Espandere la cartella Pagine.

    Screenshot mostra il contenuto della cartella Pages in Esplora Soluzioni.

  3. Selezionare il file Index.cshtml e visualizzarlo nell'editor di codice.

    Screenshot mostra il file Index.cshtml aperto nell'editor di Visual Studio Code.

  4. Ogni file con estensione cshtml ha un file di codice associato. Per aprire il file di codice nell'editor, espandere il nodo Index.cshtml in Esplora soluzioni e selezionare il file Index.cshtml.cs.

    Screenshot mostra il file Index.cshtml selezionato in Esplora soluzioni in Visual Studio.

  5. Visualizzare il file Index.cshtml.cs nell'editor di codice.

    Screenshot mostra il file Index.cshtml.cs aperto nell'editor di Visual Studio Code.

  6. Il progetto contiene una cartella wwwroot, che è la radice del sito Web. Espandere la cartella per visualizzarne il contenuto.

    Screenshot mostra la cartella w w w radice selezionata in Esplora soluzioni in Visual Studio.

    È possibile inserire contenuto statico del sito, ad esempio CSS, immagini e librerie JavaScript direttamente nei percorsi in cui si desidera.

  7. Il progetto contiene anche file di configurazione che gestiscono l'app Web in fase di esecuzione. L'applicazione predefinita configurazione viene archiviata in appsettings.json. Tuttavia, è possibile eseguire l'override di queste impostazioni usando appsettings.Development.json. Espandere il file appsettings.json per visualizzare il file appsettings.Development.json.

    La schermata mostra appsettings.json selezionato ed espanso, che espone appsettings.Development.json, in Esplora soluzioni in Visual Studio.

Esegui, debuggare e apporta modifiche

  1. Nella barra degli strumenti selezionare il pulsante https per compilare ed eseguire l'app in modalità di debug. In alternativa, premere F5oppure passare a Debug>Avvia debug dalla barra dei menu.

    Screenshot mostra il pulsante HTTPS evidenziato nella barra degli strumenti in Visual Studio.

    Nota

    È anche possibile che venga visualizzato un messaggio che chiede se si vuole accettare un certificato SSL di ASP.NET Core. Per visualizzare il codice in un Web browser, selezionare e quindi selezionare se viene visualizzato un messaggio di avviso di sicurezza di completamento. Scopri di più sull'applicazione di SSL in ASP.NET Core .

  2. Visual Studio avvia una finestra del browser. Nella barra dei menu dovrebbero essere visualizzate Home e Privacy.

  3. Selezionare Privacy dalla barra dei menu. La pagina Privacy nel browser esegue il rendering del testo che è impostato nel file Privacy.cshtml.

    Screenshot mostra la pagina Privacy MyCoreApp con il testo seguente: Utilizzare questa pagina per dettagliare l'informativa sulla privacy del sito.

  4. Tornare a Visual Studio e quindi premere MAIUSC+F5 per arrestare il processo di debug. Questa azione chiude il progetto nella finestra del browser.

  5. In Visual Studio aprire Privacy.cshtml per la modifica. Successivamente, elimina la frase Usa questa pagina per dettagliare l'informativa sulla privacy del tuo sito e sostituiscila con Questa pagina è in fase di costruzione a partire da @ViewData["TimeStamp"].

    Screenshot mostra il file Privacy.cshtml aperto nell'editor di Visual Studio Code con il testo aggiornato.

  6. A questo punto, verrà apportata una modifica al codice. Selezionare Privacy.cshtml.cs. Quindi, ripulire le direttive using nella parte superiore del file selezionando la seguente scorciatoia:

    Passare il mouse o selezionare una direttiva using disattivata. Una lampadina Azioni rapide appare sotto il cursore o nel margine sinistro. Selezionare la lampadina e quindi selezionare la freccia di espansione accanto a Rimuovi utilizzi non necessari.

    Screenshot mostra il file Privacy.cshtml nell'editor di Visual Studio Code con la descrizione comando Azioni rapide aperta e le modifiche di anteprima evidenziate.

    Selezionare ora Anteprima modifiche per visualizzare le modifiche apportate.

    Screenshot mostra la finestra di dialogo Anteprima modifiche. La finestra di dialogo mostra la direttiva da rimuovere e visualizza in anteprima la modifica del codice dopo la rimozione.

    Selezionare Applica. Visual Studio elimina le direttive using non necessarie dal file.

  7. Creare quindi una stringa per la data corrente formattata per le impostazioni adatte alla tua cultura o regione usando il metodo DateTime.ToString.

    • Il primo argomento per il metodo specifica la modalità di visualizzazione della data. In questo esempio viene usato l'identificatore di formato (d) che indica il formato di data breve.
    • Il secondo argomento è l'oggetto CultureInfo che specifica la cultura o la regione per la data. Il secondo argomento determina, tra le altre cose, la lingua di qualsiasi parola nella data e il tipo di separatori utilizzati.

    Modificare il corpo del metodo OnGet() in Privacy.cshtml.cs al seguente codice:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Si noti che la direttiva using seguente viene aggiunta automaticamente all'inizio del file:

    using System.Globalization;
    

    System.Globalization contiene la classe CultureInfo.

  9. Premere F5 per aprire il progetto nel Web browser.

  10. Nella parte superiore del sito Web, selezionare Privacy per visualizzare le modifiche.

    Screenshot che mostra la pagina Privacy di MyCoreApp che include le modifiche apportate per aggiungere la data.

  11. Chiudere il Web browser, premere MAIUSC+F5 per arrestare il debug.

Modificare la home page

  1. Nell'Esplora soluzioni , espandere la cartella Pagine e quindi selezionare Index.cshtml.

    Screenshot mostra l'opzione Index.cshtml selezionata nel nodo Pagine in Esplora soluzioni.

    Il file Index.cshtml corrisponde alla pagina Home nell'app Web, che gira in un browser web.

    Screenshot mostra la pagina principale della web app nella finestra del browser.

    Nell'editor di codice, viene visualizzato il codice HTML per il testo che appare sulla pagina Home.

    Screenshot mostra il file Index.cshtml per la home page nell'editor di Visual Studio Code.

  2. Sostituire il testo welcome con Hello World!

    Screenshot mostra il file Index.cshtml nell'editor di Visual Studio Code con il testo 'Welcome' modificato in 'Hello World!'.

  3. Selezionare https o premere CTRL+F5 per eseguire l'app e aprirla in un Web browser.

    Screenshot mostra il pulsante HTTPS evidenziato nella barra degli strumenti per Visual Studio.

  4. Nel web browser, puoi vedere le tue nuove modifiche nella pagina Home.

    Screenshot mostra la home page dell'app web nella finestra del browser. Il testo aggiornato indica 'Hello World!'

  5. Chiudere il Web browser, premere MAIUSC+F5 per arrestare il debug e salvare il progetto. È ora possibile chiudere Visual Studio.

Passaggi successivi

Congratulazioni per aver completato questa esercitazione. Ci auguriamo che si sia apprezzato l'apprendimento di C#, ASP.NET Core e dell'IDE di Visual Studio. Per altre informazioni sulla creazione di un'app Web o di un sito Web con C# e ASP.NET, continuare con l'esercitazione seguente:

In alternativa, informazioni su come inserire in contenitori l'app Web con Docker: