Tutorial: Introducción a Razor Pages en ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Por Rick AndersonBy Rick Anderson

Este es el primer tutorial de una serie de varios que enseña los aspectos básicos de la compilación de una aplicación web de Razor Pages de ASP.NET Core.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Para acceder a una introducción más avanzada pensada para desarrolladores con experiencia, consulte Introducción a Razor Pages.For a more advanced introduction aimed at experienced developers, see Introduction to Razor Pages.

Al final de la serie, tendrá una aplicación que puede administrar una base de datos de películas.At the end of the series, you'll have an app that manages a database of movies.

En este tutorial, hizo lo siguiente:In this tutorial, you:

  • Crear una aplicación web de Razor Pages.Create a Razor Pages web app.
  • Ejecute la aplicación.Run the app.
  • Examinar los archivos de proyecto.Examine the project files.

Al final de este tutorial, tendrá una aplicación web de Razor Pages que compilará en los tutoriales posteriores.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Página Inicio o Índice

Requisitos previosPrerequisites

Creación de una aplicación web de páginas de RazorCreate a Razor Pages web app

  • En el menú Archivo de Visual Studio, seleccione Nuevo > Proyecto.From the Visual Studio File menu, select New > Project.

  • Cree una nueva aplicación web de ASP.NET Core y seleccione Siguiente.Create a new ASP.NET Core Web Application and select Next. Nueva aplicación web de ASP.NET Corenew ASP.NET Core Web Application

  • Asigne al proyecto el nombre RazorPagesMovie.Name the project RazorPagesMovie. Es importante asignarle el nombre RazorPagesMovie para que los espacios de nombres coincidan al copiar y pegar el código.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. Nueva aplicación web de ASP.NET Corenew ASP.NET Core Web Application

  • Seleccione ASP.NET Core 3.0 en la lista desplegable, después Aplicación web y, por último, Crear.Select ASP.NET Core 3.0 in the dropdown, Web Application, and then select Create.

Nueva aplicación web de ASP.NET Core

Se crea el proyecto de inicio siguiente:The following starter project is created:

Explorador de soluciones

Ejecución de la aplicaciónRun the app

  • Presione Ctrl+F5 para ejecutarla sin el depurador.Press Ctrl+F5 to run without the debugger.

    Visual Studio muestra el cuadro de diálogo siguiente:Visual Studio displays the following dialog:

    Este proyecto está configurado para usar SSL.

    Haga clic en si confía en el certificado SSL de IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    Se muestra el cuadro de diálogo siguiente:The following dialog is displayed:

    Cuadro de diálogo de advertencia de seguridad

    Si acepta confiar en el certificado de desarrollo, seleccione .Select Yes if you agree to trust the development certificate.

    Para obtener más información, vea Confiar en el certificado de desarrollo de ASP.NET Core HTTPS .See Trust the ASP.NET Core HTTPS development certificate for more information.

    Visual Studio inicia IIS Express y ejecuta la aplicación.Visual Studio starts IIS Express and runs the app. En la barra de direcciones aparece localhost:port# (y no algo como example.com).The address bar shows localhost:port# and not something like example.com. Esto es así porque localhost es el nombre de host estándar del equipo local.That's because localhost is the standard hostname for the local computer. Localhost solo sirve las solicitudes web del equipo local.Localhost only serves web requests from the local computer. Cuando Visual Studio crea un proyecto web, se usa un puerto aleatorio para el servidor web.When Visual Studio creates a web project, a random port is used for the web server.

Examen de los archivo del proyectoExamine the project files

He aquí un resumen de las principales carpetas y archivos del proyecto con los que va a trabajar en los próximos tutoriales.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Carpeta PagesPages folder

Contiene Razor Pages y los archivos auxiliares.Contains Razor pages and supporting files. Cada página de Razor se compone de un par de archivos:Each Razor page is a pair of files:

  • Archivo .cshtml que contiene el marcado HTML con código C# que usa la sintaxis Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Archivo . cshtml.cs que contiene C# código que controla los eventos de página.A .cshtml.cs file that contains C# code that handles page events.

Los archivos auxiliares tienen nombres que comienzan con un carácter de subrayado.Supporting files have names that begin with an underscore. Por ejemplo, el archivo _Layout.cshtml configura los elementos de la interfaz de usuario comunes a todas las páginas.For example, the _Layout.cshtml file configures UI elements common to all pages. Este archivo configura el menú de navegación de la parte superior de la página y el aviso de copyright de la parte inferior de la página.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Para más información, consulte Diseño en ASP.NET Core.For more information, see Diseño en ASP.NET Core.

Carpeta wwwrootwwwroot folder

Contiene los archivos estáticos, como los archivos HTML, los archivos de JavaScript y los archivos CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Para más información, consulte Archivos estáticos en ASP.NET Core.For more information, see Archivos estáticos en ASP.NET Core.

appSettings.jsonappSettings.json

Contiene los datos de configuración, como las cadenas de conexión.Contains configuration data, such as connection strings. Para más información, consulte Configuración en ASP.NET Core.For more information, see Configuración en ASP.NET Core.

Program.csProgram.cs

Contiene el punto de entrada del programa.Contains the entry point for the program. Para más información, consulte Host genérico de .NET.For more information, see Host genérico de .NET.

Startup.csStartup.cs

Contiene código que configura el comportamiento de la aplicación.Contains code that configures app behavior. Para más información, consulte Inicio de la aplicación en ASP.NET Core.For more information, see Inicio de la aplicación en ASP.NET Core.

Pasos siguientesNext steps

Pase al siguiente tutorial de la serie:Advance to the next tutorial in the series:

Este es el primer tutorial de una serie.This is the first tutorial of a series. En la serie se enseñan los conceptos básicos de la compilación de una aplicación web de Razor Pages en ASP.NET Core.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Para acceder a una introducción más avanzada pensada para desarrolladores con experiencia, consulte Introducción a Razor Pages.For a more advanced introduction aimed at experienced developers, see Introduction to Razor Pages.

Al final de la serie, tendrá una aplicación que puede administrar una base de datos de películas.At the end of the series, you'll have an app that manages a database of movies.

En este tutorial, hizo lo siguiente:In this tutorial, you:

  • Crear una aplicación web de Razor Pages.Create a Razor Pages web app.
  • Ejecute la aplicación.Run the app.
  • Examinar los archivos de proyecto.Examine the project files.

Al final de este tutorial, tendrá una aplicación web de Razor Pages que compilará en los tutoriales posteriores.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Página Inicio o Índice

Requisitos previosPrerequisites

Advertencia

Si usa Visual Studio 2017, consulte dotnet/sdk problema #3124 para información sobre las versiones del SDK de .NET Core que no funcionan 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.

Creación de una aplicación web de páginas de RazorCreate a Razor Pages web app

  • En el menú Archivo de Visual Studio, seleccione Nuevo > Proyecto.From the Visual Studio File menu, select New > Project.

  • Cree una nueva aplicación web de ASP.NET Core y seleccione Siguiente.Create a new ASP.NET Core Web Application and select Next.

    Nueva aplicación web de ASP.NET Core

  • Asigne al proyecto el nombre RazorPagesMovie.Name the project RazorPagesMovie. Es importante asignarle el nombre RazorPagesMovie para que los espacios de nombres coincidan al copiar y pegar el código.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    Nueva aplicación web de ASP.NET Core

  • Seleccione ASP.NET Core 2.2 en la lista desplegable, después Aplicación web y, por último, Crear.Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

Nueva aplicación web de ASP.NET Core

Se crea el proyecto de inicio siguiente:The following starter project is created:

Explorador de soluciones

Ejecución de la aplicaciónRun the app

  • Presione Ctrl+F5 para ejecutarla sin el depurador.Press Ctrl+F5 to run without the debugger.

    Visual Studio muestra el cuadro de diálogo siguiente:Visual Studio displays the following dialog:

    Este proyecto está configurado para usar SSL.

    Haga clic en si confía en el certificado SSL de IIS Express.Select Yes if you trust the IIS Express SSL certificate.

    Se muestra el cuadro de diálogo siguiente:The following dialog is displayed:

    Cuadro de diálogo de advertencia de seguridad

    Si acepta confiar en el certificado de desarrollo, seleccione .Select Yes if you agree to trust the development certificate.

    Para obtener más información, vea Confiar en el certificado de desarrollo de ASP.NET Core HTTPS .See Trust the ASP.NET Core HTTPS development certificate for more information.

    Visual Studio inicia IIS Express y ejecuta la aplicación.Visual Studio starts IIS Express and runs the app. En la barra de direcciones aparece localhost:port# (y no algo como example.com).The address bar shows localhost:port# and not something like example.com. Esto es así porque localhost es el nombre de host estándar del equipo local.That's because localhost is the standard hostname for the local computer. Localhost solo sirve las solicitudes web del equipo local.Localhost only serves web requests from the local computer. Cuando Visual Studio crea un proyecto web, se usa un puerto aleatorio para el servidor web.When Visual Studio creates a web project, a random port is used for the web server.

  • En la página principal de la aplicación, seleccione Aceptar para dar su consentimiento al seguimiento.On the app's home page, select Accept to consent to tracking.

    Esta aplicación no realiza un seguimiento de la información personal, pero la plantilla del proyecto incluye la función de consentimiento en caso de que sea necesaria para cumplir con el Reglamento general de protección de datos (RGPD) de la Unión 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).

    Página Inicio o Índice

    En la siguiente imagen se muestra la aplicación tras haber dado su consentimiento al seguimiento:The following image shows the app after you give consent to tracking:

    Página Inicio o Índice

Examen de los archivo del proyectoExamine the project files

He aquí un resumen de las principales carpetas y archivos del proyecto con los que va a trabajar en los próximos tutoriales.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Carpeta PagesPages folder

Contiene Razor Pages y los archivos auxiliares.Contains Razor pages and supporting files. Cada página de Razor se compone de un par de archivos:Each Razor page is a pair of files:

  • Archivo .cshtml que contiene el marcado HTML con código C# que usa la sintaxis Razor.A .cshtml file that contains HTML markup with C# code using Razor syntax.
  • Archivo . cshtml.cs que contiene C# código que controla los eventos de página.A .cshtml.cs file that contains C# code that handles page events.

Los archivos auxiliares tienen nombres que comienzan con un carácter de subrayado.Supporting files have names that begin with an underscore. Por ejemplo, el archivo _Layout.cshtml configura los elementos de la interfaz de usuario comunes a todas las páginas.For example, the _Layout.cshtml file configures UI elements common to all pages. Este archivo configura el menú de navegación de la parte superior de la página y el aviso de copyright de la parte inferior de la página.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Para más información, consulte Diseño en ASP.NET Core.For more information, see Diseño en ASP.NET Core.

Carpeta wwwrootwwwroot folder

Contiene los archivos estáticos, como los archivos HTML, los archivos de JavaScript y los archivos CSS.Contains static files, such as HTML files, JavaScript files, and CSS files. Para más información, consulte Archivos estáticos en ASP.NET Core.For more information, see Archivos estáticos en ASP.NET Core.

appSettings.jsonappSettings.json

Contiene los datos de configuración, como las cadenas de conexión.Contains configuration data, such as connection strings. Para más información, consulte Configuración en ASP.NET Core.For more information, see Configuración en ASP.NET Core.

Program.csProgram.cs

Contiene el punto de entrada del programa.Contains the entry point for the program. Para más información, consulte Host genérico de .NET.For more information, see Host genérico de .NET.

Startup.csStartup.cs

Contiene código que configura el comportamiento de la aplicación, como, por ejemplo, si se requiere consentimiento para las cookies.Contains code that configures app behavior, such as whether it requires consent for cookies. Para más información, consulte Inicio de la aplicación en ASP.NET Core.For more information, see Inicio de la aplicación en ASP.NET Core.

Recursos adicionalesAdditional resources

Pasos siguientesNext steps

Pase al siguiente tutorial de la serie:Advance to the next tutorial in the series: