今回はBlazorアプリケーションにスキャフォールディングを利用してCRUD処理を実装する方法ついて紹介します。
本記事では、Visual Studio 2022 17.9で利用可能になった、QuickGridとEntity Frameworkを使用したCRUD（作成、読み取り、更新、削除）処理のスキャフォールディングを実施して、Blazorアプリケーションでデータを表示・編集する方法を確認してみます。
Blazorアプリケーションの作成
はじめに、Visual Studio 2022でプロジェクトテンプレート「Blazor Web App」を選択し、Blazorアプリケーション「BlazorApp1」を作成します。
現時点でスキャフォールディングを実施して作成されるRazorコンポーネントはWebAssemblyをサポートしていません。そこでInteractive render modeをServerに設定します。
データモデルの追加
次に、プロジェクトにModelフォルダを追加し、そこへデータモデルとしてProductクラスを追加します。
public class Product
{
public int Id { get; set; } // 商品ID
public string? Name { get; set; } // 商品名
public decimal Price { get; set; } // 価格
}スキャフォールディングを実施
ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」－「新規スキャフォールディングアイテム」を選択します。
「Entity Framework を使用する Razor コンポーネント (CRUD)」を選択して［追加］をクリックします。
モデルクラスに先ほど作成したProductクラスを設定します。DbContextクラスはまだ作成していない状態なので、［＋］をクリックして新規に作成します。データベースプロバイダーとしてSQLiteを設定します。
設定が完了した後に［追加］をクリックすると、自動的に必要なNuGetパッケージのインストールやRazorコンポーネントおよびクラスの作成が実施されます。
CRUD処理を実施するそれぞれのRazorコンポーネントは、モデルクラス（Productクラス）に基づいた名前で作成されたProductPagesフォルダに追加されます。また、DbContextクラスBlazorApp1ContextはDataフォルダに追加されます。
Entity Framework（EF Core）の移行
ソリューションエクスプローラーから「Connected Services」を右クリックしてメニューから「接続済みサービスの管理」を選択します。「接続済みサービス」タブが表示されるので「SQLite (ローカル)」から「移行の追加」を選択します。
先ほど追加されたDbContextのクラスBlazorApp1Contextが自動で設定されます。そのままで［完了］をクリックします。
移行の完了後に「接続済みサービス」タブが表示されるので「SQLite (ローカル)」から「データベースを更新する」を選択します。
先ほど追加されたDbContextのクラスBlazorApp1Contextが自動で設定されます。そのままで［完了］をクリックします。
追加したCRUD処理を確認する
プロジェクトをデバッグ実行するとアプリケーションが起動します。ブラウザのURLに/productsを追加して初期ページ（Index）を表示します。
このページでは、以下のようにQuickGridが使用されており、データベースに追加されたデータを表示することができます。
@page "/products"
@using Microsoft.AspNetCore.Components.QuickGrid
@inject BlazorApp1.Data.BlazorApp1Context DB
@using BlazorApp1.Model
<PageTitle>Index</PageTitle>
<h1>Index</h1>
<p>
<a href="products/create">Create New</a>
</p>
<QuickGrid Class="table" Items="DB.Product">
<PropertyColumn Property="product => product.Name" />
<PropertyColumn Property="product => product.Price" />
<TemplateColumn Context="product">
<a href="@($"products/edit?id={product.Id}")">Edit</a> |
<a href="@($"products/details?id={product.Id}")">Details</a> |
<a href="@($"products/delete?id={product.Id}")">Delete</a>
</TemplateColumn>
</QuickGrid>
「Create New」をクリックするとCreateページ（/products/create）に遷移し、データを追加することができます。
QuickGridで表示されている項目の「Edit」をクリックするとEditページ（/products/edit?id=XX）に遷移し、データを編集することができます。
QuickGridで表示されている項目の「Details」をクリックするとDetailsページ（/products/details?id=XX）に遷移し、データの内容を参照することができます。
QuickGridで表示されている項目の「Delete」をクリックするとDeleteページ（/products/delete?id=XX）に遷移し、データを削除することができます。
さいごに
今回はBlazorで使えるデータグリッド「QuickGrid」でスキャフォールディングを実施してCRUD処理を追加する方法を紹介しました。データモデルを設定して、スキャフォールディングとEF Coreの移行を実施するだけでCRUD処理の実装ができるようになったので、今までよりも使いやすくなったかと思います。