BlazorでのWebアプリケーション開発手法２【C#】B04_問い合わせメッセージを表示する方法

今回は、ユーザーに「OK」か「キャンセル」かを選んでもらう「問い合わせメッセージ」の表示方法を解説します。前回扱ったアラートメッセージ（OKボタンのみの単純なポップアップ）に対し、今回のメッセージはJavaScriptのconfirm関数を使い、ユーザーの選択結果（true／false）に応じて処理を分岐させる点が特徴です。

JavaScript側にMessageBoxConfirm関数を追加する

まずApp.razorを開きます。ここには既に、アラートメッセージ用のJavaScript関数MessageBoxAlertが定義されています。

図1　App.razorに既存のMessageBoxAlert関数

このscriptブロックをコピー＆ペーストし、中身をconfirm(message)に書き換えます。

図2　scriptブロックをコピーしconfirm(message)に変更した直後

次に、関数名の語尾をConfirmに変更し、MessageBoxConfirmという名前にします。

図3　関数名をMessageBoxConfirmに変更

このconfirm関数は戻り値がboolean型（OKならtrue、キャンセルならfalse）になっているため、returnを付けて戻り値を返すようにしておきます。

図4　return confirm(message); を追加

なお、scriptタグは分けて書いても構いませんが、一つのscriptタグの中に複数の関数をまとめて書く方が一般的です。今回もMessageBoxAlertとMessageBoxConfirmの2つの関数を1つのscriptタグの中にまとめます。

図5　MessageBoxAlertとMessageBoxConfirmを1つのscriptタグにまとめた完成形

最終的なApp.razorのscript部分は以下のようになります。

<script>
    function MessageBoxAlert(message)
    {
        alert(message);
    }
 
    function MessageBoxConfirm(message)
    {
        return confirm(message);
    }
</script>

C#側からMessageBoxConfirmを呼び出す

次に、Home.razorのSave()メソッドを編集します。今回は、保存ボタンを押したときに「保存しますか？」と問い合わせ、「はい」が選ばれた場合のみ保存処理に進むというシナリオで実装します。変更前のSave()メソッドは以下の状態で、エリア名称が未入力の場合のバリデーションと、保存完了時のアラート表示のみが実装されています。

図6　変更前のHome.razor（Save()メソッド）

問い合わせを行うには、JSオブジェクトのInvokeAsyncメソッドを使います。前回使用したInvokeVoidAsyncは戻り値がないJavaScript関数を呼び出す際に使うメソッドですが、今回のMessageBoxConfirmはbooleanの戻り値があるため、戻り値がある場合に使うInvokeAsyncを使用し、山括弧の中に戻り値の型（bool）を指定します。

図7　IntelliSenseに表示されるInvokeAsync<>とInvokeVoidAsyncの候補

1つ目の引数には、呼び出すJavaScript関数名を指定します。この名前は自由に付けられますが、ここではJavaScript側と合わせてMessageBoxConfirmとします。

図8　JS.InvokeAsync<bool>(“MessageBoxConfirm”, “”) の記述

2つ目の引数には、確認メッセージとして表示する文字列（string型）を指定します。ここでは「保存しますか？」というメッセージを入れます。

図9　2つ目の引数に「保存しますか？」を追加

この呼び出しの戻り値はbool型なので、messageResultという名前の変数で受け取ります。JavaScript側の処理は非同期のため、awaitを付けて呼び出し結果（ユーザーがOK／キャンセルのどちらを選んだか）が返ってくるまで待機します。

図10　bool messageResult = await JS.InvokeAsync<bool>(…) の完成形

この次に、if文でmessageResultをチェックします。falseの場合（キャンセルが選ばれた場合）はreturnで処理を抜けるようにすれば、「保存しますか？」に対して「はい」ならこの次の行（保存処理）に進み、「いいえ」ならfalseが返ってくるのでreturnで抜ける、という流れになります。

図11　if (!messageResult) { return; } の完成形

完成したSave()メソッド全体は以下の通りです。

private async Task Save()
{
    bool messageResult = await JS.InvokeAsync<bool>(
        "MessageBoxConfirm", "保存しますか？");
    if (!messageResult)
    {
        return;
    }
 
    if (string.IsNullOrEmpty(_areaName))
    {
        await JS.InvokeVoidAsync(
            "MessageBoxAlert", "エリア名称を入力してください");
        return;
    }
 
    //save処理
    await JS.InvokeVoidAsync(
        "MessageBoxAlert", "Saveしました！！");
}

動作確認

実行してHome画面を表示します。エリア名称の入力欄と保存ボタンが表示されます。

図12　実行したHome画面（エリア名称入力欄・保存ボタン）

エリア名称に文字を入力し、保存ボタンを押すと、「保存しますか？」という問い合わせメッセージがOK・キャンセルの2つのボタンとともに表示されます。

図13　保存ボタン押下で表示される「保存しますか？」の問い合わせメッセージ

OKを押すと、保存処理が実行され「Saveしました！！」というアラートが表示されます。なお、エリア名称が未入力のままOKを押した場合は、「エリア名称を入力してください」という検証メッセージが表示され、次のバリデーションに入ります。また、問い合わせメッセージでキャンセルを押した場合は、そのまま何も起きずに処理が終了します。

図14　OKを押すと表示される「Saveしました！！」のアラート

このように、OKかキャンセルかを選べる問い合わせメッセージは、InvokeAsyncとboolean型の戻り値を使うことで実装できます。ぜひ実際に手を動かして試してみてください。