Compartir a través de

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

Nota:

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la política de soporte de .NET y .NET Core. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas. Para obtener una introducción en vídeo, consulte Entity Framework Core para principiantes.

Si no está familiarizado con ASP.NET desarrollo principal y no está seguro de qué solución de interfaz de usuario web principal de ASP.NET se ajusta mejor a sus necesidades, consulte Elegir una interfaz de usuario principal de ASP.NET.

Al final de este tutorial, obtendrá una aplicación web de páginas Razor que administra una base de datos de películas.

Home o página Índice

Requisitos previos

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

  • Inicie Visual Studio y seleccione Nuevo proyecto.

  • En el cuadro de diálogo Crear un nuevo proyecto , seleccione ASP.NET Core Web App (Razor Pages)>Siguiente.

  • En el cuadro de diálogo Configurar el nuevo proyecto , escriba RazorPagesMovie en Nombre del proyecto. Es importante asignar un nombre al proyecto RazorPagesMovie, incluida la coincidencia de mayúsculas, por lo que los espacios de nombres coincidirán al copiar y pegar código de ejemplo.

  • Seleccione Siguiente.

  • En el cuadro de diálogo Información adicional:

    • Seleccione .NET 9.0.
    • Comprobar: no use instrucciones de nivel superior desactivadas.

  • Seleccione Crear.

    Información adicional

    Se crea el proyecto de inicio siguiente:

    Explorador de soluciones

Para obtener enfoques alternativos para crear el proyecto, consulte Creación de un nuevo proyecto en Visual Studio.

Ejecución de 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

Seleccione 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

Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

Visual Studio:

  • Ejecuta la aplicación, que inicia el Kestrel servidor.
  • Inicia el explorador predeterminado en https://localhost:<port>, que muestra la interfaz de usuario de las aplicaciones. <port> es el puerto aleatorio que se asignó cuando se creó la aplicación.

Cierre la ventana del explorador.

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. _Layout.cshtml configura el menú de navegación de la parte superior de la página y el aviso de copyright de la parte inferior. 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, consulte 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, consulte 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.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.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorPages();

app.Run();

Las siguientes líneas de código de este archivo crean un WebApplicationBuilder con valores predeterminados preconfigurados, agregan compatibilidad con páginas al Razor, y compilan la aplicación.

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

La página de excepciones para desarrolladores está habilitada de forma predeterminada y 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 siguiente código establece el punto de conexión de excepción a /Error y habilita el Protocolo de seguridad de transporte estricto HTTP (HSTS) cuando la aplicación no está en modo de desarrollo:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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 Uso de varios entornos en ASP.NET Core.

El código siguiente habilita varios Middlewares:

  • app.UseHttpsRedirection();: redirige las solicitudes HTTP a HTTPS.
  • app.UseRouting();: agrega coincidencia de rutas a la canalización de middleware. Para obtener más información, consulte Enrutamiento en ASP.NET Core.
  • 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.MapRazorPages();: configura el enrutamiento de puntos de conexión para Razor Pages.
  • app.MapStaticAssets();: Optimice la entrega de recursos estáticos en una aplicación, como HTML, CSS, imágenes y JavaScript. Para obtener más información, consulte Novedades de ASP.NET Core en .NET 9.
  • 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 descargar).

Pasos siguientes

Siguiente: Agregar 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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas. Para obtener una introducción en vídeo, consulte Entity Framework Core para principiantes.

Si no está familiarizado con ASP.NET desarrollo principal y no está seguro de qué solución de interfaz de usuario web principal de ASP.NET se ajusta mejor a sus necesidades, consulte Elegir una interfaz de usuario principal de ASP.NET.

Al final de este tutorial, obtendrá una aplicación web de páginas Razor que administra una base de datos de películas.

Home o página Índice

Requisitos previos

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

  • Inicie Visual Studio y seleccione Nuevo proyecto.

  • En el cuadro de diálogo Crear un nuevo proyecto , seleccione ASP.NET Core Web App (Razor Pages)>Siguiente.

  • En el cuadro de diálogo Configurar el nuevo proyecto , escriba RazorPagesMovie en Nombre del proyecto. Es importante asignar un nombre al proyecto RazorPagesMovie, incluida la coincidencia de mayúsculas, por lo que los espacios de nombres coincidirán al copiar y pegar código de ejemplo.

  • Seleccione Siguiente.

  • En el cuadro de diálogo Información adicional:

    • Seleccione .NET 8.0 (Soporte técnico a largo plazo).
    • Comprobar: no use instrucciones de nivel superior desactivadas.

  • Seleccione Crear.

    Información adicional

    Se crea el proyecto de inicio siguiente:

    Explorador de soluciones

Para obtener enfoques alternativos para crear el proyecto, consulte Creación de un nuevo proyecto en Visual Studio.

Ejecución de 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

Seleccione 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

Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

Visual Studio:

  • Ejecuta la aplicación, que inicia el Kestrel servidor.
  • Inicia el explorador predeterminado en https://localhost:<port>, que muestra la interfaz de usuario de las aplicaciones. <port> es el puerto aleatorio que se asignó cuando se creó la aplicación.

Cierre la ventana del explorador.

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. _Layout.cshtml configura el menú de navegación de la parte superior de la página y el aviso de copyright de la parte inferior. 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, consulte 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, consulte 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.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 WebApplicationBuilder con valores predeterminados preconfigurados, agregan compatibilidad con páginas al Razor, y compilan la aplicación.

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

La página de excepciones para desarrolladores está habilitada de forma predeterminada y 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 siguiente código establece el punto de conexión de excepción a /Error y habilita el Protocolo de seguridad de transporte estricto HTTP (HSTS) cuando la aplicación no está en modo de desarrollo:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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 Uso de varios entornos en ASP.NET Core.

El código siguiente habilita varios Middlewares:

  • 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 obtener 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, consulte 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 descargar).

Pasos siguientes

Siguiente: Agregar 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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas. Para obtener una introducción en vídeo, consulte Entity Framework Core para principiantes.

Si no está familiarizado con ASP.NET desarrollo principal y no está seguro de qué solución de interfaz de usuario web principal de ASP.NET se ajusta mejor a sus necesidades, consulte Elegir una interfaz de usuario principal de ASP.NET.

Al final de este tutorial, obtendrá una aplicación web de páginas Razor que administra una base de datos de películas.

Home o página Índice

Requisitos previos

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

  • Inicie Visual Studio y seleccione Crear un nuevo proyecto.

  • En el cuadro de diálogo Crear un nuevo proyecto , seleccione ASP.NET Core Web App>Siguiente.

  • En el cuadro de diálogo Configurar el nuevo proyecto , escriba RazorPagesMovie en Nombre del proyecto. Es importante asignar un nombre al proyecto RazorPagesMovie, incluida la coincidencia de mayúsculas, por lo que los espacios de nombres coincidirán al copiar y pegar código de ejemplo.

  • Seleccione Siguiente.

  • En el cuadro de diálogo Información adicional:

    • Seleccione .NET 7.0 (Compatibilidad con términos estándar).
    • Comprobar: no use instrucciones de nivel superior desactivadas.

  • Seleccione Crear.

    Información adicional

    Se crea el proyecto de inicio siguiente:

    Explorador de soluciones

Para obtener enfoques alternativos para crear el proyecto, consulte Creación de un nuevo proyecto en Visual Studio.

Ejecución de 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

Seleccione 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

Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

Visual Studio:

  • Ejecuta la aplicación, que inicia el Kestrel servidor.
  • Inicia el explorador predeterminado en https://localhost:<port>, que muestra la interfaz de usuario de las aplicaciones. <port> es el puerto aleatorio que se asignó cuando se creó la aplicación.

Cierre la ventana del explorador.

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. _Layout.cshtml configura el menú de navegación de la parte superior de la página y el aviso de copyright de la parte inferior. 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, consulte 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, consulte 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.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 WebApplicationBuilder con valores predeterminados preconfigurados, agregan compatibilidad con páginas al Razor, y compilan la aplicación.

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

La página de excepciones para desarrolladores está habilitada de forma predeterminada y 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 siguiente código establece el punto de conexión de excepción a /Error y habilita el Protocolo de seguridad de transporte estricto HTTP (HSTS) cuando la aplicación no está en modo de desarrollo:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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 Uso de varios entornos en ASP.NET Core.

El código siguiente habilita varios Middlewares:

  • 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 obtener 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, consulte 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 descargar).

Pasos siguientes

Siguiente: Agregar 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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas. Para obtener una introducción en vídeo, consulte Entity Framework Core para principiantes.

Si no está familiarizado con ASP.NET desarrollo principal y no está seguro de qué solución de interfaz de usuario web principal de ASP.NET se ajusta mejor a sus necesidades, consulte Elegir una interfaz de usuario principal de ASP.NET.

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.

Home o página Índice

Requisitos previos

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

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

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

  2. En el cuadro de diálogo Crear un nuevo proyecto , seleccione ASP.NET Core Web App 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 el nuevo proyecto , escriba RazorPagesMovie en Nombre del proyecto. Es importante asignar un nombre al proyecto RazorPagesMovie, incluida la coincidencia de mayúsculas, por lo que los espacios de nombres coincidirán al copiar y pegar código de ejemplo.

    Configuración del nuevo proyecto

  4. Seleccione Siguiente.

  5. En el cuadro de diálogo Información adicional , seleccione .NET 6.0 (soporte técnico a largo plazo) y, a continuación, seleccione Crear.

    Información adicional

Se crea el proyecto de inicio siguiente:

Explorador de soluciones

Ejecución de la aplicación

Seleccione RazorPagesMovie en el Explorador de soluciones y presione Ctrl+F5 para ejecutarse 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

Seleccione 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

Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

Visual Studio:

  • Ejecuta la aplicación, que inicia el Kestrel servidor.
  • 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, consulte 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, consulte 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.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 WebApplicationBuilder con valores predeterminados preconfigurados, añaden Razor soporte para Pages al contenedor de inyección de dependencias (DI) y configuran la aplicación.

var builder = WebApplication.CreateBuilder(args);

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

var app = builder.Build();

La página de excepciones para desarrolladores está habilitada de forma predeterminada y 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 siguiente código establece el punto de conexión de excepción a /Error y habilita el Protocolo de seguridad de transporte estricto HTTP (HSTS) cuando la aplicación no está en modo de desarrollo:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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 Uso de varios entornos en ASP.NET Core.

El código siguiente habilita varios Middlewares:

  • 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 obtener 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, consulte 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 descargar).

Pasos siguientes

Siguiente: Agregar 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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas.

Si no está familiarizado con ASP.NET desarrollo principal y no está seguro de qué solución de interfaz de usuario web principal de ASP.NET se ajusta mejor a sus necesidades, consulte Elegir una interfaz de usuario principal de ASP.NET.

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.

Home o página Índice

Requisitos previos

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

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

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

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

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

  3. En el cuadro de diálogo Configurar el nuevo proyecto , escriba RazorPagesMovie en Nombre del proyecto. Es importante asignar un nombre al proyecto RazorPagesMovie, incluida la coincidencia de mayúsculas, por lo que los espacios de nombres coincidirán al copiar y pegar código de ejemplo.

  4. Seleccione Crear.

    Configuración del proyecto

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

    1. .NET Core y ASP.NET Core 5.0 en las listas desplegables.
    2. Aplicación web.
    3. Crear.

    Selección de ASP.NET Core Web App

Se crea el proyecto de inicio siguiente:

Explorador de soluciones

Ejecución de 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

    Seleccione 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

    Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

    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, consulte 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, consulte 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, consulte 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 descargar).

Pasos siguientes

Siguiente: Agregar 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 obtener una introducción más avanzada dirigida a los desarrolladores que están familiarizados con controladores y vistas, consulte Introducción a Razor Páginas.

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

Ver o descargar código de ejemplo (cómo descargar).

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.

La página Home o la página de índice

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 ASP.NET Core y seleccione Siguiente. Creación del nuevo proyecto desde la ventana de inicio

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

  • Seleccione ASP.NET Core 3.1 en la lista desplegable, Aplicación web y, a continuación, seleccione Crear.

Seleccionar aplicación web de ASP.NET Core

Se crea el proyecto de inicio siguiente:

Explorador de soluciones

Ejecución de 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 SSL en el explorador, puede optar por confiar en el certificado autofirmado que IIS Express ha generado. ¿Desea confiar en el certificado SSL de IIS Express?

    Seleccione 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

    Seleccione Sí si acepta confiar en el certificado de desarrollo.

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

    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, consulte 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, consulte 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, consulte Inicio de la aplicación en ASP.NET Core.

Pasos siguientes

Siguiente: Agregar un modelo