Part 2, add a model to a Razor Pages app in ASP.NET Core

In this tutorial, classes are added for managing movies in a database. The app's model classes use Entity Framework Core (EF Core) to work with the database. EF Core is an object-relational mapper (O/RM) that simplifies data access. You write the model classes first, and EF Core creates the database.

The model classes are known as POCO classes (from "Plain-Old CLR Objects") because they don't have a dependency on EF Core. They define the properties of the data that are stored in the database.

Add a data model

Visual Studio

1. In Solution Explorer, right-click the RazorPagesMovie project > Add > New Folder. Name the folder Models.

2. Right-click the Models folder. Select Add > Class. Name the class Movie.

3. Add the following properties to the Movie class:

   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; }
   }
   

The Movie class contains:

• The ID field is required by the database for the primary key.

• A [DataType] attribute that specifies the type of data in the ReleaseDate property. With this attribute:

  • The user isn't required to enter time information in the date field.
  • Only the date is displayed, not time information.

• The question mark after string indicates that the property is nullable. For more information, see Nullable reference types.

DataAnnotations are covered in a later tutorial.

Build the project to verify there are no compilation errors.

Visual Studio Code

1. Add a folder named Models.
2. Add a class to the Models folder named Movie.cs.

Add the following properties to the Movie class:

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; }
}

The Movie class contains:

• An ID field to provide a primary key for the database.

• A [DataType] attribute to specify the type of data in the ReleaseDate field. With this attribute:

  • The user is not required to enter time information in the date field.
  • Only the date is displayed, not time information.

• The question mark after string indicates that the property is nullable. For more information, see Nullable reference types.

DataAnnotations are covered in a later tutorial.

Add NuGet packages and EF tools

Run the following .NET CLI commands:

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

The preceding commands add:

• The command-line interface (CLI) tools for EF Core
• The aspnet-codegenerator scaffolding tool.
• Design time tools for EF Core
• The EF Core SQLite provider, which installs the EF Core package as a dependency.
• Packages needed for scaffolding: Microsoft.VisualStudio.Web.CodeGeneration.Design and Microsoft.EntityFrameworkCore.SqlServer.

For guidance on multiple environment configuration that permits an app to configure its database contexts by environment, see Use multiple environments in ASP.NET Core.

Note

By default the architecture of the .NET binaries to install represents the currently running OS architecture. To specify a different OS architecture, see dotnet tool install, --arch option. For more information, see GitHub issue dotnet/AspNetCore.Docs #29262.

In Visual Studio Code, press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app without debugging.

In the Panel below the editor region, select the PROBLEMS tab, or from the View menu, select Problems if it is not currently in view. Verify there are no compilation errors.

Visual Studio for Mac

1. In the Solution Tool Window, control-click the RazorPagesMovie project, and then select Add > New Folder.... Name the folder Models.

2. Control-click the Models folder, and then select Add > New Class....

3. In the New File dialog:

   1. Select General in the left pane.
   2. Select Empty Class in the center pane.
   3. Name the class Movie and select Create.

4. Add the following properties to the Movie class:

   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; }
   }
   

The Movie class contains:

• An ID field to provide a primary key for the database.

• A [DataType] attribute to specify the type of data in the ReleaseDate field. With this attribute:

  • The user isn't required to enter time information in the date field.
  • Only the date is displayed, not time information.

DataAnnotations are covered in a later tutorial.

Build the project to verify there are no compilation errors.

Scaffold the movie model

In this section, the movie model is scaffolded. That is, the scaffolding tool produces pages for Create, Read, Update, and Delete (CRUD) operations for the movie model.

Visual Studio

1. Create the Pages/Movies folder:

   1. Right-click on the Pages folder > Add > New Folder.
   2. Name the folder Movies.

2. Right-click on the Pages/Movies folder > Add > New Scaffolded Item.

   

3. In the Add New Scaffold dialog, select Razor Pages using Entity Framework (CRUD) > Add.

   

4. Complete the Add Razor Pages using Entity Framework (CRUD) dialog:

   1. In the Model class drop down, select Movie (RazorPagesMovie.Models).
   2. In the Data context class row, select the + (plus) sign.
      1. In the Add Data Context dialog, the class name RazorPagesMovie.Data.RazorPagesMovieContext is generated.
      2. In the Database provider drop down, select SQL Server.
   3. Select Add.

   

The appsettings.json file is updated with the connection string used to connect to a local database.

Visual Studio Code

• Open a command shell to the project directory, which contains the Program.cs and .csproj files. Run the following command:

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

The following table details the ASP.NET Core code generator options.

Option	Description
-m	The name of the model.
-dc	The DbContext class to use including namespace.
-udl	Use the default layout.
-outDir	The relative output folder path to create the views.
--referenceScriptLibraries	Adds _ValidationScriptsPartial to Edit and Create pages

Use the -h option to get help on the dotnet aspnet-codegenerator razorpage command:

dotnet aspnet-codegenerator razorpage -h

For more information, see dotnet aspnet-codegenerator.

Use SQLite for development, SQL Server for production

When SQLite is selected, the template generated code is ready for development. The following code shows how to select the SQLite connection string in development and SQL Server in production.

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

The preceding code doesn't call UseDeveloperExceptionPage in development because WebApplication calls UseDeveloperExceptionPage in development mode.

Visual Studio for Mac

1. Add the NuGet package Microsoft.EntityFrameworkCore.Sqlite, which is required for the scaffolding tool.

   1. In the Solution Tool Window, control-click the RazorPagesMovie project, and then select Open in Terminal.

   The Terminal window opens with the command prompt at the project directory, which contains the Program.cs and .csproj files.

   1. Run the following .NET CLI command:

     dotnet add package Microsoft.EntityFrameworkCore.SQLite
   

2. Create a Pages/Movies folder:

   1. Control-click on the Pages folder > Add > New Folder.
   2. Name the folder Movies.

3. Control-click on the Pages/Movies folder > Add > New Scaffolding....

   

4. In the New Scaffolding dialog, select Razor Pages using Entity Framework (CRUD) > Next.

   

5. Complete the Add Razor Pages using Entity Framework (CRUD) dialog:

   1. In the Model class to use: row, enter Movie.
   2. In the DbContext Class to use: row, name the class RazorPagesMovie.Data.RazorPagesMovieContext.
   3. Select Finish.

   

The scaffolding process may take some time to complete as required packages are automatically downloaded and added to the project.

The appsettings.json file is updated with the connection string used to connect to a local database.

Use SQLite for development, SQL Server for production

When SQLite is selected, the template generated code is ready for development. The following code shows how to select the SQLite connection string in development and SQL Server in production.

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

The preceding code doesn't call UseDeveloperExceptionPage in development because WebApplication calls UseDeveloperExceptionPage in development mode.

Warning

This article uses a local database that doesn't require the user to be authenticated. Production apps should use the most secure authentication flow available. For more information on authentication for deployed test and production apps, see Secure authentication flows.

Files created and updated

The scaffold process creates the following files:

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

The created files are explained in the next tutorial.

The scaffold process adds the following highlighted code to the Program.cs file:

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

The Program.cs changes are explained later in this tutorial.

Create the initial database schema using EF's migration feature

The migrations feature in Entity Framework Core provides a way to:

• Create the initial database schema.
• Incrementally update the database schema to keep it in sync with the app's data model. Existing data in the database is preserved.

Visual Studio

In this section, the Package Manager Console (PMC) window is used to:

• Add an initial migration.

• Update the database with the initial migration.

• From the Tools menu, select NuGet Package Manager > Package Manager Console.

  

• In the PMC, enter the following command:

  Add-Migration InitialCreate
  

• The Add-Migration command generates code to create the initial database schema. The schema is based on the model specified in DbContext. The InitialCreate argument is used to name the migration. Any name can be used, but by convention a name is selected that describes the migration.

The following warning is displayed, which is addressed in a later step:

No type was specified for the decimal column 'Price' on entity type '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()'.

• In the PMC, enter the following command:

  Update-Database
  

  The Update-Database command runs the Up method in migrations that have not been applied. In this case, the command runs the Up method in the Migrations/<time-stamp>_InitialCreate.cs file, which creates the database.

Visual Studio Code

• Right-click the RazorPagesMovie.csproj project, and then select Open in Integrated Terminal.

  The Terminal window opens with the command prompt at the project directory, which contains the Program.cs and .csproj files.

• Run the following .NET CLI command:

  dotnet ef migrations add InitialCreate
  

  The migrations command generates code to create the initial database schema. The schema is based on the model specified in DbContext. The InitialCreate argument is used to name the migrations. Any name can be used, but by convention a name is selected that describes the migration.

• Run the following .NET CLI command:

  dotnet ef database update
  

The update command runs the Up method in migrations that have not been applied. In this case, update runs the Up method in the Migrations/<time-stamp>_InitialCreate.cs file, which creates the database.

Note

For SQLite, column type for the Price field is set to TEXT. This is resolved in a later step.

Visual Studio for Mac

• Control-click the RazorPagesMovie project, and then select Open in Terminal.

  The Terminal window opens with the command prompt at the project directory, which contains the Program.cs and .csproj files.

• Run the following .NET CLI commands:

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

• The tool commands install the latest Entity Framework Core tools after uninstalling any previous version, if one exists.

  Note

  By default the architecture of the .NET binaries to install represents the currently running OS architecture. To specify a different OS architecture, see dotnet tool install, --arch option. For more information, see GitHub issue dotnet/AspNetCore.Docs #29262.

• The migrations command generates code to create the initial database schema. The schema is based on the model specified in DbContext. The InitialCreate argument is used to name the migrations. Any name can be used, but by convention a name is selected that describes the migration.

• The update command runs the Up method in migrations that have not been applied. In this case, update runs the Up method in the Migrations/<time-stamp>_InitialCreate.cs file, which creates the database.

Note

For SQLite, column type for the Price field is set to TEXT. This is resolved in a later step.

The following warning is displayed, which is addressed in a later step:

No type was specified for the decimal column 'Price' on entity type '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()'.

The data context RazorPagesMovieContext:

• Derives from Microsoft.EntityFrameworkCore.DbContext.
• Specifies which entities are included in the data model.
• Coordinates EF Core functionality, such as Create, Read, Update and Delete, for the Movie model.

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!;
    }
}

The preceding code creates a DbSet<Movie> property for the entity set. In Entity Framework terminology, an entity set typically corresponds to a database table. An entity corresponds to a row in the table.

The name of the connection string is passed in to the context by calling a method on a DbContextOptions object. For local development, the Configuration system reads the connection string from the appsettings.json file.

Test the app

1. Run the app and append /Movies to the URL in the browser (http://localhost:port/movies).

   If you receive the following error:

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

   You missed the migrations step.

2. Test the Create New link.

   

   Note

   You may not be able to enter decimal commas in the Price field. To support jQuery validation for non-English locales that use a comma (",") for a decimal point and for non US-English date formats, the app must be globalized. For globalization instructions, see this GitHub issue.

3. Test the Edit, Details, and Delete links.

The next tutorial explains the files created by scaffolding.

Examine the context registered with dependency injection

ASP.NET Core is built with dependency injection. Services, such as the EF Core database context, are registered with dependency injection during application startup. Components that require these services (such as Razor Pages) are provided via constructor parameters. The constructor code that gets a database context instance is shown later in the tutorial.

The scaffolding tool automatically created a database context and registered it with the dependency injection container. The following highlighted code is added to the Program.cs file by the scaffolder:

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

Troubleshooting with the completed sample

If you run into a problem you can't resolve, compare your code to the completed project. View or download completed project (how to download).

Next steps

Previous: Get Started Next: Scaffolded Razor Pages