Tutorial: Introducción a Razor Pages en ASP.NET Core

  • Artículo
  • Tiempo de lectura: 9 minutos

Por Rick Anderson

Este es el primer tutorial de una serie en la que se enseñan los aspectos básicos de la compilación de una aplicación web de Razor Pages de ASP.NET Core.

Para una introducción más avanzada dirigida a los desarrolladores que están familiarizados con los controladores y las vistas, consulte Introducción a Razor Pages.

Si es la primera vez que desarrolla en ASP.NET Core y no está seguro de qué solución de interfaz de usuario web de ASP.NET Core se ajustará mejor a sus necesidades, consulte Elección de una interfaz de usuario de ASP.NET Core.

Al final de la serie, tendrá una aplicación que puede administrar una base de datos de películas.

En este tutorial ha:

  • Creará una aplicación web de Razor Pages.
  • Ejecutar la aplicación.
  • Examinar los archivos de proyecto.

Al final de este tutorial, tendrá una aplicación web de Razor Pages que mejorará en los tutoriales posteriores.

página Home o Index

Requisitos previos

Creación de una aplicación web de Razor Pages

  1. Inicie Visual Studio y seleccione Crear un proyecto. Para obtener más información, consulte Creación de un proyecto en Visual Studio.

    Creación de un proyecto nuevo desde la ventana de inicio

  2. En el cuadro de diálogo Crear un proyecto nuevo, seleccione Aplicación web ASP.NET Core y, a continuación, seleccione Siguiente.

    Creación de una aplicación web de ASP.NET Core

  3. En el cuadro de diálogo Configurar su nuevo proyecto, escriba RazorPagesMovie en Nombre del proyecto. Es importante asignarle el nombre RazorPagesMovie al proyecto (respetando mayúsculas y minúsculas) para que los espacios de nombres coincidan al copiar y pegar el código de ejemplo.

  4. Seleccione Crear.

    Configuración del proyecto

  5. En el cuadro de diálogo Crear una aplicación web ASP.NET Core, seleccione:

    1. .NET Core y ASP.NET Core 5.0 en los menús desplegables.
    2. Aplicación web.
    3. Crear.

    Selección de Aplicación web de ASP.NET Core

    Se crea el proyecto de inicio siguiente:

    Explorador de soluciones

Ejecutar la aplicación

  • Presione Ctrl+F5 para ejecutarla sin el depurador.

    Visual Studio muestra el siguiente cuadro de diálogo cuando un proyecto aún no está configurado para usar SSL:

    Este proyecto está configurado para usar SSL. Para evitar advertencias de SSL en el explorador, puede elegir confiar en el certificado autofirmado que ha generado IIS Express. ¿Quiere confiar en el certificado SSL de IIS Express?

    Haga clic en Sí si confía en el certificado SSL de IIS Express.

    Se muestra el cuadro de diálogo siguiente:

    Cuadro de diálogo de advertencia de seguridad

    Si acepta confiar en el certificado de desarrollo, seleccione Sí.

    Para obtener información sobre cómo confiar en el explorador Firefox, consulte Error de certificado SEC_ERROR_INADEQUATE_KEY_USAGE de Firefox.

    Visual Studio inicia IIS Express y ejecuta la aplicación. En la barra de direcciones aparece localhost:port# (y no algo como example.com). Esto es así porque localhost es el nombre de host estándar del equipo local. Localhost solo sirve las solicitudes web del equipo local. Cuando Visual Studio crea un proyecto web, se usa un puerto aleatorio para el servidor web.

Examen de los archivo del proyecto

He aquí un resumen de las principales carpetas y archivos del proyecto con los que va a trabajar en los próximos tutoriales.

Carpeta Pages

Contiene páginas de Razor y archivos auxiliares. Cada página de Razor consta de un par de archivos:

  • Un archivo .cshtml que tiene marcado HTML con código de C# que usa sintaxis de Razor.
  • Un archivo .cshtml.cs que tiene código C# que controla los eventos de página.

Los archivos auxiliares tienen nombres que comienzan con un carácter de subrayado. Por ejemplo, el archivo _Layout.cshtml configura los elementos de la interfaz de usuario comunes a todas las páginas. 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. Para obtener más información, vea Diseño en ASP.NET Core.

Carpeta wwwroot

Contiene los recursos estáticos, como los archivos HTML, los archivos de JavaScript y los archivos CSS. Para obtener más información, vea Archivos estáticos en ASP.NET Core.

appsettings.json

Contiene los datos de configuración, como las cadenas de conexión. Para obtener más información, vea Configuración en ASP.NET Core.

Program.cs

Contiene el punto de entrada de la aplicación. Para obtener más información, vea Host genérico de .NET en ASP.NET Core.

Startup.cs

Contiene código que configura el comportamiento de la aplicación. Para obtener más información, vea Inicio de la aplicación en ASP.NET Core.

Solución de problemas con el ejemplo completo

Si experimenta un problema que no puede resolver, compare el código con el proyecto completado. Vea o descargue el proyecto completado (cómo descargarlo).

Pasos siguientes

Siguiente: Adición de un modelo

Este es el primer tutorial de una serie en la que se enseñan los aspectos básicos de la compilación de una aplicación web de Razor Pages de ASP.NET Core.

Para una introducción más avanzada dirigida a los desarrolladores que están familiarizados con los controladores y las vistas, consulte Introducción a Razor Pages.

Al final de la serie, tendrá una aplicación que puede administrar una base de datos de películas.

Vea o descargue el código de ejemplo (cómo descargarlo).

En este tutorial ha:

  • Creará una aplicación web de Razor Pages.
  • Ejecutar la aplicación.
  • Examinar los archivos de proyecto.

Al final de este tutorial, tendrá una aplicación web de Razor Pages que compilará en los tutoriales posteriores.

Página Home o Index

Requisitos previos

Creación de una aplicación web de Razor Pages

  • En el menú Archivo de Visual Studio, seleccione Nuevo > Proyecto.

  • Cree una nueva aplicación web de ASP.NET Core y seleccione Siguiente. Creación del proyecto desde la ventana de inicio

  • Asigne al proyecto el nombre RazorPagesMovie. Es importante asignarle el nombre RazorPagesMovie al proyecto para que los espacios de nombres coincidan al copiar y pegar el código. Asignación de un nombre al proyecto

  • Seleccione ASP.NET Core 3.1 en la lista desplegable, después Aplicación web y, por último, Crear.

Selección de Aplicación web de ASP.NET Core

Se crea el proyecto de inicio siguiente:

Explorador de soluciones

Ejecutar la aplicación

  • Presione Ctrl+F5 para ejecutarla sin el depurador.

    Visual Studio muestra el siguiente cuadro de diálogo cuando un proyecto aún no está configurado para usar SSL:

    Este proyecto está configurado para usar SSL. Para evitar advertencias de SSL en el explorador, puede elegir confiar en el certificado autofirmado que ha generado IIS Express. ¿Quiere confiar en el certificado SSL de IIS Express?

    Haga clic en Sí si confía en el certificado SSL de IIS Express.

    Se muestra el cuadro de diálogo siguiente:

    Cuadro de diálogo de advertencia de seguridad

    Si acepta confiar en el certificado de desarrollo, seleccione Sí.

    Para obtener información sobre cómo confiar en el explorador Firefox, consulte Error de certificado SEC_ERROR_INADEQUATE_KEY_USAGE de Firefox.

    Visual Studio inicia IIS Express y ejecuta la aplicación. En la barra de direcciones aparece localhost:port# (y no algo como example.com). Esto es así porque localhost es el nombre de host estándar del equipo local. Localhost solo sirve las solicitudes web del equipo local. Cuando Visual Studio crea un proyecto web, se usa un puerto aleatorio para el servidor web.

Examen de los archivo del proyecto

He aquí un resumen de las principales carpetas y archivos del proyecto con los que va a trabajar en los próximos tutoriales.

Carpeta Pages

Contiene páginas de Razor y archivos auxiliares. Cada página de Razor consta de un par de archivos:

  • Un archivo .cshtml que tiene marcado HTML con código de C# que usa sintaxis de Razor.
  • Un archivo .cshtml.cs que tiene código C# que controla los eventos de página.

Los archivos auxiliares tienen nombres que comienzan con un carácter de subrayado. Por ejemplo, el archivo _Layout.cshtml configura los elementos de la interfaz de usuario comunes a todas las páginas. 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. Para obtener más información, vea Diseño en ASP.NET Core.

Carpeta wwwroot

Contiene los archivos estáticos, como los archivos HTML, los archivos de JavaScript y los archivos CSS. Para obtener más información, vea Archivos estáticos en ASP.NET Core.

appSettings.json

Contiene los datos de configuración, como las cadenas de conexión. Para obtener más información, vea Configuración en ASP.NET Core.

Program.cs

Contiene el punto de entrada del programa. Para obtener más información, vea Host genérico de .NET en ASP.NET Core.

Startup.cs

Contiene código que configura el comportamiento de la aplicación. Para obtener más información, vea Inicio de la aplicación en ASP.NET Core.

Pasos siguientes

Siguiente: Adición de un modelo

Este es el primer tutorial de una serie en la que se enseñan los aspectos básicos de la compilación de una aplicación web de Razor Pages de ASP.NET Core.

Para una introducción más avanzada dirigida a los desarrolladores que están familiarizados con los controladores y las vistas, consulte Introducción a Razor Pages.

Si es la primera vez que desarrolla en ASP.NET Core y no está seguro de qué solución de interfaz de usuario web de ASP.NET Core se ajustará mejor a sus necesidades, consulte Elección de una interfaz de usuario de ASP.NET Core.

Al final de la serie, tendrá una aplicación que puede administrar una base de datos de películas.

En este tutorial ha:

  • Creará una aplicación web de Razor Pages.
  • Ejecutar la aplicación.
  • Examinar los archivos de proyecto.

Al final de este tutorial, tendrá una aplicación web de Razor Pages que mejorará en los tutoriales posteriores.

página Home o Index

Requisitos previos

Creación de una aplicación web de Razor Pages

  1. Inicie Visual Studio 2022 y seleccione Crear un proyecto.

    Creación de un proyecto nuevo desde la ventana de inicio

  2. En el cuadro de diálogo Crear un proyecto nuevo, seleccione Aplicación web ASP.NET Core y, a continuación, seleccione Siguiente.

    Crear una aplicación web ASP.NET Core

  3. En el cuadro de diálogo Configurar su nuevo proyecto, escriba RazorPagesMovie en Nombre del proyecto. Es importante asignarle el nombre RazorPagesMovie al proyecto (respetando mayúsculas y minúsculas) para que los espacios de nombres coincidan al copiar y pegar el código de ejemplo.

    Configuración del nuevo proyecto

  4. Seleccione Next (Siguiente).

  5. En el cuadro de diálogo Información adicional, seleccione .NET 6.0 (versión preliminar) y, a continuación, Crear.

    Información adicional

    Se crea el proyecto de inicio siguiente:

    Explorador de soluciones

Ejecutar la aplicación

Seleccione RazorPagesMovie en el Explorador de soluciones y presione Ctrl+F5 para ejecutar la aplicación sin el depurador.

Visual Studio muestra el siguiente cuadro de diálogo cuando un proyecto aún no está configurado para usar SSL:

Este proyecto está configurado para usar SSL. Para evitar advertencias de SSL en el explorador, puede elegir confiar en el certificado autofirmado que ha generado IIS Express. ¿Quiere confiar en el certificado SSL de IIS Express?

Haga clic en Sí si confía en el certificado SSL de IIS Express.

Se muestra el cuadro de diálogo siguiente:

Cuadro de diálogo de advertencia de seguridad

Si acepta confiar en el certificado de desarrollo, seleccione Sí.

Para obtener información sobre cómo confiar en el explorador Firefox, consulte Error de certificado SEC_ERROR_INADEQUATE_KEY_USAGE de Firefox.

Visual Studio:

  • Ejecuta la aplicación, que inicia el servidor Kestrel.
  • Inicia el explorador predeterminado en https://localhost:5001, que muestra la interfaz de usuario de las aplicaciones.

Examen de los archivo del proyecto

Las secciones siguientes proporcionan un resumen de las principales carpetas y archivos del proyecto con los que va a trabajar en los próximos tutoriales.

Carpeta Pages

Contiene páginas de Razor y archivos auxiliares. Cada página de Razor consta de un par de archivos:

  • Un archivo .cshtml que tiene marcado HTML con código de C# que usa sintaxis de Razor.
  • Un archivo .cshtml.cs que tiene código C# que controla los eventos de página.

Los archivos auxiliares tienen nombres que comienzan con un carácter de subrayado. Por ejemplo, el archivo _Layout.cshtml configura los elementos de la interfaz de usuario comunes a todas las páginas. 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. Para obtener más información, vea Diseño en ASP.NET Core.

Carpeta wwwroot

Contiene los recursos estáticos, como los archivos HTML, los archivos de JavaScript y los archivos CSS. Para obtener más información, vea Archivos estáticos en ASP.NET Core.

appsettings.json

Contiene los datos de configuración, como las cadenas de conexión. Para obtener más información, vea Configuración en ASP.NET Core.

Program.cs

Contiene el código siguiente:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

Las siguientes líneas de código de este archivo crean un objeto WebApplicationBuilder con valores predeterminados preconfigurados, agregan compatibilidad con Razor Pages al contenedor de inserción de dependencias (DI) y compilan la aplicación:

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using RazorPagesMovie.Data;
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

builder.Services.AddDbContext<RazorPagesMovieContext>(options => 
       options.UseSqlServer(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));

var app = builder.Build();

El código resaltado siguiente habilita la página de excepciones para el desarrollador cuando la aplicación se ejecuta en modo de desarrollo:

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

La página de excepciones para el desarrollador proporciona información útil sobre las excepciones. Las aplicaciones de producción no deben ejecutarse en modo de desarrollo porque la página de excepciones para el desarrollador puede filtrar información confidencial.

El código resaltado siguiente establece el punto de conexión de excepción en /Error y habilita el Protocolo de seguridad de transporte estricta de HTTP (HSTS) cuando la aplicación no se ejecuta en modo de desarrollo:

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production
    // scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Por ejemplo, el código anterior se ejecuta cuando la aplicación está en modo de producción o de prueba. Para obtener más información, consulte Usar varios entornos en ASP.NET Core.

El código siguiente habilita varios middleware:

  • app.UseHttpsRedirection();: redirige las solicitudes HTTP a HTTPS.
  • app.UseStaticFiles();: permite que se proporcionen archivos estáticos, como HTML, CSS, imágenes y JavaScript. Para más información, consulte Archivos estáticos en ASP.NET Core.
  • app.UseRouting();: agrega coincidencia de rutas a la canalización de middleware. Para obtener más información, vea Enrutamiento en ASP.NET Core.
  • app.MapRazorPages();: configura el enrutamiento de puntos de conexión para Razor Pages.
  • app.UseAuthorization();: autoriza a un usuario a acceder a los recursos seguros. Esta aplicación no usa la autorización, por lo que esta línea podría quitarse.
  • app.Run();: ejecuta la aplicación.

Solución de problemas con el ejemplo completo

Si experimenta un problema que no puede resolver, compare el código con el proyecto completado. Vea o descargue el proyecto completado (cómo descargarlo).

Pasos siguientes

Siguiente: Adición de un modelo