パート 2: ASP.NET Core で Razor ページ アプリにモデルを追加する

このチュートリアルでは、データベースの映画を管理するためのクラスが追加されます。 アプリのモデル クラスでは、Entity Framework Core (EF Core) を使用して、データベースを操作します。 EF Core は、データ アクセスを簡略化するオブジェクト リレーショナル マッパー (O/RM) です。 モデル クラスを記述すると、EF Core によってデータベースが作成されます。

モデル クラスは EF Core に対する依存関係がないため、Plain-Old CLR Objects (単純な従来の CLR) の頭文字を取って POCO クラスと呼ばれます。 これらは、データベースに格納されるデータのプロパティを定義します。

データ モデルの追加

Visual Studio

1. ソリューション エクスプローラーで、RazorPagesMovie プロジェクトを右クリックし、>[追加]>[新しいフォルダー] の順に選択します。 フォルダーに「 Modelsで行うことができます。

2. Models フォルダーを右クリックしします。 [追加]>[クラス] の順に選択します。 クラスに Movie と名前を付けます。

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

Movie クラスには次が含まれます。

• ID フィールドは、データベースで主キー用に必要です。

• ReleaseDate プロパティのデータの型を指定する [DataType] 属性。 この属性を使用する場合:

  • ユーザーは日付フィールドに時刻の情報を入力する必要はありません。
  • 日付のみが表示され、時刻の情報は表示されません。

• string の後の疑問符は、そのプロパティが Null 許容であることを示します。 詳細については、「null 許容参照型」を参照してください。

DataAnnotations は、後のチュートリアルで説明されます。

プロジェクトをビルドして、コンパイル エラーがないことを確認します。

Visual Studio Code

1. Models という名前のフォルダーを追加します。
2. Movie.cs という名前の Models フォルダーにクラスを追加します。

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

Movie クラスには次が含まれます。

• データベースの主キーを提供する ID フィールド。

• ReleaseDate フィールドのデータの型を指定するための [DataType] 属性。 この属性を使用する場合:

  • ユーザーは日付フィールドに時刻の情報を入力する必要はありません。
  • 日付のみが表示され、時刻の情報は表示されません。

• string の後の疑問符は、そのプロパティが Null 許容であることを示します。 詳細については、「null 許容参照型」を参照してください。

DataAnnotations は、後のチュートリアルで説明されます。

NuGet パッケージと EF ツールを追加します。

次の .NET CLI コマンドを実行します。

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

上記のコマンドにより次が追加されます。

• EF Core のコマンドライン インターフェイス (CLI) ツール
• aspnet-codegenerator スキャフォールディング ツール。
• EF Core 用のデザイン時ツール
• EF Core SQLite プロバイダー。これにより、EF Core パッケージが依存関係としてインストールされます。
• スキャフォールディングに必要なパッケージ: Microsoft.VisualStudio.Web.CodeGeneration.Design と Microsoft.EntityFrameworkCore.SqlServer。

アプリが環境ごとにデータベース コンテキストを構成できるようにする複数環境構成に関するガイダンスについては、「ASP.NET Core で複数の環境を使用する」を参照してください。

メモ

既定では、インストールする .NET バイナリのアーキテクチャは、現在実行中の OS アーキテクチャを表します。 別の OS アーキテクチャを指定するには、「dotnet tool install, --arch option」を参照してください。 詳細については、GitHub イシュー dotnet/AspNetCore.Docs #29262 を参照してください。

Visual Studio Code で、Ctrl+F5 (Windows) または ⌘+F5 (macOS) を押して、デバッグなしでアプリを実行します。

エディター領域の下にある [パネル] で [問題] タブを選択するか、[表示] メニューから [問題] を選択します (現在表示されていない場合)。 コンパイル エラーがないことを確認します。

ムービー モデルのスキャフォールディング

このセクションでは、ムービー モデルがスキャフォールディングされます。 つまり、スキャフォールディング ツールにより、ムービー モデルの作成、読み取り、更新、削除の (CRUD) 操作用のページが生成されます。

Visual Studio

1. Pages/Movies フォルダーを作成します。

   1. Pages フォルダーを右クリックし、[追加]>[新しいフォルダー] の順に選択します。
   2. フォルダーに Movies という名前を付けます。

2. Pages/Movies フォルダーを右クリックし、[追加]>[新規スキャフォールディング アイテム] の順に選択します。

   

3. [新しいスキャフォールディングの追加] ダイアログで、[Entity Framework を使用する Razor Pages (CRUD)]>[追加] の順に選択します。

   

4. [Add Razor Pages using Entity Framework (CRUD)](Entity Framework を使用して Razor Pages (CRUD) を追加する) ダイアログを完了します。

   1. [モデル クラス] ドロップ ダウンで、[Movie (RazorPagesMovie.Models)] を選択します。
   2. Data context class 行で、 + (+) 記号を選択します。
      1. [データ コンテキストの追加] ダイアログで、クラス名 RazorPagesMovie.Data.RazorPagesMovieContext が生成されます。
      2. [データベース プロバイダー] ドロップダウンで、[SQL Server] を選びます。
   3. [追加] を選択します。

   

appsettings.json ファイルは、ローカル データベースへの接続に使用される接続文字列を使用して更新されます。

Visual Studio Code

• ファイル Program.cs と .csproj が格納されているプロジェクト ディレクトリでコマンド シェルを開きます。 次のコマンドを実行します。

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

次の表で、ASP.NET Core コード ジェネレーターのオプションについて詳しく説明します。

オプション	説明
-m	モデルの名前。
-dc	名前空間を含めて使用する DbContext クラス。
-udl	既定のレイアウトを使用します。
-outDir	ビューを作成するための相対出力フォルダー パス。
--referenceScriptLibraries	[編集] および [作成] ページに _ValidationScriptsPartial を追加します。

dotnet aspnet-codegenerator razorpage コマンドに関するヘルプを取得するには、-h オプションを使用します。

dotnet aspnet-codegenerator razorpage -h

詳細については、「dotnet aspnet-codegenerator」を参照してください。

開発用に SQLite を、運用環境に SQL Server を使用する

SQLite が選択されている場合、テンプレートで生成されたコードは開発の準備ができています。 次のコードは、開発時には SQLite の接続文字列を選択し、運用時には SQL Server を選択する方法を示したものです。

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

開発モードでは WebApplication によって UseDeveloperExceptionPage が呼び出されるので、上のコードでは開発時には UseDeveloperExceptionPage は呼び出されません。

警告

この記事では、ユーザーの認証を必要としないローカル データベースを使用します。 運用アプリでは、使用可能な最も安全な認証フローを使用する必要があります。 デプロイされたテスト アプリと運用アプリの認証の詳細については、「セキュリティで保護された認証フロー」をご覧ください。

作成および更新されたファイル

スキャフォールディングのプロセスでは、次のファイルが作成されます。

• Pages/Movies: 作成、削除、詳細、編集、インデックス。
• Data/RazorPagesMovieContext.cs

作成されたファイルについては、次のチュートリアルで説明します。

スキャフォールディング プロセスにより、次の強調されているコードが 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.UseRouting();

app.UseAuthorization();

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

app.Run();

Visual Studio Code

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.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.MapStaticAssets();
app.MapRazorPages();

app.Run();

Program.cs の変更については、このチュートリアルで後ほど説明します。

EF の移行機能を使用して初期データベース スキーマを作成する

Entity Framework Core の移行機能を使用すると、次のことができます。

• 初期データベース スキーマを作成します。
• データベース スキーマを増分方式で更新して、アプリのデータ モデルとの同期を維持します。 データベース内の既存のデータは保持されます。

Visual Studio

このセクションでは、パッケージ マネージャー コンソール (PMC) ウィンドウを使用して、次の作業を行います。

• 初期移行を追加します。

• 初期移行でデータベースを更新します。

• [ツール] メニューで、[NuGet パッケージ マネージャー]>[パッケージ マネージャー コンソール] の順に選択します。

  

• PMC で、次のコマンドを入力します。

  Add-Migration InitialCreate
  

• Add-Migration コマンドによって最初のデータベース スキーマを作成するコードが生成されます。 このスキーマは、DbContext で指定されたモデルに基づきます。 InitialCreate 引数は、移行の名前を指定するために使用されます。 任意の名前を使用できますが、規則により、移行を説明する名前が選択されます。

次の警告が表示されますが、これは後の手順で対処します。

エンティティ型 'Movie' の decimal 列 'Price' に型が指定されていません。 これにより、値が既定の有効桁数と小数点以下桁数に収まらない場合、自動的に切り捨てられます。 'HasColumnType()' を使用してすべての値に適合する SQL server 列の型を明示的に指定します。

• PMC で、次のコマンドを入力します。

  Update-Database
  

  Update-Database コマンドにより、適用されていない移行で Up メソッドが実行されます。 ここでは、コマンドにより、Migrations/<time-stamp>_InitialCreate.cs ファイルの Up メソッドが実行され、データベースが作成されます。

Visual Studio Code

• RazorPagesMovie.csproj プロジェクトを右クリックし、[Open in Integrated Terminal] (統合ターミナルで開く) を選択します。

  [ターミナル] ウィンドウが開き、Program.cs および .csproj ファイルを含むプロジェクト ディレクトリにコマンド プロンプトが表示されます。

• 次の .NET CLI コマンドを実行します。

  dotnet ef migrations add InitialCreate
  

  migrations コマンドによって最初のデータベース スキーマを作成するコードが生成されます。 このスキーマは、DbContext で指定されたモデルに基づきます。 InitialCreate 引数は移行の命名に使用されます。 任意の名前を使用できますが、規則により、移行を説明する名前が選択されます。

• 次の .NET CLI コマンドを実行します。

  dotnet ef database update
  

  update コマンドにより、適用されていない移行で Up メソッドが実行されます。 ここでは、update により、Migrations/<time-stamp>_InitialCreate.cs ファイルの Up メソッドが実行され、データベースが作成されます。

Note

SQLite では、Price フィールドの列の型が TEXT に設定されています。 これは、後の手順で解決されます。

データ コンテキスト RazorPagesMovieContext:

• Microsoft.EntityFrameworkCore.DbContext から派生します。
• データ モデルに含まれるエンティティを指定します。
• Movie モデルに関する EF Core の機能 (作成、読み取り、更新、削除など) を調整します。

生成されたファイル内の RazorPagesMovieContext クラスData/RazorPagesMovieContext.cs:

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

上記のコードによって、エンティティ セットの DbSet<Movie> プロパティが作成されます。 Entity Framework の用語では、エンティティ セットは通常はデータベース テーブルに対応します。 エンティティはテーブル内の行に対応します。

DbContextOptions オブジェクトでメソッドが呼び出され、接続文字列の名前がコンテキストに渡されます。 ローカル開発の場合、構成システムによって、appsettings.json ファイルから接続文字列が読み取られます。

アプリのテスト

1. アプリを実行し、ブラウザーで URL に /Movies を追加します ( http://localhost:port/movies )。

   次のエラー メッセージが表示される場合:

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

   移行手順を失敗しました。

2. [Create New] (新規作成) リンクをテストします。

   

   Note

   Price フィールドに小数点のコンマを入力できない場合があります。 小数点にコンマ (",") を使う英語以外のロケール、および英語 (米国) 以外の日付形式で、jQuery 検証をサポートするには、アプリをグローバル化する必要があります。 グローバル化の手順については、この GitHub の記事をご覧ください。

3. [編集] 、 [詳細] 、および [削除] の各リンクをテストします。

次のチュートリアルでは、スキャフォールディングによって作成されるファイルについて説明します。

依存関係挿入に登録されるコンテキストを調べる

ASP.NET Core には、依存関係挿入が組み込まれています。 サービス (EF Core データベース コンテキストなど) は、アプリケーションの起動時に依存関係の挿入に登録されます。 これらのサービスを必要とするコンポーネント (Razor Pages など) は、コンストラクターのパラメーターを介して指定されます。 データベース コンテキスト インスタンスを取得するコンストラクター コードは、この後のチュートリアルで示します。

スキャフォールディング ツールによってデータベース コンテキストが自動的に作成され、依存関係挿入コンテナーに登録されました。 スキャフォールダーにより、次の強調されているコードが 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.UseRouting();

app.UseAuthorization();

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

app.Run();

Visual Studio Code

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.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.MapStaticAssets();
app.MapRazorPages();

app.Run();

完成したサンプルを使用したトラブルシューティング

解決できない問題が発生した場合は、コードを完成したプロジェクトと比較します。 完成したプロジェクトを表示またはダウンロードします (ダウンロード方法)。

次の手順

前: はじめに次: Razor ページのスキャフォールディング