コース: Blazor 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

Hello Worldイベントを作成する

Hello Worldイベントを作成する

Blazor WebAssembly アプリケーションで イベントを記述していきます。 画面は Visual Studio で Blazor WebAssembly アプリケーションの デフォルトテンプレートプロジェクトを 作成した状態です。 Index.razor ファイルを開き、 不要なコードをまず削除しましょう。 続いてイベントを設定するための、 アゲイン。 続いてイベントを設定するタグを 記述していきます。 p タグをひとつ用意しましょう。 そして、イベントは @onmouseover マウスオーバーした際に イベントを実行します。 実行するメソッドを定義します。 MouseOverEvent としましょう。 そして、p タグを閉じます。 そして、p タグの表… アゲイン、p タグの中には 変数を埋め込みましょう。 変数 Text の内容を表示します。 この変数はまだ定義されていないので、 これから作っていきます。 @code でプログラムコードを 記述していきます。 string 型の変数 Text まず Text を宣言します。 メッセージは「文字の上に マウスカーソルを移動してください」 としましょう。 続いて MouseOverEvent を 作成します。 この中で Text の内容を書き換えます。 text = マウスオーバーと変更しましょう。 アゲイン、「マウスオーバー」とします。 この状態でアプリケーションを 実行してみましょう。 アプリケーションが実行、アゲイン アプリケーションが実行され、 ウェブサイトが表示されました。 「文字の上にマウスカーソルを 移動してください」と書いてある テキストの上にマウスを移動します。 すると、「マウスオーバー」と 変わりました。 イベントが実行されたことが わかります。 それ以外、アゲイン、 それ以外にも いくつかイベントを 追加していきましょう。 いくつかコードを追加しました。 まず、5行目に onmouseout、マウスが タグから外れた際に イベントが発生します。 そしてボタンを用意し ボタンをクリックした際にも イベントを実行します。 それぞれ MouseOutEvent と ButtonClickEvent です。 コードを確認してみましょう。 MouseOutEvent では、…

目次