🐆

MudBlazorを使ってBlazor ServerのCRUDアプリのサンプルを作ってみた

2022/04/13に公開

この記事では、Blazorで簡単なCRUDアプリケーションのサンプルを公開したいと思います。Blazorではスキャフォールディングで簡単にCRUDを作成するような機能がないため、簡単なデータの一覧画面や編集を行う画面のサンプルを作成しました。

実際にアプリケーションを作成していただく際に、少しでも参考になれば幸いです。
汎用的に利用できればと思い、自社（インフラジスティックス・ジャパン）のコンポーネントは使用せず、MudBlazorを利用しております。

MudBlazorとは

Blazor用のMaterial DesignなUIコンポーネントライブラリのひとつです。
MudBlazorを含め、その他のコンポーネントについても以下で紹介されておりますので、ご参考ください。

公式サイトではコマンドで導入して行く手順も掲載されておりますが、テンプレートを導入すれば、Visual Studioの新しいプロジェクトの作成画面で選択できるようになります。

以下のコマンドで、MudBlazorのテンプレートが追加されます。※Visual Studio 2022及び.NET6が導入済みの前提で進めます。

dotnet new --install MudBlazor.Templates

Visual Studioで新しいプロジェクトを作成しようとすると、MudBlazorのテンプレートが確認できます。

こちらのテンプレートを使用することにより、最初からMudBlazorが導入済みのプロジェクトを作成できます。

ユーザー情報を管理できる簡単なCRUD機能を実装しております。

DBアクセスやビジネスロジックなどについても基本的な部分は実装しております。これからBlazorで開発されるかたの参考になれば幸いです。