BlazorでのWebアプリケーション開発手法１【C#】A16_ボタンクリックイベント

引き続き、Counter.razorのボタン部分を見ていきます。button要素には次のように記述されています。

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

図1　Counter.razorのボタン部分（@onclick=”IncrementCount”）

@onclickの「@」は、この部分がC#コードと関連付けられていることを示す記号です。一方で「onclick」自体はJavaScriptのイベント名であり、@の後ろにはJavaScriptのイベント名を書く、という書き方になっています。今回は「クリックしたときに」処理を行いたいので、onclickイベントを指定しています。

JavaScriptのイベント名は、「JavaScript イベント 一覧」などで検索すると一覧で確認できます。たとえばonclickは「マウスのボタンを1度押して離したとき」に発生するイベントと説明されています。

図2　JavaScriptイベント一覧サイトでのonclickの説明

また、Webで調べる以外にも、コードエディタ上で「@on」まで入力すると、稲妻マークのアイコンが付いた候補としてイベント名の一覧が表示されるため、そこから探すこともできます。

図3　「@on」入力時に表示されるイベント名の候補（稲妻マークがイベント）

@onclick=”IncrementCount”の後半部分にあるIncrementCountは、@codeブロック内に定義されているメソッドです。つまりこの記述は、「クリックイベントが発生したらIncrementCountメソッドを呼び出す」という、JavaScriptのイベントとC#のメソッドを結びつけるバインドを表しています。

実際にIncrementCountメソッド内のcurrentCount++;の行にブレークポイントを設置してから実行し、ボタンをクリックしてみます。

図4　currentCount++;の行にブレークポイントを設置した状態

ボタンをクリックすると、設置したブレークポイントで処理が停止します。これにより、クリックイベントが発生した際に確かにIncrementCountメソッドが呼び出されていることが確認できます。

図5　ボタンクリックによりブレークポイントで処理が停止した状態

続いて、button要素内の「Click me」という文字列について解説します。これは単なるボタンの表示テキストです。試しに「Click me」を「Click meAAAAA」に書き換えます。

図6　ボタンのテキストを「Click meAAAAA」に書き換えているところ

実行すると、ボタンの表示が「Click meAAAAA」に変わっていることが確認できます。

図7　ボタンの表示テキストが「Click meAAAAA」に変わった実行結果

以上で、ボタンクリックイベントの基本的な仕組み（@onclickによるJavaScriptイベントとC#メソッドのバインド、およびボタンの表示テキストの変更）についての解説は完了です。