Esercitazione: Introduzione all'uso di pagine Razor in ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Di Rick AndersonBy Rick Anderson

Questa è la prima esercitazione di una serie che illustra i concetti di base per la creazione di un'app Web ASP.NET Core Razor Pages.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Per un'introduzione più approfondita destinata agli sviluppatori che hanno familiarità con controller e visualizzazioni, vedere Introduzione a Razor Pages.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Al termine della serie si otterrà un'app che gestisce un database di film.At the end of the series, you'll have an app that manages a database of movies.

Le attività di questa esercitazione sono le seguenti:In this tutorial, you:

  • Creare un'app Web di Razor Pages.Create a Razor Pages web app.
  • Eseguire l'app.Run the app.
  • Esaminare i file di progetto.Examine the project files.

Alla fine di questa esercitazione si avrà un'app Web Razor Pages funzionante, che verrà compilata in esercitazioni successive.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Pagina Home o di indice

PrerequisitiPrerequisites

Creare un'app Web di Razor PagesCreate a Razor Pages web app

  • Dal menu File di Visual Studio selezionare Nuovo > Progetto.From the Visual Studio File menu, select New > Project.

  • Creare una nuova applicazione Web ASP.NET Core e selezionare Avanti.Create a new ASP.NET Core Web Application and select Next. nuova applicazione Web ASP.NET Corenew ASP.NET Core Web Application

  • Denominare il progetto RazorPagesMovie.Name the project RazorPagesMovie. È importante denominare il progetto RazorPagesMovie in modo che gli spazi dei nomi corrispondano nell'operazione copia/incolla del codice.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. nuova applicazione Web ASP.NET Corenew ASP.NET Core Web Application

  • Selezionare ASP.NET Core 3.0 nell'elenco a discesa Applicazione Web e quindi selezionare Crea.Select ASP.NET Core 3.0 in the dropdown, Web Application, and then select Create.

nuova applicazione Web ASP.NET Core

Viene creato il progetto iniziale seguente:The following starter project is created:

Esplora soluzioni

Esecuzione dell'appRun the app

  • Premere CTRL+F5 per l'esecuzione senza il debugger.Press Ctrl+F5 to run without the debugger.

    Visual Studio visualizza la finestra di dialogo seguente:Visual Studio displays the following dialog:

    Il progetto è configurato per l'utilizzo di SSL.

    Selezionare se si considera attendibile il certificato SSL di IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    Verrà visualizzata la finestra di dialogo seguente:The following dialog is displayed:

    Finestra di dialogo Avviso di sicurezza

    Selezionare se si accetta di considerare attendibile il certificato di sviluppo.Select Yes if you agree to trust the development certificate.

    Per altre informazioni, vedere Considerare attendibile il certificato di sviluppo di ASP.NET Core HTTPS.See Trust the ASP.NET Core HTTPS development certificate for more information.

    Visual Studio avvia IIS Express ed esegue l'app.Visual Studio starts IIS Express and runs the app. La barra degli indirizzi visualizza localhost:port# e non example.com o simili.The address bar shows localhost:port# and not something like example.com. Ciò accade perché localhost è il nome host standard per il computer locale.That's because localhost is the standard hostname for the local computer. Localhost viene usato solo per le richieste web del computer locale.Localhost only serves web requests from the local computer. Quando Visual Studio crea un progetto Web, per il server Web viene usata una porta casuale.When Visual Studio creates a web project, a random port is used for the web server.

Esaminare i file di progettoExamine the project files

Di seguito viene visualizzata una panoramica delle cartelle e dei file principali del progetto, che verranno usati in esercitazioni successive.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Cartella PagesPages folder

Contiene le pagine Razor e i file di supporto.Contains Razor pages and supporting files. Ogni pagina Razor è una coppia di file:Each Razor page is a pair of files:

  • Un file con estensione cshtml contenente il markup HTML con codice C# che usa la sintassi Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Un file con estensione cshtml.cs contenente il codice C# per la gestione degli eventi della pagina.A .cshtml.cs file that contains C# code that handles page events.

I nomi dei file di supporto iniziano con un carattere di sottolineatura.Supporting files have names that begin with an underscore. Ad esempio, il file _Layout.cshtml configura elementi dell'interfaccia utente comuni a tutte le pagine.For example, the _Layout.cshtml file configures UI elements common to all pages. Questo file imposta il menu di navigazione nella parte superiore della pagina e le informazioni sul copyright in fondo alla pagina.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Per altre informazioni, vedere Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

Cartella wwwrootwwwroot folder

Contiene i file statici, ad esempio i file HTML, i file JavaScript e i file CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Per altre informazioni, vedere File statici in ASP.NET Core.For more information, see File statici in ASP.NET Core.

appSettings.jsonappSettings.json

Contiene i dati di configurazione, ad esempio le stringhe di connessione.Contains configuration data, such as connection strings. Per altre informazioni, vedere Configurazione in ASP.NET Core.For more information, see Configurazione in ASP.NET Core.

Program.csProgram.cs

Contiene il punto di ingresso per il programma.Contains the entry point for the program. Per altre informazioni, vedere Host generico .NET.For more information, see Host generico .NET.

Startup.csStartup.cs

Contiene codice che consente di configurare il comportamento dell'app.Contains code that configures app behavior. Per altre informazioni, vedere Avvio dell'app in ASP.NET Core.For more information, see Avvio dell'app in ASP.NET Core.

Passaggi successiviNext steps

Passare all'esercitazione successiva della serie:Advance to the next tutorial in the series:

Questa è la prima esercitazione di una serie.This is the first tutorial of a series. La serie illustra le nozioni di base della creazione di un'app Web ASP.NET Core Razor Pages.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Per un'introduzione più approfondita destinata agli sviluppatori che hanno familiarità con controller e visualizzazioni, vedere Introduzione a Razor Pages.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Al termine della serie si otterrà un'app che gestisce un database di film.At the end of the series, you'll have an app that manages a database of movies.

Le attività di questa esercitazione sono le seguenti:In this tutorial, you:

  • Creare un'app Web di Razor Pages.Create a Razor Pages web app.
  • Eseguire l'app.Run the app.
  • Esaminare i file di progetto.Examine the project files.

Alla fine di questa esercitazione si avrà un'app Web Razor Pages funzionante, che verrà compilata in esercitazioni successive.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Pagina Home o di indice

PrerequisitiPrerequisites

Avviso

Se si usa Visual Studio 2017, vedere dotnet/sdk issue #3124 per informazioni sulle versioni di .NET Core SDK che non funzionano con Visual Studio.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Creare un'app Web di Razor PagesCreate a Razor Pages web app

  • Dal menu File di Visual Studio selezionare Nuovo > Progetto.From the Visual Studio File menu, select New > Project.

  • Creare una nuova applicazione Web ASP.NET Core e selezionare Avanti.Create a new ASP.NET Core Web Application and select Next.

    nuova applicazione Web ASP.NET Core

  • Denominare il progetto RazorPagesMovie.Name the project RazorPagesMovie. È importante denominare il progetto RazorPagesMovie in modo che gli spazi dei nomi corrispondano nell'operazione copia/incolla del codice.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    nuova applicazione Web ASP.NET Core

  • Selezionare ASP.NET Core 2.2 nell'elenco a discesa Applicazione Web e quindi selezionare Crea.Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

nuova applicazione Web ASP.NET Core

Viene creato il progetto iniziale seguente:The following starter project is created:

Esplora soluzioni

Esecuzione dell'appRun the app

  • Premere CTRL+F5 per l'esecuzione senza il debugger.Press Ctrl+F5 to run without the debugger.

    Visual Studio visualizza la finestra di dialogo seguente:Visual Studio displays the following dialog:

    Il progetto è configurato per l'utilizzo di SSL.

    Selezionare se si considera attendibile il certificato SSL di IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    Verrà visualizzata la finestra di dialogo seguente:The following dialog is displayed:

    Finestra di dialogo Avviso di sicurezza

    Selezionare se si accetta di considerare attendibile il certificato di sviluppo.Select Yes if you agree to trust the development certificate.

    Per altre informazioni, vedere Considerare attendibile il certificato di sviluppo di ASP.NET Core HTTPS.See Trust the ASP.NET Core HTTPS development certificate for more information.

    Visual Studio avvia IIS Express ed esegue l'app.Visual Studio starts IIS Express and runs the app. La barra degli indirizzi visualizza localhost:port# e non example.com o simili.The address bar shows localhost:port# and not something like example.com. Ciò accade perché localhost è il nome host standard per il computer locale.That's because localhost is the standard hostname for the local computer. Localhost viene usato solo per le richieste web del computer locale.Localhost only serves web requests from the local computer. Quando Visual Studio crea un progetto Web, per il server Web viene usata una porta casuale.When Visual Studio creates a web project, a random port is used for the web server.

  • Nella home page dell'app selezionare Accetto per autorizzare il rilevamento.On the app's home page, select Accept to consent to tracking.

    Questa app non tiene traccia delle informazioni personali, ma il modello di progetto include la funzionalità di consenso nel caso in cui risulti necessaria la conformità al Regolamento generale sulla protezione dei dati (GDPR) dell'Unione Europea.This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Pagina Home o di indice

    La figura seguente visualizza l'app dopo che è stato impostato il consenso al rilevamento:The following image shows the app after you give consent to tracking:

    Pagina Home o di indice

Esaminare i file di progettoExamine the project files

Di seguito viene visualizzata una panoramica delle cartelle e dei file principali del progetto, che verranno usati in esercitazioni successive.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Cartella PagesPages folder

Contiene le pagine Razor e i file di supporto.Contains Razor pages and supporting files. Ogni pagina Razor è una coppia di file:Each Razor page is a pair of files:

  • Un file con estensione cshtml contenente il markup HTML con codice C# che usa la sintassi Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Un file con estensione cshtml.cs contenente il codice C# per la gestione degli eventi della pagina.A .cshtml.cs file that contains C# code that handles page events.

I nomi dei file di supporto iniziano con un carattere di sottolineatura.Supporting files have names that begin with an underscore. Ad esempio, il file _Layout.cshtml configura elementi dell'interfaccia utente comuni a tutte le pagine.For example, the _Layout.cshtml file configures UI elements common to all pages. Questo file imposta il menu di navigazione nella parte superiore della pagina e le informazioni sul copyright in fondo alla pagina.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Per altre informazioni, vedere Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

Cartella wwwrootwwwroot folder

Contiene i file statici, ad esempio i file HTML, i file JavaScript e i file CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Per altre informazioni, vedere File statici in ASP.NET Core.For more information, see File statici in ASP.NET Core.

appSettings.jsonappSettings.json

Contiene i dati di configurazione, ad esempio le stringhe di connessione.Contains configuration data, such as connection strings. Per altre informazioni, vedere Configurazione in ASP.NET Core.For more information, see Configurazione in ASP.NET Core.

Program.csProgram.cs

Contiene il punto di ingresso per il programma.Contains the entry point for the program. Per altre informazioni, vedere Host generico .NET.For more information, see Host generico .NET.

Startup.csStartup.cs

Contiene codice che configura il comportamento dell'app, ad esempio se richiede il consenso per i cookie.Contains code that configures app behavior, such as whether it requires consent for cookies. Per altre informazioni, vedere Avvio dell'app in ASP.NET Core.For more information, see Avvio dell'app in ASP.NET Core.

Risorse aggiuntiveAdditional resources

Passaggi successiviNext steps

Passare all'esercitazione successiva della serie:Advance to the next tutorial in the series: