Condividi tramite


Esercitazione: introduzione a C# e ad 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'app 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. Visitare la pagina dei download di Visual Studio per una versione gratuita.

  • Per altre informazioni sull'aggiornamento alla versione più recente di Visual Studio, vedere Aggiornamenti di Visual Studio.

  • Per personalizzare l'esperienza di Visual Studio, vedere Personalizzare l'IDE e l'editor di Visual Studio.

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 shows the start window for Visual Studio. Create a new project option is highlighted.

  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 that shows the ASP.NET Core Web App project template highlighted in the New Project dialog box in Visual Studio.

    Nota

    Se non viene visualizzato il modello di ASP.NET Core Web App , è possibile installarlo dalla finestra Crea un nuovo progetto .

    Nel messaggio Non trovare quello che si sta cercando? nella parte inferiore dell'elenco dei modelli selezionare il collegamento Installa altri strumenti e funzionalità.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Nella Programma di installazione di Visual Studio selezionare ASP.NET e sviluppo Web.

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

    Selezionare Modifica nel Programma di installazione di Visual Studio. Potrebbe essere richiesto di salvare il lavoro. Selezionare Continua per installare il carico di lavoro.

    Tornare al passaggio 2 della procedura "Creare un progetto".

  3. Nella finestra Configura il nuovo progetto immettere MyCoreApp nel campo Nome progetto. Quindi seleziona Avanti.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. Nella finestra Informazioni aggiuntive verificare che .NET Core 3.1 sia 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:

    • Nessuno: nessuna autenticazione.
    • Singoli account: 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 Abilita Docker e selezionare Nessuno per Tipo di autenticazione.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET Core 3.1.

  5. Seleziona Crea.

Visual Studio aprirà il nuovo progetto.

  1. Nella finestra iniziale selezionare Crea un nuovo progetto.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  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 that shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Nota

    Se non viene visualizzato il modello di ASP.NET Core Web App , è possibile installarlo dalla finestra Crea un nuovo progetto .

    Nel messaggio Non trovare quello che si sta cercando? nella parte inferiore dell'elenco dei modelli selezionare il collegamento Installa altri strumenti e funzionalità.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Nella Programma di installazione di Visual Studio selezionare il carico di lavoro ASP.NET e sviluppo Web.

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

    Selezionare Modifica nel Programma di installazione di Visual Studio. Potrebbe essere richiesto di salvare il lavoro. Selezionare Continua per installare il carico di lavoro.

    Tornare al passaggio 2 della procedura "Creare un progetto".

  3. Nella finestra Configura il nuovo progetto immettere MyCoreApp nel campo Nome progetto. Quindi seleziona Avanti.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. Nella finestra Informazioni aggiuntive verificare che .NET 8.0 sia 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:

    • Nessuno: nessuna autenticazione.
    • Singoli account: 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 Abilita Docker e selezionare Nessuno per Tipo di autenticazione.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET 8.0.

  5. Seleziona Crea.

Visual Studio aprirà il nuovo progetto.

Informazioni sulla soluzione

Questa soluzione segue lo schema progettuale Pagina Razor. È diverso dallo schema progettuale Model-View-Controller (MVC), in quanto è semplificato in modo da includere il codice del modello e del controller all'interno della pagina Razor stessa.

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 shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Espandere la cartella Pages .

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

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

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  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 shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

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

    Screenshot shows the w w w root folder selected in the Solution Explorer 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. La configurazione predefinita dell'applicazione è archiviata in appsettings.json. È possibile eseguire comunque l'override di queste impostazioni con appsettings.Development.json.

  7. Per visualizzare il file appsettings.Development.json, espandere il file appsettings.json.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Esecuzione, debug e modifiche

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

    Screenshot shows the I I S Express button highlighted in the toolbar 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 scegliendo l'opzione Esegui come amministratore dal menu di scelta rapida.

    Potrebbe essere visualizzato un messaggio in cui si chiede se accettare un certificato SSL di IIS Express. 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 apre una finestra del browser. Nella barra dei menu dovrebbero essere visualizzate le pagine Home e Privacy .

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

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. In Visual Studio aprire Privacy.cshtml per la modifica. Eliminare quindi la frase, Usare questa pagina per dettagliare l'informativa sulla privacy del sito e sostituirla con Questa pagina è in fase di @ViewDatacostruzione a partire da ["TimeStamp"].

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

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

    Mouseover o selezionare una direttiva disattivata using . Una lampadina Azioni rapide viene visualizzata sotto il cursore o nel margine sinistro. Selezionare la lampadina e quindi selezionare Rimuovi utilizzi non necessari.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

    Selezionare ora Anteprima modifiche per visualizzare le modifiche apportate.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

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

  7. Nel metodo OnGet() modificare quindi il corpo con il 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 è incluso nell'ambito.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    Aprire la barra degli strumenti Elenco errori per visualizzare gli errori. Se la barra degli strumenti Elenco errori non è visualizzata, passare a Visualizza>elenco errori dalla barra dei menu superiore.

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  9. Correggere l'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 Sistema. Per aggiungere questa direttiva all'inizio del file e risolvere gli errori.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

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

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

    Screenshot showing the updated Privacy page that includes the changes you made.

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

Modificare la home page

  1. Nella Esplora soluzioni espandere la cartella Pages e quindi selezionare Index.cshtml.

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

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

     Screenshot shows the Home page for the web app in the browser window.

    Nell'editor di codice viene visualizzato il codice HTML per il testo visualizzato nella home page.

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Sostituire il testo di benvenuto con Hello World!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. Nel Web browser vengono visualizzate le nuove modifiche nella home page.

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  5. Chiudere il Web browser, premere MAIUSC+F5 per arrestare 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 shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. Espandere la cartella Pages .

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

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

    Screenshot shows the Index.cshtml file open in the Visual Studio Code editor.

  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 shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio Code editor.

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

    Screenshot shows the w w w root folder selected in the Solution Explorer 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. La configurazione predefinita dell'applicazione è archiviata in appsettings.json. È possibile eseguire comunque l'override di queste impostazioni con appsettings.Development.json. Per visualizzare il file appsettings.Development.json, espandere il file appsettings.json.

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Esecuzione, debug e modifiche

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

    Screenshot shows the I I S Express button highlighted in the toolbar 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 scegliendo l'opzione Esegui come amministratore dal menu di scelta rapida.

    Potrebbe essere visualizzato un messaggio in cui si chiede se accettare un certificato SSL di IIS Express. 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 apre una finestra del browser. Nella barra dei menu dovrebbero essere visualizzate le pagine Home e Privacy .

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

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. In Visual Studio aprire Privacy.cshtml per la modifica. Eliminare quindi la frase, Usare questa pagina per dettagliare l'informativa sulla privacy del sito e sostituirla con Questa pagina è in fase di @ViewDatacostruzione a partire da ["TimeStamp"].

    Screenshot shows the Privacy.cshtml file open in the Visual Studio Code editor with the updated text.

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

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

    Screenshot shows the Privacy.cshtml file in the Visual Studio Code editor with the Quick Actions tooltip open and Preview changes highlighted.

    Selezionare ora Anteprima modifiche per visualizzare le modifiche apportate.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    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 cultura o l'area 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 le impostazioni cultura o l'area geografica 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 OnGet() metodo nel codice seguente:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Si noti che la direttiva seguente using 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 showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

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

Modificare la home page

  1. Nella Esplora soluzioni espandere la cartella Pages e quindi selezionare Index.cshtml.

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

    Nell'editor di codice viene visualizzato il codice HTML per il testo visualizzato nella home page.

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio Code editor.

  2. Sostituire il testo di benvenuto con Hello World!

    Screenshot shows the Index.cshtml file in the Visual Studio Code editor with the 'Welcome' text changed to 'Hello World!'.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. Nel Web browser vengono visualizzate le nuove modifiche nella home page.

    Screenshot shows the Home page for the web app in the browser window. The updated text says '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

L'esercitazione è stata completata. 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:

Vedi anche

Publish your web app to Azure App Service by using Visual Studio (Pubblicare l'app Web in Servizio app di Azure con Visual Studio)