新しいBlazorスキャフォールディング機能でCRUDしてみる
前提
Visual Studio2022 17.9.0 Preview 1.0以降
ASP.NETとWeb開発のワークロード
手順
新しいプロジェクトの作成からBlazor Web Appを作成する。
プロジェクト名を決めて次へボタンを押下する。
Interactive render modeはServerとします。
作成ボタンを押下します。
Modelフォルダの下にBooks.csクラスを作成しました。
本を管理するクラスを作成していきます。
以下のようにしました。
public class Books
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Author { get; set; } = string.Empty;
public string? Description { get; set; }
public string? Genre { get; set; }
public string? Publisher { get; set; }
public string? PublishedDate { get; set; }
public string? ISBN { get; set; }
}
これについて、あとはできるだけコードを書かないようにしてCRUDできるページを生成していきたいと思います。
データベースはVisual Studioをインストールすると入っているSQL Serverのローカル開発用バージョンであるLocalDBを使用していきます。
おもむろに、ソリューションエクスプローラで右クリックしてスキャフォールディングしていきます。
新規スキャフォールディングアイテムの追加ダイアログにRazor Components using Entity Framework(CRUD)という選択肢があります。今回はこれを使っていきます。
追加を押下します。
モデルクラスは先ほど作成したクラスを指定します。
DbContextは作成してません。
右側にある＋ボタンを押下するとデータコンテキストの追加が表示されます。
これでデータコンテキストの追加を自動的に作成できます。
ここまでくると、データベースプロバイダーを選択できますので今回はSQL Serverを選択します。
4つ埋まったら、追加ボタンを押下します。
すると、自動的にコードが生成されます。
このままではまだデータベースにテーブルが作成されていない状態になりますので最後にEntityFrameworkCoreの呪文を唱えてモデルからテーブルへの「移行」という作業を行います。
表示メニューからパッケージマネージャーコンソールを開きます。
以下の手順はパッケージマネージャーコンソールにコマンドを入れます。
Add-Migration Init
と入力しEnterキーを入力します。
すると、Migrationフォルダーが作成されます。
update-dabase
と入力しEnterキーを入力します。
以上で、テーブルが作成されます。
動作確認
ここまでエラーなくできたら実行してみます。
アドレス欄に/booksを追加で入力してみましょう
まだ、データベースが空ですのでとりあえずIndexページが表示されていれば成功です。
追加してみます。
無事、データベースに登録できているようです。
編集してみます。
きちんと機能しているようです。
もう一つデータを入れてみてもきちんと表示できます。
削除もしてみます。
消えました。
このように、書いたコードはほぼモデルのみでCRUDのアプリケーションができてしまう機能が実装されています。
マスタメンテナンスなんかはだいたいこれでOKとおもいます。
また、IndexはQuickGridを使っていますのでソートとか絞り込みなどの機能の実装も容易です。
Fluent UI Blazorへの差し替えも数分でできるでしょう。
Discussion