Build a Blazor movie database app (Part 2 - Add and scaffold a model)

[!INCLUDE]

This article is the second part of the Blazor movie database app tutorial that teaches you the basics of building an ASP.NET Core Blazor Web App with features to manage a movie database.

In this part of the tutorial series:

A class is added to the app representing a movie in a database.
Entity Framework Core (EF Core) services and tooling create a database context and database. EF Core is an object-relational mapper (O/RM) that simplifies data access. You write model classes first, and EF Core creates the database from the model classes, which is called scaffolding.
Additional tooling scaffolds a Razor component-based UI for interacting with the movie records in the database via the database context.

Add a data model

:::zone pivot="vs"

In Solution Explorer, right-click the BlazorWebAppMovies project and select Add > New Folder. Name the folder Models.

Right-click the Models folder. Select Add > Class. Name the file Movie.cs. Use the following contents for the file.

:::zone-end

:::zone pivot="vsc"

Add a folder to the project named Models.

Add a class file to the Models folder named Movie.cs. Use the following contents for the file.

:::zone-end

:::zone pivot="cli"

Add a folder to the project named Models.

Add a class file to the Models folder named Movie.cs. Use the following contents for the file.

:::zone-end

Models/Movie.cs:

csharp

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models;

public class Movie
{
    public int Id { get; set; }

    public string? Title { get; set; }

    public DateOnly ReleaseDate { get; set; }

    public string? Genre { get; set; }

    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

The Movie class contains:

A record identifier property (Id), which is required by EF Core and the database to track records. In the database, the Id property is the database record's primary key.
Other properties that describe aspects of a movie:
- Title (Title)
- Release date (ReleaseDate)
- Genre (Genre)
- Price (Price)

The question mark on a string type indicates that the property is nullable (it can hold a null value).

The EF Core database provider selects data types based on the .NET types of the model's properties. The provider also takes into account other metadata provided by xref:System.ComponentModel.DataAnnotations, which are a set of attribute classes placed above a model's property with the following format, where the {ANNOTATION} placeholder is the annotation name. You can place multiple annotations on the same line separated by commas inside the brackets, or you can place multiple annotations on separate lines, which is the approach adopted by this tutorial series.

csharp

[{ANNOTATION}]

The Price property in the Movie class file has two data annotations:

csharp

[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

These annotations specify:

That the property holds a currency data type.
The database column is a decimal of 18 digits with two decimal places.

More information on data annotations, including adding data annotations for validation, is covered in a later part of the tutorial series.

:::zone pivot="vs"

Select Build > Build Solution from the menu bar or press <kbd>F6</kbd> on the keyboard. Confirm in the Output panel that the build succeeded.

:::zone-end

:::zone pivot="vsc"

Add Nuget packages and tools

:::moniker range=">= aspnetcore-9.0"

To add the dotnet scaffold tool, execute the following .NET CLI command in the Terminal (Terminal menu > New Terminal) opened to the project's root folder:

dotnetcli

dotnet tool install --global Microsoft.dotnet-scaffold

:::moniker-end

:::moniker range="< aspnetcore-9.0"

To add the required NuGet packages and tools, execute the following .NET CLI commands in the Terminal (Terminal menu > New Terminal) opened to the project's root folder.

Paste all of the following commands at the prompt (>) of the Terminal. When you paste multiple commands, a warning may appear stating that multiple commands will execute. Dismiss the warning and proceed with the paste operation.

When you paste multiple commands, all of the commands execute except the last one. The last command doesn't execute until you press <kbd>Enter</kbd> on the keyboard.

dotnetcli

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
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
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

[!IMPORTANT] After the first eight commands execute, make sure that you press <kbd>Enter</kbd> on the keyboard to execute the last command.

[!NOTE] The preceding commands are .NET CLI commands, and .NET CLI commands are executed when entered at a PowerShell prompt, which is the default command shell of the VS Code Terminal.

The preceding commands add:

Command-line interface (CLI) tools for EF Core.
aspnet-codegenerator scaffolding tool.
Design time tools for EF Core.
The SQLite and SQL Server providers with the EF Core package as a dependency.
Microsoft.VisualStudio.Web.CodeGeneration.Design for scaffolding.
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore to use the xref:Microsoft.Extensions.DependencyInjection.DatabaseDeveloperPageExceptionFilterServiceExtensions.AddDatabaseDeveloperPageExceptionFilter%2A extension method in the Program file, which captures database-related exceptions.

:::moniker-end

Save any open files.

In the Command Palette (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>), use the .NET: Build command to build the app.

Confirm that the app built successfully.

:::zone-end

:::zone pivot="cli"

Add Nuget packages and tools

:::moniker range=">= aspnetcore-9.0"

To add the dotnet scaffold tool, execute the following .NET CLI command in a command shell opened to the project's root folder:

dotnetcli

dotnet tool install --global Microsoft.dotnet-scaffold

:::moniker-end

:::moniker range="< aspnetcore-9.0"

To add the required NuGet packages and tools, execute the following .NET CLI commands in a command shell opened to the project's root folder.

Paste all of the following commands at the prompt (>) of the command shell. When you paste multiple commands, a warning may appear stating that multiple commands will execute. Dismiss the warning and proceed with the paste operation.

When you paste multiple commands, all of the commands execute except the last one. The last command doesn't execute until you press <kbd>Enter</kbd> on the keyboard.

dotnetcli

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
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
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

The preceding commands add:

Command-line interface (CLI) tools for EF Core.
aspnet-codegenerator scaffolding tool.
Design time tools for EF Core.
The SQLite and SQL Server providers with the EF Core package as a dependency.
Microsoft.VisualStudio.Web.CodeGeneration.Design for scaffolding.
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore to use the xref:Microsoft.Extensions.DependencyInjection.DatabaseDeveloperPageExceptionFilterServiceExtensions.AddDatabaseDeveloperPageExceptionFilter%2A extension method in the Program file, which captures database-related exceptions.

:::moniker-end

Save any open files.

In a command shell opened to the project's root folder, execute the dotnet build command:

dotnetcli

dotnet build

Confirm that the app built successfully.

:::zone-end

Scaffold the model

In this section, the Movie model is used to scaffold a database context and a UI for managing movies in the database. .NET scaffolding is a code generation framework for .NET applications. You use scaffolding to quickly add database and UI code that interacts with data models.

:::zone pivot="vs"

Right-click on the Components/Pages folder and select Add > New Scaffolded Item:

With the Add New Scaffold Item dialog open to Installed > Common > Blazor > Razor Component, select Razor Components using Entity Framework (CRUD). Select the Add button.

CRUD is an acronym for Create, Read, Update, and Delete. The scaffolder produces create, edit, delete, details, and index components for the app.

Complete the Add Razor Components using Entity Framework (CRUD) dialog:

The Template dropdown list includes other templates for specifically creating create, edit, delete, details, and list components. This dropdown list comes in handy when you only need to create a specific type of component scaffolded to a model class. Leave the Template dropdown list set to CRUD to scaffold a full set of components.
In the Model class dropdown list, select Movie (BlazorWebAppMovies.Models).
For DbContext class, select the + (plus sign) button.
In the Add Data Context modal dialog, the class name BlazorWebAppMovies.Data.BlazorWebAppMoviesContext is generated. Use the default generated value. Select the Add button.
After the model dialog closes, the Database provider dropdown list defaults to SQL Server. When you're building apps in the future, you can select the appropriate provider for the database that you're using. The options include SQLite, PostgreSQL, and Azure Cosmos DB. Leave the Database provider dropdown list set to SQL Server.
Select Add.

:::zone-end

:::zone pivot="vsc"

In the Terminal (Terminal menu > New Terminal) opened to the project's root directory, execute the following command. SQLite is used as the database for users adopting VS Code tooling for this tutorial series.

:::moniker range=">= aspnetcore-9.0"

dotnetcli

dotnet scaffold

When the initializing prompt appears, press <kbd>Enter</kbd> on the keyboard.

For the Scaffolding Category, use the arrow keys to select Blazor. Press <kbd>Enter</kbd>.

For the Command Name, use the arrow keys to select Razor Components with EntityFrameworkCore (CRUD). Press <kbd>Enter</kbd>.

CRUD is an acronym for Create, Read, Update, and Delete. The scaffolder produces create, edit, delete, details, and index components for the app.

For the .NET project file, press <kbd>Enter</kbd> to accept the app's project file (BlazorWebAppMovies.csproj).

For the Model Name, confirm that Movie (Movie class) is selected. Press <kbd>Enter</kbd>.

For the Data Context Class, type BlazorWebAppMoviesContext. Press <kbd>Enter</kbd>.

For the Database Provider, use the arrow keys to select sqlite-efcore. Press <kbd>Enter</kbd>.

For Page, confirm that CRUD is selected. Press <kbd>Enter</kbd>.

When prompted to include prerelease packages, use the arrow keys to select No. Press <kbd>Enter</kbd>.

Executing the dotnet scaffold command adds the following tools and packages to the app:

Command-line interface (CLI) tools for EF Core.
dotnet scaffold tooling.
Design time tools for EF Core.
The SQLite provider with the EF Core package as a dependency.
Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore to use the xref:Microsoft.Extensions.DependencyInjection.DatabaseDeveloperPageExceptionFilterServiceExtensions.AddDatabaseDeveloperPageExceptionFilter%2A extension method in the Program file, which captures database-related exceptions.

:::moniker-end

:::moniker range="< aspnetcore-9.0"

dotnetcli

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD is an acronym for Create, Read, Update, and Delete. The blazor generator with the CRUD template produces create, edit, delete, details, and index components for the app.

The following table details the ASP.NET Core code generator options used in the preceding command:

-dbProvider: Database provider to use. Options include sqlserver (default), sqlite, cosmos, postgres.
-dc: The xref:Microsoft.EntityFrameworkCore.DbContext class to use, including the namespace (BlazorWebAppMovies.Data).
-m: The name of the model.
-outDir: The output directory for the generated components. A folder is created from the model name in the output directory to hold the components (for example, MoviePages in this case).

:::moniker-end

:::zone-end

:::zone pivot="cli"

In a command shell opened to the project's root folder, execute the following command. SQLite is used as the database for users adopting .NET CLI tooling for this tutorial series.

:::moniker range=">= aspnetcore-9.0"

dotnetcli

dotnet scaffold