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'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 installato. Visitare la pagina download di Visual Studio per una versione gratuita. Per altre informazioni sull'aggiornamento alla versione più recente di Visual Studio, vedere gli aggiornamenti di Visual Studio.
• Il pacchetto 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.

   

2. Nella finestra Crea un nuovo progetto selezionare C# dall'elenco Linguaggio. Seleziona 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, selezionare il modello di applicazione Web ASP.NET Core (Razor Pages) e quindi selezionare Avanti.

   

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

   

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

   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.
   • Singoli Account: Le autenticazioni vengono archiviate in un database locale o 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 controllo Abilita supporto contenitori e selezionare Nessuna per Tipo di autenticazione.

   

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.

Presentazione della soluzione

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

   

2. Espandi la cartella Pagine.

   

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

   

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.

   

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

   

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

   

   È 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.

   

Esegui, effettua il debug 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.

   

   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 Sìe quindi selezionare Sì se viene visualizzato un messaggio di avviso di sicurezza di completamento. Altre informazioni sull 'applicazione di SSL in ASP.NET Core.

2. Visual Studio avvia una finestra del browser. Nella barra dei menu dovresti vedere le pagine Home e Privacy.

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

   

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. Elimina quindi 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"].

   

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 scorciatoia seguente:

   Passare il mouse o selezionare una direttiva using disattivata. Una lampadina per 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.

   

   Selezionare ora Anteprima modifiche per visualizzare le modifiche apportate.

   

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

7. Crea quindi una stringa per la data corrente formattata per la 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 determina la 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 metodo OnGet() in Privacy.cshtml.cs con il codice seguente:

   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.

    

11. 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.

   

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

   

   Nell'editor di codice viene visualizzato il codice HTML del testo che compare nella pagina Home .

   

2. Sostituire il testo welcome con Hello World!

   

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

   

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

   

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:

Creare un'app Web Razor Pages con ASP.NET Core

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

Strumenti per container in Visual Studio

Collegamenti correlati

• Pubblicare l'app Web nel servizio app di Azure usando Visual Studio
• Personalizzare l'IDE e l'editor di Visual Studio