Blazor02

BlazorでのWebアプリケーション開発手法２【C#】B03_ポップアップメッセージを表示する方法

 

これまでのレクチャーでは、入力チェックのエラーメッセージを画面上に文字（赤字）で表示するやり方を扱ってきました。今回はそれとは別のアプローチとして、Windowsフォームアプリケーションの MessageBox のように、別画面でポーンとメッセージを表示する「ポップアップ」形式のやり方を解説します。

Blazor自体にはこうしたポップアップ表示専用の機能はありませんが、JavaScriptには alert という、ブラウザーの標準機能としてポップアップメッセージを表示する関数が用意されています。今回はこのJavaScriptの alert 関数を、Blazorのコードから呼び出す方法を解説します。

図1　今回のテーマ：JavaScriptのalert関数を使ったポップアップメッセージ表示

1. App.razorにJavaScriptの関数を用意する

JavaScriptの関数をBlazorから呼び出すには、あらかじめHTML側に script タグでJavaScriptの関数を定義しておく必要があります。今回はアプリ全体の共通のHTMLである App.razor に script タグを追加します。

図2　App.razorの</html>の下にscriptタグの枠を追加したところ

HTMLの script タグの中には、そのままJavaScriptのコードを書くことができます。この中に function で、好きな名前（今回は MessageBoxAlert という名前）の関数を定義し、引数として message を受け取り、その中でJavaScript標準の alert 関数に message を渡して呼び出す、という処理を書きます。

図3　MessageBoxAlert関数を定義し、内部でalert(message)を呼び出す実装

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
 
    <script>
        function MessageBoxAlert(message)
        {
            alert(message);
        }
    </script>
</body>

 

こうしておくと、Blazor側から「MessageBoxAlert」という名前を指定して呼び出すことで、このJavaScriptの alert 関数が実行されるようになります。

2. Home.razorからJavaScriptの関数を呼び出す

続いて、実際にこのメソッドを呼び出したい Home.razor に戻ります。JavaScriptの関数を呼び出すには、Blazorに用意されている IJSRuntime というサービスを @inject で依存性注入します。名前は JS など、好きな名前を付けておきます。

図4　@inject IJSRuntime JS でJSRuntimeを依存性注入したところ

呼び出し先は、エリア名称が未入力のときにエラーメッセージを設定している Save() メソッドです。もともとは _message フィールドに文字列を代入して画面上に赤字で表示するだけの処理になっています。

図5　書き換え前のSave()メソッド：_messageフィールドにエラー文言を代入している状態

ここに、先ほど注入した JS を使ってJavaScriptの関数を呼び出す処理を追加します。JSRuntimeには InvokeAsync と InvokeVoidAsync の2種類のメソッドがありますが、今回呼び出す alert は戻り値がないため、戻り値のない InvokeVoidAsync のほうを使います。1つ目の引数には、App.razorで自分で付けた関数名「MessageBoxAlert」を文字列で指定し、2つ目以降の引数として、呼び出し先の関数の引数（今回はmessage）に渡したい値を指定します。

図6　JS.InvokeVoidAsync(“MessageBoxAlert”, …)でJavaScript関数を呼び出す処理を追加したところ

private void Save()
{
    if (string.IsNullOrEmpty(_areaName))
    {
        JS.InvokeVoidAsync(
            "MessageBoxAlert", "エリア名称を入力してください");
        return;
    }
 
    //save処理
}

 

この状態で実行してみると、エリア名称を未入力のまま保存ボタンを押すと、ブラウザーの標準のポップアップとして「エリア名称を入力してください」というメッセージが表示されます。

図7　ブラウザー標準のポップアップとして「エリア名称を入力してください」が表示された状態

3. 非同期処理のすり抜けに注意する

ポップアップ自体は表示されましたが、よく見ると画面下にはまだ以前からある赤字のエラーメッセージも残っています。これは、InvokeVoidAsync が非同期（Async）のメソッドであるにもかかわらず、呼び出し側の Save() メソッドで await せずに呼び出しているためです。

図8　ポップアップは出るが、画面下部の赤字メッセージ（旧実装）もまだ残っている状態

ブレークポイントを置いて実行を確認すると、ポップアップが表示されている最中でも処理は待たされることなくその場で return まで進んでしまい、その後になってようやくポップアップが表示される、という順序になっていることが分かります。つまり、ポップアップの表示を「待たずに」次の処理に進んでしまっている（すり抜けてしまっている）状態です。

図9　ブレークポイントで確認すると、ポップアップより先にreturnまで処理が進んでしまっている

これを解消するには、InvokeVoidAsync の呼び出しに await を付けて、ポップアップへの応答があるまで処理を待機させる必要があります。await を使うためには、呼び出し元のメソッドも void ではなく async Task に変更する必要があります。

図10　Save()メソッドをasync Task化し、InvokeVoidAsyncの呼び出しにawaitを追加したところ

private async Task Save()
{
    if (string.IsNullOrEmpty(_areaName))
    {
        await JS.InvokeVoidAsync(
            "MessageBoxAlert", "エリア名称を入力してください");
        return;
    }
 
    //save処理
}

 

この状態で再度ブレークポイントを使って確認すると、今度はポップアップが表示されている間は処理がそこで待機し、ポップアップに応答（OK）した後に次の行へ進むという、意図した順序になっていることが確認できます。

4. 不要になった旧実装の整理と保存完了メッセージの追加

ポップアップでエラーメッセージを表示できるようになったので、これまで使っていた _message フィールドや、画面上に赤字でエラーを表示していた部分は不要になります。これらを削除して、コードをすっきりさせます。

図11　_messageフィールドと画面上のエラー表示を削除し、整理されたSave()メソッド

最後に、同じ要領でコピーした InvokeVoidAsync の呼び出しを保存処理（//save処理）の下にも追加し、メッセージ内容を「Saveしました！」に変更します。これにより、入力チェックエラー時だけでなく、保存が正常に完了した際にもポップアップでメッセージを表示できるようになります。

private async Task Save()
{
    if (string.IsNullOrEmpty(_areaName))
    {
        await JS.InvokeVoidAsync(
            "MessageBoxAlert", "エリア名称を入力してください");
        return;
    }
 
    //save処理
    await JS.InvokeVoidAsync(
        "MessageBoxAlert", "Saveしました！");
}

 

実行して、エリア名称を入力してから保存ボタンを押すと、「Saveしました！」というポップアップが表示されることが確認できます。

図12　エリア名称入力後に保存すると「Saveしました！」のポップアップが表示される

以上が、JavaScriptのalert関数を利用してポップアップメッセージを表示する方法です。InvokeVoidAsyncのような非同期メソッドを呼び出す際は、awaitを付け忘れると処理がすり抜けてしまう点に注意してください。

BlazorでのWebアプリケーション開発手法２【C#】

■非公開コース「C#14新機能」プレゼント：
非公開コース「C#14新機能」（80分）をご覧になりたい方は
こちらからURLとパスワードを発行していますので、ご覧になってみてください。
非公開コース「C#14新機能」を観る

A01_はじめに
B01_メッセージを出すレイアウトの作成
B02_pタグを使ったメッセージ表示
B03_ポップアップメッセージを表示する方法
B04_問い合わせメッセージを表示する方法
B05_ユーザーの入力を受けるメッセージ
B06_インラインJavaScript非推奨
B07_Javascriptを分離してアクセスする方法
B08_MessageServiceを作成する
B09_自作Serviceの依存性注入をする方法
C01_EditFormを使った入力検証
C02_ValidationSummary
C03_ValidationMessage
C04_入力コンポーネント_InputText
C05_InputNumber
C06_未入力を許容する方法
C07_InputNumberで対応している型
C08_InputDate
C09_InputSelect
C10_入力コンポーネント_InputCheckbox
C11_InputRadioとInputRadioGroup
C12_InputTextArea
C13_InputFile
C14_ファイルの上限を設定する
C15_フォーカスをあてる方法_標準編_ElementReference
C16_フォーカスをあてる方法_Razorコンポーネント編
D01_StringLength
D02_RegularExpression_正規表現
D03_EmailAddress
D04_Compare
D05_ViewModelに分ける方法
D06_依存性注入を利用したViewModelの生成
D07_CustomValidation1
D08_CustomValidation2
D09_プロパティレベルのCustomValidation
D10_ValidationContext
D11_処理をViewModelに移す書き方
D12_ViewModelに移せないロジック
D14_ShouldRender
D15_ViewModelに書かないほうがいいもの
D16_エラー箇所にフォーカスを当てる方法
E01_Azureにデプロイするための事前作業
E02_Azureにアップするアプリの作成
E03_Azureへの公開準備
E04_Azureへの公開
E05_データベースの作成
E06_データベースのデータを取得する
E07_データベースの値を画面に表示する
E08_Azureのデータベースを作成する
E09_Azureのデータベースにポータルサイトからログインする
E10_AzureのDBにテーブルを作成する
E11_BlazorアプリからAzureDBに接続する
E12_SQLデータベース料金の注意
E13_AzureSQLデータベースの無料オファーを受ける
F01_依存性注入のライフサイクル
F02_クラウドでのAddSingletonの動き

■非公開コース「C#14新機能」プレゼント：
非公開コース「C#14新機能」（80分）をご覧になりたい方は
こちらからURLとパスワードを発行していますので、ご覧になってみてください。
非公開コース「C#14新機能」を観る