インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

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

f:id:ykinfragistics:20211214173940p:plain

皆さん、こんにちは!
ソリューションコンサルタントの狩谷です。

この記事では、Blazor で簡単な CRUD アプリケーションのサンプルを公開したいと思います。Blazor ではスキャフォールディングで簡単に CRUD を作成するような機能がないため、簡単なデータの一覧画面や編集を行う画面のサンプルを作成しました。実際にアプリケーションを作成していただく際に、少しでも参考になれば幸いです。 汎用的に利用できればと思い、自社(インフラジスティックス・ジャパン)のコンポーネントは使用せず、MudBlazor を利用しております。

本記事は Qiita のドキュメントのミラーです。

qiita.com

MudBlazor とは

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

qiita.com

MudBlazor の導入

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

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

dotnet new --install MudBlazor.Templates

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

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

サンプルアプリケーション

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

一覧画面

image.png

新規画面

image.png

編集画面

image.png

削除画面

image.png

サンプルプログラムのソースコード

github.com

まとめ

DB アクセスやビジネスロジックなどについても基本的な部分は実装しております。これから Blazor で開発されるかたの参考になれば幸いです。 サンプルコードをご覧いただいて、ご不明点などございましたら、お気軽にお問い合わせください。 以下の無料オンライン相談会でご説明させていただくこともできます。

今回は MudBlazor を使用しましたが、次回は弊社製品の Ignite UI for Blazor を利用したものを作成したいと思います。

技術サポート・無料オンライン相談会をご利用ください

インフラジスティックスのUI製品は多くの機能を備えているためドキュメントの情報量も多く、なかなかお探しの情報に辿り着けない場合もあります。そういった際はお気軽に技術サポートや、製品導入支援担当との無料オンライン相談会をご予約いただくことで検証時間を節約可能ですので、ぜひご活用ください。
技術サポートへの問い合わせ方法を確認する
無料オンライン相談会を予約する