BlazorでのWebアプリケーション開発手法１【C#】A17_イベント引数の受け取り方

前回のレクチャーでは、ボタンのクリックイベントを扱いましたが、そこではイベントの引数を受け取っていませんでした。単にボタンが押されたことだけを検知できればよい場合はそれで十分ですが、「ボタンが押されたときの状況」を知りたい場合には、イベント引数を受け取って処理する方法があります。

図1　前回作成したCounter.razor。ボタンのクリックイベントには引数を渡していない

今回は、既存のボタンをコピーして新しいボタンを1つ追加し、そのボタンでイベント引数の受け取り方を確認していきます。ボタンのテキストは「AAA」にしておき、@onclick 属性にはまだ存在しないメソッド名「AAAButtonClick」を記述します。

図2　ボタンをコピーして2つ目のボタンを作成し、テキストをAAAに変更

存在しないメソッド名を書いた時点では、当然コンパイルエラーになります（CS0103: 現在のコンテキストに ‘AAAButtonClick’ という名前は存在しません）。

図3　未実装のメソッド名を記述するとエラーが表示される

ここで、メソッド名にカーソルを置いた状態で Ctrl＋.（ピリオド）を押す、もしくは電球マークをクリックすると、クイックアクションのメニューが表示されます。「イベント ハンドラー ‘AAAButtonClick’ の生成」を選択すると、イベントハンドラーのメソッドが自動生成されます。

図4　Ctrl＋.（または電球マーク）でクイックアクションを表示し、イベントハンドラーを生成

自動生成されたメソッドには、あらかじめ MouseEventArgs 型の引数 e が付いた状態になっています。これがボタンクリック時のイベント引数です。

図5　自動生成されたAAAButtonClickメソッド。引数にMouseEventArgs eが付与されている

private void AAAButtonClick(MouseEventArgs e)
{
  throw new NotImplementedException();
}

この引数 e を使うことで、クリック時の状況を取得できます。たとえば、Altキーが押されていたかどうかは e.AltKey で判定できます。throw new NotImplementedException(); の行は削除し、代わりに if (e.AltKey) という条件分岐を記述します。

図6　e.AltKeyでAltキーの押下状態を判定する

次に、ボタンの表示テキストを切り替えるためのフィールドを用意します。初期値を “–” とした private string 型のフィールド _aaaButtonText を @code ブロックに追加します。

図7　ボタン表示用のフィールド _aaaButtonText を追加（初期値は “–“）

このフィールドをボタンの表示内容にバインドします。値の表示のみでよいので、以前解説した単方向データバインドの要領で、HTML側で変数名の頭に @ を付けて @_aaaButtonText と記述します。

図8　ボタンの表示テキストに@_aaaButtonTextをバインド

最後に、AAAButtonClick メソッドの中身を実装します。e.AltKey が true（Altキーが押された状態でクリックされた）であれば _aaaButtonText に “Alt” を、そうでなければ “なし” を代入します。

private string _aaaButtonText = "--";
 
private void AAAButtonClick(MouseEventArgs e)
{
    if (e.AltKey)
    {
        _aaaButtonText = "Alt";
    }
    else
    {
        _aaaButtonText = "なし";
    }
}

ボタン側のRazorマークアップは次のようになります。

<button class="btn btn-primary"
        @onclick="AAAButtonClick">
    @_aaaButtonText
</button>

図9　完成したAAAButtonClickメソッドの全体コード

実行して動作を確認します。初期表示ではボタンに “–” と表示されています。

図10　実行直後の画面。ボタンには初期値の”–“が表示されている

Altキーを押さずにボタンをクリックすると、ボタンの表示が “なし” に切り替わります。

図11　Altキーを押さずにクリックすると”なし”に切り替わる

Altキーを押しながらクリックすると、ボタンの表示が “Alt” に切り替わります。離してから通常クリックすると再び “なし” に戻ります。

図12　Altキーを押しながらクリックすると”Alt”に切り替わる

このように、@onclick のイベントハンドラーにイベント引数（MouseEventArgs）を持たせることで、クリック時の状況に応じた処理が可能になります。イベント引数を使う必要がなければ、これまで通り引数なしのメソッドのままで問題ありません。用途に応じて使い分けてください。