【Blazor】Radzen.Blazorでメッセージボックスを共通化

Blazor上でjavascriptを使用しないで、業務システムで良く使用する以下のようなアイコンのあるメッセージボックスを表示する為、今回はBlazorのUIフレームワークであるRadzen.Blazorを使用します。

ユウト
ユウト

BlazorでもJSRuntimeを使用すれば、javascriptの処理でメッセージボックスを表示できるみたいですが、なぜRadzen.Blazorを使用するのでしょうか?

Blazorはクライアント側の処理も、javascriptなどのスクリプト言語を使用しないでC#で書けるようなったのが魅力の一つなんです。
なので、できる限りC#で実現できることは、C#で書くのがBlazorのシステム開発としては理想です。
Radzen.Blazorにダイアログ機能があり、UIもシンプルで使用しやすかった為、
メッセージボックス共通化の一例としてRadzen.Blazorで解説していきます。
石井よしまさ
石井よしまさ
ユウト
ユウト

公式のチュートリアルを見ると、確認ダイアログはあるけど、アイコンのあるメッセージボックスは標準の機能にはないみたいですね。

そうなんです。ただ特定のページを、JQueryみたいにダイアログで表示する機能はあるので、これを利用して、メッセージボックスを共通化してきましょう!
石井よしまさ
石井よしまさ

そこで今回は、こんな方に向けて解説していきます。

・Radzen.Blazorを使用方法を知りたい
・Blazorでjavascriptを使用しないでメッセージボックスを表示したい
・アイコンのあるメッセージボックスを共通化して、簡単に使用できるようにしたい

 

事前準備

前提

・Visual Studio Community 2019
こちらでダウンロード可能です。(無料)

・.NET Core SDK 3.0.1
・Blazor Server

プロジェクト作成

こちらの記事で作成したプロジェクトを使用して解説していきます。

Radzen.Blazorインストール

(1). ソリューションエクスプローラー内のプロジェクト名を右クリック⇒「NuGetパッケージの管理(N)」をクリック。

(2). 参照タブを選択、「Radzen.Blazor」を検索後、「インストール」をクリック。

(3). 環境によって以下のようなダイアログが表示される場合は、「OK」「同意する」をクリックしてインストールを続行。

(5). 「_Imports.razor」を修正

10~11行目にRadzen.Blazor用のusingを追加します。

(6). 「Pages」⇒「_Host.cshtml」を修正

14,15行目にRadzen.Blazorに必要なcssファイルとjsファイルを読み込みコードを追加します。

(6). 「Startup.cs 」を修正

・13行目にRadzen.Blazorに必要なusingディレクティブを追加します。
・ConfigureServicesメソッド内(28~37行目)にRadzen.Blazorで必要なサービスを登録します。

アイコン画像をプロジェクト内に追加

メッセージボックスで使用するアイコンの画像をプロジェクト内に登録します。
ネット上で「警告 アイコン 無料素材」とか検索すれば、たくさん出てきますが、
今回は情報、警告、エラーのアイコン用画像を自作しました。
今回作成したアイコンは、無料・商用利用OKなので、お気軽にご使用ください。

(1). 「wwwroot」内に「images」フォルダを新規作成後、対象のアイコン画像をインポート。
・「wwwroot」を右クリック ⇒ 「追加」⇒ 「新しいフォルダ」を選択
・作成したフォルダの名前を変更(例ではimagesにしています)
・作成したフォルダを右クリック ⇒ 「既存の項目」を選択
・プロジェクト内に追加するアイコン画像を選択

共通コンポーネント作成

メッセージボックスの共通コンポーネント作成

まずはメッセージボックス本体の共通コンポーネントを作成していきます。

(1). アイコンの設定値を列挙体で定義する為、共通定数専用のクラスを作成。

・「Data」フォルダを右クリック ⇒ [追加] ⇒ [クラス]を選択。
・クラスを選択して、ファイル名を設定後、追加ボタンをクリック。
今回は「CommonConst.cs」というファイル名にします。

 

(2). 「Pages」内にメッセージボックス共通コンポーネントを作成。
・「Pasgs」フォルダを右クリック ⇒ 「追加」⇒ 「新しい項目」を選択。
・Razorコンポーネント」を選択して、ファイル名を設定後、追加ボタンをクリック。
※今回は「AleatMessage.razor」というファイル名にします。

このコンポーネントのポイントは以下になります。

Bootstrapのグリッドシステムを使用して、左にアイコンエリア、右にメッセージエリアにレイアウトを設定しました。
7~20行目:パラメータ「アイコン」によって、表示するアイコン画像を条件分岐する
21~23行目:パラメータ「メッセージ本文」の内容を表示する。
⇒Styleにoverflow-y: scrollを設定して、メッセージ内容が複数行の場合でもスクロールして見れるようにする。
32~42行目:このコンポーネントを呼び出す時に設定するパラメータを定義します。

※画像のパスは、私が作成したアイコンのファイル名、サイズ(Width,Height)でコードを記載しているので、異なる画像を使用している場合は、適宜変更してください。

継承元の共通コンポーネント作成

他のコンポーネントでも、メッセージボックスを使用できるように、継承元になる共通コンポーネントを作成します。

(1). 「Shared」内にメッセージボックス表示メソッドを記述する為の共通コンポーネントを作成。

・[Shared]フォルダを右クリック ⇒ [追加] ⇒ [新しい項目]を選択。
・Razorコンポーネント」を選択して、ファイル名を設定後、追加ボタンをクリック。
今回は「BaseComponent.razor」というファイル名にします。

このコンポーネントのポイントは以下になります。

15行目:AlertMessageコンポーネントのパラメータを指定します。
16行目:メッセージボックスのサイズを変更したい場合は、Width、Heightを変更してください。
17行目:AlertMessageコンポーネントをRadzen.Blazorのダイアログで表示します。
⇒第1引数がメッセージボックスのタイトルの為、引数に設定されたmessageTitleを設定しています。

動作確認用ページ作成

では、共通メッセージボックスコンポーネント、ベースコンポーネントの作成ができたら、
メッセージボックスを呼び出してみましょう。

動作確認用のページを作成しますが、今回はトップページである「Pages」内の「Index.razor」に記載して解説します。

このコンポーネントのポイントは以下になります。

3行目:ベースコンポーネントを継承するコードを記載しています。これによりベースコンポーネントのメソッドが呼び出せるようになります。
4行目:Radzen.Blazorのダイアログを使用する為に記載が必要です。
6~9行目:13~31行目のメソッドのクリックイベントをRadzen.Blazorのボタンで設定しています。
13~31行目:情報、警告、エラー、アイコン無しのメッセージボックスを呼び出す用のメソッドです。
base.MessageBoxShowとコールすることで、簡単にメッセージボックスを表示できるようになります。MessageBoxShow(string, string, CommonConst.MessageIcon)
【パラメータ】
第1引数:メッセージ内容
⇒改行したい場合は、半角\nをいれる
第2引数:メッセージタイトル
⇒メッセージボックスの上部に表示されるタイトル
第3引数:メッセージボックスのアイコン
⇒CommonConst内で定義したMessageIconのEnum値
ユウト
ユウト

なるほど!ベースとなるコンポーネントにダイアログを表示する処理を書いておいて、継承先のコンポーネントから呼び出すだけで、メッセージを表示できるようにしたということですね!

そうです!ただ継承先のコンポーネントでは、4行目にある<RadzenDialog />を書いておくことが必要なので、
そこを忘れないようにしましょう。
石井よしまさ
石井よしまさ

動作確認

それでは、早速、動かしてみましょう!

タイトル、アイコン、メッセージがきれいに表示されました。

メッセージも改行されて、縦スクロールバーで長い文章でも見る事ができます。

まとめ

ということでRadzen.Blazorを使用したメッセージボックスを共通化する方法を紹介しました。
Radzen.Blazorのダイアログに、今回のようなメッセージボックスの機能が、今後追加になるか分かりませんが、こういった感じに自作することで、汎用的にメッセージボックスを画面で使用できます。

今後の目標としては、「OK」「キャンセル」の確認ダイアログとしても使用できるようにしたいですが、それまではRadzen.Blazor既存のConfirm用ダイアログで対処します。

それでは、今回も最後までお読みいただきありがとうございました!

フリーランスエンジニア歴9年のセールスデザインができるWeb制作者 石井よしまさのメルマガ

常駐型のフリーランスエンジニアとして9年。
9年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、

以下のような内容を配信していきます。

「常駐型のフリーランスで評価される為に大切な5つのマインド」
「9年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか?」
「セールスデザイナーが依頼すべき良いコーダーとは?」..

などについて学べます。

是非、フリーランスとしてやっていきたい!
という方は、ご登録ください(^^)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA