【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を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop @using BlazorSample0518 @using BlazorSample0518.Shared @using Radzen; @using Radzen.Blazor; |
(6). 「Pages」⇒「_Host.cshtml」を修正
14,15行目にRadzen.Blazorに必要なcssファイルとjsファイルを読み込みコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@page "/" @namespace BlazorSample0518.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>BlazorSample0518</title> <base href="~/" /> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> <link href="css/site.css" rel="stylesheet" /> <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> </head> <body> <app> @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered)) </app> <script src="_framework/blazor.server.js"></script> </body> </html> |
(6). 「Startup.cs 」を修正
・13行目にRadzen.Blazorに必要なusingディレクティブを追加します。
・ConfigureServicesメソッド内(28～37行目)にRadzen.Blazorで必要なサービスを登録します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.HttpsPolicy; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; using BlazorSample0518.Data; using Radzen; namespace BlazorSample0518 { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton<WeatherForecastService>(); services.AddScoped<DialogService>(); services.AddScoped<NotificationService>(); services.AddScoped<TooltipService>(); services.AddScoped<ContextMenuService>(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); } } } |
アイコン画像をプロジェクト内に追加
メッセージボックスで使用するアイコンの画像をプロジェクト内に登録します。
ネット上で「警告 アイコン 無料素材」とか検索すれば、たくさん出てきますが、
今回は情報、警告、エラーのアイコン用画像を自作しました。
今回作成したアイコンは、無料・商用利用OKなので、お気軽にご使用ください。
(1). 「wwwroot」内に「images」フォルダを新規作成後、対象のアイコン画像をインポート。
・「wwwroot」を右クリック ⇒ 「追加」⇒ 「新しいフォルダ」を選択
・作成したフォルダの名前を変更（例ではimagesにしています）
・作成したフォルダを右クリック ⇒ 「既存の項目」を選択
・プロジェクト内に追加するアイコン画像を選択
-
- wwwroot内に新規フォルダを作成
-
- 新規に作成したフォルダ内にアイコン画像を追加
-
- 追加したい画像を選択して、追加する
-
- 追加後のイメージ
共通コンポーネント作成
メッセージボックスの共通コンポーネント作成
まずはメッセージボックス本体の共通コンポーネントを作成していきます。
(1). アイコンの設定値を列挙体で定義する為、共通定数専用のクラスを作成。
・「Data」フォルダを右クリック ⇒ [追加] ⇒ [クラス]を選択。
・クラスを選択して、ファイル名を設定後、追加ボタンをクリック。
今回は「CommonConst.cs」というファイル名にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
namespace BlazorSample0518.Data { public class CommonConst { /// <summary> /// メッセージアイコン /// </summary> public enum MessageIcon { /// <summary>アイコン無し</summary> None, /// <summary>情報</summary> Info, /// <summary>警告</summary> Warning, /// <summary>エラー</summary> Error } } } |
(2). 「Pages」内にメッセージボックス共通コンポーネントを作成。
・「Pasgs」フォルダを右クリック ⇒ 「追加」⇒ 「新しい項目」を選択。
・Razorコンポーネント」を選択して、ファイル名を設定後、追加ボタンをクリック。
※今回は「AleatMessage.razor」というファイル名にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
@page "/AlertMessage" @using Data; @inject Radzen.DialogService dialogService <div class="row"> <div class="col-md-2"> @if (Icon == CommonConst.MessageIcon.Info) { <RadzenImage Path="Images/info_600×600.png" Width="48" Height="48" /> } else if (Icon == CommonConst.MessageIcon.Warning) { <RadzenImage Path="Images/warning_600×600.png" Width="48" Height="48" /> } else if (Icon == CommonConst.MessageIcon.Error) { <RadzenImage Path="Images/error_600×600.png" Width="48" Height="48" /> } </div> <div class="col-md-10 text-xl-left" style="height:70px;overflow-y: scroll;"> <pre>@Message</pre> </div> </div> <div class="row mt-2"> <div class="col-md-12 text-center"> <RadzenButton Click="@((args) => dialogService.Close(true))" Text="OK" Style="width: 150px" /> </div> </div> @code { /// <summary> /// メッセージ本文 /// </summary> [Parameter] public string Message { get; set; } /// <summary> /// アイコン /// </summary> [Parameter] public CommonConst.MessageIcon Icon { get; set; } }こ |
このコンポーネントのポイントは以下になります。
| Bootstrapのグリッドシステムを使用して、左にアイコンエリア、右にメッセージエリアにレイアウトを設定しました。 7～20行目：パラメータ「アイコン」によって、表示するアイコン画像を条件分岐する 21～23行目：パラメータ「メッセージ本文」の内容を表示する。 ⇒Styleにoverflow-y: scrollを設定して、メッセージ内容が複数行の場合でもスクロールして見れるようにする。 32～42行目：このコンポーネントを呼び出す時に設定するパラメータを定義します。 |
※画像のパスは、私が作成したアイコンのファイル名、サイズ(Width,Height)でコードを記載しているので、異なる画像を使用している場合は、適宜変更してください。
継承元の共通コンポーネント作成
他のコンポーネントでも、メッセージボックスを使用できるように、継承元になる共通コンポーネントを作成します。
(1). 「Shared」内にメッセージボックス表示メソッドを記述する為の共通コンポーネントを作成。
・[Shared]フォルダを右クリック ⇒ [追加] ⇒ [新しい項目]を選択。
・Razorコンポーネント」を選択して、ファイル名を設定後、追加ボタンをクリック。
今回は「BaseComponent.razor」というファイル名にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@using Data; @using Pages; @inject DialogService dialogService @code { /// <summary> /// メッセージボックス表示 /// </summary> /// <param name="messageText">メッセージ内容</param> /// <param name="messageTitle">タイトル</param> /// <param name="messageIcon">アイコン種別</param> protected void MessageBoxShow(string messageText, string messageTitle, CommonConst.MessageIcon messageIcon) { var dParam = new Dictionary<string, object>() { { "Icon", messageIcon }, { "Message", messageText } }; var dOpt = new Radzen.DialogOptions() { Width = "500px", Height = "220px" }; dialogService.Open<AlertMessage>(messageTitle, dParam, dOpt); } } |
このコンポーネントのポイントは以下になります。
| 15行目：AlertMessageコンポーネントのパラメータを指定します。 16行目：メッセージボックスのサイズを変更したい場合は、Width、Heightを変更してください。 17行目：AlertMessageコンポーネントをRadzen.Blazorのダイアログで表示します。 ⇒第1引数がメッセージボックスのタイトルの為、引数に設定されたmessageTitleを設定しています。 |
動作確認用ページ作成
では、共通メッセージボックスコンポーネント、ベースコンポーネントの作成ができたら、
メッセージボックスを呼び出してみましょう。
動作確認用のページを作成しますが、今回はトップページである「Pages」内の「Index.razor」に記載して解説します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@page "/" @using Data; @inherits BaseComponent <RadzenDialog /> <RadzenButton Click="OnClickOpenInfoClick" Text="Info" Style="margin-bottom: 20px; width: 150px" ButtonStyle="ButtonStyle.Info" /> <RadzenButton Click="OnClickOpenWarning" Text="Warning" Style="margin-bottom: 20px; width: 150px" ButtonStyle="ButtonStyle.Warning" /> <RadzenButton Click="OnClickOpenError" Text="Error" Style="margin-bottom: 20px; width: 150px" ButtonStyle="ButtonStyle.Danger" /> <RadzenButton Click="OnClickOpenNone" Text="None" Style="margin-bottom: 20px; width: 150px" ButtonStyle="ButtonStyle.Secondary" /> @code { void OnClickOpenInfoClick() { base.MessageBoxShow("Infoです。\nInfoです。\nInfoです。\nInfoです。", "情報", CommonConst.MessageIcon.Info); } void OnClickOpenWarning() { base.MessageBoxShow("Warningです。\nWarningです。\nWarningです。", "警告", CommonConst.MessageIcon.Warning); } void OnClickOpenError() { base.MessageBoxShow("Errorです。\nErrorです。\nErrorです。\nErrorです。\nErrorです。", "エラー", CommonConst.MessageIcon.Error); } void OnClickOpenNone() { base.MessageBoxShow("Noneです。\nNoneです。\nNoneです。\nNoneです。\nNoneです。", "", CommonConst.MessageIcon.None); } } |
このコンポーネントのポイントは以下になります。
| 3行目：ベースコンポーネントを継承するコードを記載しています。これによりベースコンポーネントのメソッドが呼び出せるようになります。 4行目：Radzen.Blazorのダイアログを使用する為に記載が必要です。 6～9行目：13～31行目のメソッドのクリックイベントをRadzen.Blazorのボタンで設定しています。 13～31行目：情報、警告、エラー、アイコン無しのメッセージボックスを呼び出す用のメソッドです。 base.MessageBoxShowとコールすることで、簡単にメッセージボックスを表示できるようになります。MessageBoxShow(string, string, CommonConst.MessageIcon) 【パラメータ】 第１引数：メッセージ内容 ⇒改行したい場合は、半角\nをいれる 第2引数：メッセージタイトル ⇒メッセージボックスの上部に表示されるタイトル 第3引数：メッセージボックスのアイコン ⇒CommonConst内で定義したMessageIconのEnum値 |
なるほど！ベースとなるコンポーネントにダイアログを表示する処理を書いておいて、継承先のコンポーネントから呼び出すだけで、メッセージを表示できるようにしたということですね！
そうです！ただ継承先のコンポーネントでは、4行目にある<RadzenDialog />を書いておくことが必要なので、
そこを忘れないようにしましょう。
動作確認
それでは、早速、動かしてみましょう！
-
- 情報
-
- 警告
-
- エラー
-
- アイコンなし
タイトル、アイコン、メッセージがきれいに表示されました。
メッセージも改行されて、縦スクロールバーで長い文章でも見る事ができます。
まとめ
ということでRadzen.Blazorを使用したメッセージボックスを共通化する方法を紹介しました。
Radzen.Blazorのダイアログに、今回のようなメッセージボックスの機能が、今後追加になるか分かりませんが、こういった感じに自作することで、汎用的にメッセージボックスを画面で使用できます。
今後の目標としては、「OK」「キャンセル」の確認ダイアログとしても使用できるようにしたいですが、それまではRadzen.Blazor既存のConfirm用ダイアログで対処します。
それでは、今回も最後までお読みいただきありがとうございました！
この記事を書いた人
- フリーエンジニア / Webデザイナー / LPコーディング講師 / シンガーソングライター
-
歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。
最新の投稿
- LPコーディング2022.09.27【LPコーディング】Q＆A 質問をクリックすると回答を表示する方法
- LPコーディング2022.08.28【LPコーディング】clip-pathでセクションを三角形に区切る方法
- LPコーディング2022.07.27【LPコーディング】 CSSのborderを使用した逆三角形の作り方
- Blazor2021.06.06【Blazor】Radzen.Blazorでメッセージボックスを共通化
フリーランスエンジニア歴10年のセールスデザインができるWeb制作者 石井よしまさのメルマガ
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、
以下のような内容を配信していきます。
「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか？」
「セールスデザイナーが依頼すべき良いコーダーとは？」..
などについて学べます。
是非、フリーランスとしてやっていきたい！
という方は、ご登録ください(^^)
