Razor Pages Database First using EF Core 8

If you have not completed the Console application, please consider altering the database as shown at the top of that tutorial.

This tutorial uses Visual Studio Code and therefore requires lots of command-line work. But that means you can follow this tutorial on any computer operating system worth it's salt.

Setting up the project

1. First we are going to create a folder for our project. I named mine RazorDemo2025. Created? Great! Now open that folder in VS Code.

2. Make sure you have the C# Dev Kit extension installed (it will install several other things too).
3. Ctrl+Shift+P (Windows) | Cmd+Shift+P (Mac), Type Project (you will see ".NET: new Project..." come up).
4. In the template options type Razor and select "ASP.NET Core Web App (Razor Pages) MVC, Razor Pages, Web

5. Name: RazorDemo (you can now select the defaults for the remaining options) Enter ....

Setup the tooling...

First let's check to see what the latest version is:

dotnet ef --version

If you didn't get something satisfactory for your project, you can install it.

#To search for versions of a tool/package.
dotnet package search dotnet-ef --exact-match
#To install a particular version
dotnet tool install --global dotnet-ef --version 8.0.13 
#To update to a particular version
dotnet tool update --global dotnet-ef --version 8.0.13

We also need the dotnet-aspnet-codegenerator (looks like today the latest version is 8.0.7:

dotnet tool install --global dotnet-aspnet-codegenerator --version 8.0.7

Setup the packages

Before we install any of these packages, we need to be in the project folder where we can see the .csproj file.

cd RazorDemo

dotnet add package Microsoft.EntityFrameworkCore --version 8.0.13
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 8.0.13
dotnet add package Microsoft.EntityFrameworkCore.Tools --version 8.0.13
dotnet add package Microsoft.EntityFrameworkCore.Design --version 8.0.13
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 8.0.7

Scaffolding Up the DbContext

First, create a Models directory in the RazorDemo folder. Assuming I'm using a Docker instance of SQL Server 2022, I can create the DbContext and the Model files all with one command.

Next we are going to create a Default Connection String in the appsettings.json folder:

"ConnectionStrings": {
    "DefaultConnection": "Server=.;Database=UniversitySmall;UID=sa;Password=Password234;TrustServerCertificate=True;MultipleActiveResultSets=true"
  },

Now that we have added that to the appsettings.json file, we can use it when we are scaffolding.

dotnet ef dbcontext scaffold "Name=DefaultConnection" Microsoft.EntityFrameworkCore.SqlServer -c UniversityContext -o Models -f

Check out the contents of your Models folder

We do need to make one little edit. In Models/UniversityContext.cs we need to remove the "Name=DefaultConnection" from the OnConfiguring method so it looks like the following:

   1 protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
   2     => optionsBuilder.UseSqlServer(); //"Name=DefaultConnection" was removed.

Registering the DbContext with your IOC container

In program.cs add the following code before the var app = builder.Build();

   1 builder.Services.AddDbContext<UnivesityContext>(options => 
   2     options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

Don't forget to add the appropriate using statements at the top:

   1 using Microsoft.EntityFrameworkCore;
   2 using RazorDemo.Models;

Go ahead and build your project to make sure that it builds at this point. If there are any errors or warnings you should take care of them before continuing.

Scaffolding a Student Page

Now let's scaffold pages to perform CRUD operations on the student table. While we are still in the project folder:

dotnet-aspnet-codegenerator razorpage -m Student -dc UniversityContext -udl -outDir Pages\Students -scripts

What does all that mean? Take a look at the documentation here

Now inspect the Pages/Students folder. Interesting right? We'll let's build it and see what it does.