Parte 2. Adición de un modelo a una aplicación de Razor Pages en ASP.NET Core

En este tutorial, se agregan clases para administrar películas en una base de datos. Las clases de modelo de la aplicación usan Entity Framework Core (EF Core) para trabajar con la base de datos. EF Core es un asignador relacional de objetos (ORM) que simplifica el acceso a los datos. Primero escriba las clases de modelo, y EF Core crea la base de datos.

Las clases de modelo se conocen como clases POCO (del inglés "Plain-Old CLR Objects", objetos CLR antiguos sin formato) porque no tienen ninguna dependencia de EF Core. Definen las propiedades de los datos que se almacenan en la base de datos.

Agregar un modelo de datos

Visual Studio

1. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto RazorPagesMovie>Agregar>Nueva carpeta. Asigne a la carpeta el nombre Models.

2. Haga clic con el botón derecho en la carpeta Models. Seleccione Agregar>Clase. Asigne a la clase el nombre Película.

3. Agregue las propiedades siguientes a la clase Movie:

   using System.ComponentModel.DataAnnotations;
   
   namespace RazorPagesMovie.Models;
   
   public class Movie
   {
       public int Id { get; set; }
       public string? Title { get; set; }
       [DataType(DataType.Date)]
       public DateTime ReleaseDate { get; set; }
       public string? Genre { get; set; }
       public decimal Price { get; set; }
   }
   

la clase Movie contiene:

• La base de datos requiere el campo ID para la clave principal.

• Un atributo [DataType] que especifica el tipo de datos en la propiedad ReleaseDate. Con este atributo:

  • El usuario no tiene que especificar información horaria en el campo de fecha.
  • Solo se muestra la fecha, no información horaria.

• El signo de interrogación después de string indica que la propiedad admite un valor NULL. Para más información, consulte Tipos de referencia que admiten un valor NULL.

Los elementos DataAnnotations se tratan en un tutorial posterior.

Compile el proyecto para comprobar que no haya errores de compilación.

Visual Studio Code

1. Agregue una carpeta denominada Models .
2. Agregue una clase a la carpeta Models denominada Movie.cs.

Agregue las propiedades siguientes a la clase Movie:

using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models;

public class Movie
{
    public int Id { get; set; }
    public string? Title { get; set; }
    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }
    public string? Genre { get; set; }
    public decimal Price { get; set; }
}

la clase Movie contiene:

• Un campo ID a fin de proporcionar una clave principal para la base de datos.

• Un atributo [DataType] para especificar el tipo de datos en el campo ReleaseDate. Con este atributo:

  • El usuario no tiene que especificar información horaria en el campo de fecha.
  • Solo se muestra la fecha, no información horaria.

• El signo de interrogación después de string indica que la propiedad admite un valor NULL. Para más información, consulte Tipos de referencia que admiten un valor NULL.

Los elementos DataAnnotations se tratan en un tutorial posterior.

Agregue los paquetes NuGet y las herramientas EF.

Ejecute los siguientes comandos de la CLI de .NET:

dotnet tool uninstall --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool uninstall --global dotnet-ef
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

Los comandos anteriores agregan:

• Las herramientas de la interfaz de la línea de comandos (CLI) para EF Core
• La herramienta de scaffolding aspnet-codegenerator.
• Herramientas de tiempo de diseño para EF Core
• El proveedor SQLite de EF Core, que instala el paquete de EF Core como una dependencia.
• Los paquetes necesarios para scaffolding: Microsoft.VisualStudio.Web.CodeGeneration.Design y Microsoft.EntityFrameworkCore.SqlServer.

Para obtener instrucciones sobre la configuración de varios entornos que permite que una aplicación configure sus contextos de base de datos por entorno, vea Usar varios entornos en ASP.NET Core.

Nota

De manera predeterminada, la arquitectura de los binarios .NET que se van a instalar representa la arquitectura del sistema operativo que se está ejecutando en ese momento. Para especificar una arquitectura de SO diferente, consulte dotnet tool install, --arch option. Para más información, consulte la incidencia de GitHub dotnet/AspNetCore.Docs #29262.

En Visual Studio Code, presione Ctrl+F5 (Windows) o ⌘+F5 (macOS) para ejecutar la aplicación sin depurar.

En el Panel debajo de la región del editor, seleccione la pestaña PROBLEMAS, o en el menú Vista, seleccione Problemas si no aparecen en la vista. Compruebe que no hay errores de compilación.

Visual Studio para Mac

1. En la ventana de herramientas de soluciones, pulse la tecla Control y haga clic en el proyecto RazorPagesMovie; después, seleccione Agregar>Nueva carpeta.... Asigne el nombre Models a la carpeta.

2. Pulse la tecla Control y haga clic en la carpeta Models y, luego, seleccione Agregar>Nueva clase....

3. En el cuadro de diálogo Nuevo archivo:

   1. Seleccione General en el panel izquierdo.
   2. Seleccione Clase vacía en el panel central.
   3. Asigne a la clase el nombre Películas y seleccione Crear.

4. Agregue las propiedades siguientes a la clase Movie:

   using System.ComponentModel.DataAnnotations;
   
   namespace RazorPagesMovie.Models;
   
   public class Movie
   {
       public int Id { get; set; }
       public string? Title { get; set; }
       [DataType(DataType.Date)]
       public DateTime ReleaseDate { get; set; }
       public string? Genre { get; set; }
       public decimal Price { get; set; }
   }
   

la clase Movie contiene:

• Un campo ID a fin de proporcionar una clave principal para la base de datos.

• Un atributo [DataType] para especificar el tipo de datos en el campo ReleaseDate. Con este atributo:

  • El usuario no tiene que especificar información horaria en el campo de fecha.
  • Solo se muestra la fecha, no información horaria.

Los elementos DataAnnotations se tratan en un tutorial posterior.

Compile el proyecto para comprobar que no haya errores de compilación.

Aplicar scaffolding al modelo de película

En esta sección se aplica scaffolding al modelo de película; es decir, la herramienta de scaffolding genera páginas para las operaciones de creación, lectura, actualización y eliminación (CRUD) del modelo de película.

Visual Studio

1. Cree la carpeta Pages/Movies:

   1. Haga clic con el botón derecho en la carpeta Páginas>Agregar>Nueva carpeta.
   2. Asigne a la carpeta el nombre Movies.

2. Haga clic con el botón derecho en la carpeta Pages/Movies>Agregar>Nuevo elemento con scaffolding.

   

3. En el cuadro de diálogo Agregar nuevo elemento scaffold, seleccione Páginas de Razor que usan Entity Framework (CRUD)>Agregar.

   

4. Complete el cuadro de diálogo para agregar instancias de Razor Pages que usan Entity Framework (CRUD) :

   1. En la lista desplegable Clase de modelo, seleccione Movie (RazorPagesMovie.Models) .
   2. En la fila Clase de contexto de datos, seleccione el signo + (más).
      1. En el cuadro de diálogo Agregar contexto de datos, se genera el nombre de clase RazorPagesMovie.Data.RazorPagesMovieContext.
      2. En la lista desplegable Proveedor de base de datos, seleccione SQL Server.
   3. Seleccione Agregar.

   

El archivo appsettings.json se actualiza con la cadena de conexión que se usa para conectarse a una base de datos local.

Visual Studio Code

• Abra un shell de comandos en el directorio del proyecto, que contiene los archivos Program.cs, y .csproj. Ejecute el comando siguiente:

  dotnet aspnet-codegenerator razorpage -m Movie -dc RazorPagesMovie.Data.RazorPagesMovieContext -udl -outDir Pages/Movies --referenceScriptLibraries --databaseProvider sqlite
  

En la tabla siguiente se incluyen los detalles de las opciones del generador de código de ASP.NET Core.

Opción	Descripción
-m	Nombre del modelo
-dc	Clase DbContext que se va a usar, incluido el espacio de nombres.
-udl	Usa el diseño predeterminado.
-outDir	Ruta de acceso relativa de la carpeta de salida para crear las vistas
--referenceScriptLibraries	Agrega _ValidationScriptsPartial a las páginas Editar y Crear.

Use la opción -h para obtener ayuda sobre el comando dotnet aspnet-codegenerator razorpage:

dotnet aspnet-codegenerator razorpage -h

Para más información, vea dotnet aspnet-codegenerator.

Uso de SQLite para desarrollo y SQL Server para producción

Cuando se selecciona SQLite, el código generado por la plantilla está listo para desarrollo. En el código a continuación se muestra cómo seleccionar la cadena de conexión de SQLite en desarrollo y el SQL Server en producción.

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));
}
else
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMovieContext")));
}

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

El código anterior no llama a UseDeveloperExceptionPage en desarrollo porque WebApplication llama a UseDeveloperExceptionPage en modo de desarrollo.

Visual Studio para Mac

1. Agregue el paquete NuGet Microsoft.EntityFrameworkCore.Sqlite, que es necesario para la herramienta de scaffolding.

   1. En la ventana de herramientas de soluciones, pulse control y haga clic en el proyecto RazorPagesMovie; después, seleccione Abrir en terminal.

   La ventana Terminal se abre con el símbolo del sistema en el directorio del proyecto, que contiene los archivos Program.cs y .csproj.

   1. Ejecute el comando siguiente de la CLI de .NET:

     dotnet add package Microsoft.EntityFrameworkCore.SQLite
   

2. Cree una carpeta Pages/Movies:

   1. Mientras mantiene presionado Ctrl, haga clic en la carpeta Pages>Agregar>Nueva carpeta.
   2. Asigne a la carpeta el nombre Movies.

3. Mientras mantiene presionado Ctrl, haga clic en la carpeta Pages/Movies>Agregar>Nuevo scaffolding....

   

4. En el cuadro de diálogo Nuevo scaffolding, seleccione Páginas de Razor que usan Entity Framework (CRUD)>Siguiente.

   

5. Complete el cuadro de diálogo para agregar instancias de Razor Pages que usan Entity Framework (CRUD) :

   1. En la fila Clase de modelo que se va a usar: , escriba Movie.
   2. En la fila DbContext Class to use: (Clase DbContext que se usará:), asigne a la clase el nombre RazorPagesMovie.Data.RazorPagesMovieContext.
   3. Seleccione Finalizar.

   

El proceso de scaffolding puede tardar algún tiempo en completarse, ya que los paquetes necesarios se descargan automáticamente y se agregan al proyecto.

El archivo appsettings.json se actualiza con la cadena de conexión que se usa para conectarse a una base de datos local.

Uso de SQLite para desarrollo y SQL Server para producción

Cuando se selecciona SQLite, el código generado por la plantilla está listo para desarrollo. En el código a continuación se muestra cómo seleccionar la cadena de conexión de SQLite en desarrollo y el SQL Server en producción.

using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();

if (builder.Environment.IsDevelopment())
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext")));
}
else
{
    builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
        options.UseSqlServer(builder.Configuration.GetConnectionString("ProductionMovieContext")));
}

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

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

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

El código anterior no llama a UseDeveloperExceptionPage en desarrollo porque WebApplication llama a UseDeveloperExceptionPage en modo de desarrollo.

Archivos creados y actualizados

El proceso de scaffolding crea los archivos siguientes:

• Pages/Movies: Create, Delete, Details, Edit e Index.
• Data/RazorPagesMovieContext.cs

Los archivos creados se explican en el tutorial siguiente.

El proceso de scaffolding agrega el código resaltado siguiente al archivo Program.cs:

Visual Studio

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") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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();

Visual Studio Code/Visual Studio para Mac

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

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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();

Los cambios realizados al archivo Program.cs se explican más adelante en este tutorial.

Creación del esquema de la base de datos inicial mediante la característica de migración de EF

La característica de migraciones de Entity Framework Core permite:

• Cree el esquema de la base de datos inicial.
• Actualizar incrementalmente el esquema de base de datos para mantenerlo sincronizado con el modelo de datos de la aplicación. Se conservan los datos existentes en la base de datos.

Visual Studio

En esta sección, la ventana de la Consola del Administrador de paquetes (PMC) se utiliza para:

• Agregar una migración inicial.
• Actualizar la base de datos con la migración inicial.

1. En el menú Herramientas, seleccione Administrador de paquetes NuGet>Consola del Administrador de paquetes.

   

2. En PCM, escriba los siguientes comandos:

   Add-Migration InitialCreate
   Update-Database
   

• El comando Add-Migration genera el código para crear el esquema de base de datos inicial. El esquema se basa en el modelo especificado en DbContext. El argumento InitialCreate se usa para asignar nombre a las migraciones. Se puede usar cualquier nombre, pero, por convención, se selecciona uno que describa la migración.

• El comando Update-Database ejecuta el método Up en las migraciones que no se han aplicado. En este caso, el comando ejecuta el método Up en el archivo Migrations/<time-stamp>_InitialCreate.cs, que crea la base de datos.

Visual Studio Code

• Haga clic con el botón derecho en el proyecto RazorPagesMovie.csproj y seleccione Abrir en terminal integrado.

  La ventana Terminal se abre con el símbolo del sistema en el directorio del proyecto, que contiene los archivos Program.cs y .csproj.

• Ejecute los siguientes comandos de la CLI de .NET:

  dotnet ef migrations add InitialCreate
  dotnet ef database update
  

• El comando migrations genera el código para crear el esquema de base de datos inicial. El esquema se basa en el modelo especificado en DbContext. El argumento InitialCreate se usa para asignar nombre a las migraciones. Se puede usar cualquier nombre, pero, por convención, se selecciona uno que describa la migración.

• El comando update ejecuta el método Up en las migraciones que no se han aplicado. En este caso, update ejecuta el método Up en el archivo Migrations/<time-stamp>_InitialCreate.cs, que crea la base de datos.

Nota

Para SQLite, el tipo de columna del campo Price se establece en TEXT. Esto se resuelve en un paso posterior.

Visual Studio para Mac

• Pulse Control y haga clic en el proyecto RazorPagesMovie y seleccione Abrir en Terminal.

  La ventana Terminal se abre con el símbolo del sistema en el directorio del proyecto, que contiene los archivos Program.cs y .csproj.

• Ejecute los siguientes comandos de la CLI de .NET:

  dotnet tool uninstall --global dotnet-ef
  dotnet tool install --global dotnet-ef
  dotnet ef migrations add InitialCreate
  dotnet ef database update
  

• Los comandos tool instalan las herramientas de Entity Framework Core más recientes después de desinstalar cualquier versión anterior, si existe alguna.

  Nota

  De manera predeterminada, la arquitectura de los binarios .NET que se van a instalar representa la arquitectura del sistema operativo que se está ejecutando en ese momento. Para especificar una arquitectura de SO diferente, consulte dotnet tool install, --arch option. Para más información, consulte la incidencia de GitHub dotnet/AspNetCore.Docs #29262.

• El comando migrations genera el código para crear el esquema de base de datos inicial. El esquema se basa en el modelo especificado en DbContext. El argumento InitialCreate se usa para asignar nombre a las migraciones. Se puede usar cualquier nombre, pero, por convención, se selecciona uno que describa la migración.

• El comando update ejecuta el método Up en las migraciones que no se han aplicado. En este caso, update ejecuta el método Up en el archivo Migrations/<time-stamp>_InitialCreate.cs, que crea la base de datos.

Nota

Para SQLite, el tipo de columna del campo Price se establece en TEXT. Esto se resuelve en un paso posterior.

Se muestra la advertencia siguiente, que se soluciona en un paso posterior:

No type was specified for the decimal column "Price" on entity type "Movie" (No se ha especificado ningún tipo en la columna decimal "Price" en el tipo de entidad "Movie"). This will cause values to be silently truncated if they do not fit in the default precision and scale. Explicitly specify the SQL server column type that can accommodate all the values using "HasColumnType()" (Especifique de forma explícita el tipo de columna de SQL Server que pueda acomodar todos los valores mediante "HasColumnType()").

Contexto de datos RazorPagesMovieContext:

• Deriva de Microsoft.EntityFrameworkCore.DbContext.
• Especifica qué entidades se incluyen en el modelo de datos.
• Coordina la funcionalidad de EF Core, como la creación, la lectura, la actualización y la eliminación, del modelo Movie.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using RazorPagesMovie.Models;

namespace RazorPagesMovie.Data
{
    public class RazorPagesMovieContext : DbContext
    {
        public RazorPagesMovieContext (DbContextOptions<RazorPagesMovieContext> options)
            : base(options)
        {
        }

        public DbSet<RazorPagesMovie.Models.Movie> Movie { get; set; } = default!;
    }
}

En el código anterior se crea una propiedad DbSet<Movie> para el conjunto de entidades. En la terminología de Entity Framework, un conjunto de entidades suele corresponder a una tabla de base de datos. Una entidad se corresponde con una fila de la tabla.

El nombre de la cadena de conexión se pasa al contexto mediante una llamada a un método en un objeto DbContextOptions. Para el desarrollo local, el sistema de configuración lee la cadena de conexión desde el archivo appsettings.json.

Prueba de la aplicación

1. Ejecute la aplicación y anexe /Movies a la dirección URL en el explorador ( http://localhost:port/movies ).

   Si aparece el siguiente mensaje de error:

   SqlException: Cannot open database "RazorPagesMovieContext-GUID" requested by the login. The login failed.
   Login failed for user 'User-name'.
   

   Quiere decir que falta el paso de migraciones.

2. Seleccione el vínculo Crear nuevo.

   

   Nota

   Es posible que no pueda escribir comas decimales en el campo Price. La aplicación debe globalizarse para que la validación de jQuery sea compatible con configuraciones regionales distintas del inglés que usan una coma (",") en lugar de un punto decimal y formatos de fecha distintos del de Estados Unidos. Para obtener instrucciones sobre la globalización, consulte esta cuestión en GitHub.

3. Pruebe los vínculos Editar, Detalles y Eliminar.

En el tutorial siguiente se explican los archivos creados mediante scaffolding.

Examinar el contexto registrado con la inserción de dependencias

ASP.NET Core integra la inserción de dependencias. Los servicios, como el contexto de base de datos de EF Core, se registran con inserción de dependencias durante el inicio de la aplicación. Estos servicios se proporcionan a los componentes que los necesitan (como páginas Razor) a través de parámetros de constructor. El código de constructor que obtiene una instancia de contexto de base de datos se muestra más adelante en el tutorial.

La herramienta de scaffolding creó de forma automática un contexto de base de datos y lo registró con el contenedor de inserción de dependencias. El proveedor de scaffolding agrega el código resaltado siguiente al archivo Program.cs:

Visual Studio

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") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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();

Visual Studio Code/Visual Studio para Mac

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

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddDbContext<RazorPagesMovieContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("RazorPagesMovieContext") ?? throw new InvalidOperationException("Connection string 'RazorPagesMovieContext' not found.")));

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();

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

Anterior: IntroducciónSiguiente: Razor Pages con scaffolding