BlazorのQuickGridでCRUD処理のスキャフォールディングを試してみる

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はBlazorアプリケーションにスキャフォールディングを利用してCRUD処理を実装する方法ついて紹介します。

本記事では、Visual Studio 2022 17.9で利用可能になった、QuickGridとEntity Frameworkを使用したCRUD(作成、読み取り、更新、削除)処理のスキャフォールディングを実施して、Blazorアプリケーションでデータを表示・編集する方法を確認してみます。

Blazorアプリケーションの作成

はじめに、Visual Studio 2022でプロジェクトテンプレート「Blazor Web App」を選択し、Blazorアプリケーション「BlazorApp1」を作成します。

引Blazorアプリケーションの作成
引Blazorアプリケーションの作成

現時点でスキャフォールディングを実施して作成されるRazorコンポーネントはWebAssemblyをサポートしていません。そこでInteractive render modeServerに設定します。

引Blazorアプリケーションの作成

データモデルの追加

次に、プロジェクトに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クラスBlazorApp1ContextDataフォルダに追加されます。

Entity Framework(EF Core)の移行

ソリューションエクスプローラーから「Connected Services」を右クリックしてメニューから「接続済みサービスの管理」を選択します。「接続済みサービス」タブが表示されるので「SQLite (ローカル)」から「移行の追加」を選択します。

Entity Framework(EF Core)のマイグレーション

先ほど追加されたDbContextのクラスBlazorApp1Contextが自動で設定されます。そのままで[完了]をクリックします。

Entity Framework(EF Core)のマイグレーション

移行の完了後に「接続済みサービス」タブが表示されるので「SQLite (ローカル)」から「データベースを更新する」を選択します。

Entity Framework(EF Core)のマイグレーション

先ほど追加されたDbContextのクラスBlazorApp1Contextが自動で設定されます。そのままで[完了]をクリックします。

Entity Framework(EF Core)のマイグレーション

追加したCRUD処理を確認する

プロジェクトをデバッグ実行するとアプリケーションが起動します。ブラウザのURLに/productsを追加して初期ページ(Index)を表示します。

追加したCRUD処理を確認する

このページでは、以下のように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)に遷移し、データを追加することができます。

追加したCRUD処理を確認する
追加したCRUD処理を確認する

QuickGridで表示されている項目の「Edit」をクリックするとEditページ(/products/edit?id=XX)に遷移し、データを編集することができます。

追加したCRUD処理を確認する
追加したCRUD処理を確認する

QuickGridで表示されている項目の「Details」をクリックするとDetailsページ(/products/details?id=XX)に遷移し、データの内容を参照することができます。

追加したCRUD処理を確認する

QuickGridで表示されている項目の「Delete」をクリックするとDeleteページ(/products/delete?id=XX)に遷移し、データを削除することができます。

追加したCRUD処理を確認する

さいごに

今回はBlazorで使えるデータグリッド「QuickGrid」でスキャフォールディングを実施してCRUD処理を追加する方法を紹介しました。データモデルを設定して、スキャフォールディングとEF Coreの移行を実施するだけでCRUD処理の実装ができるようになったので、今までよりも使いやすくなったかと思います。

\  この記事をシェアする  /