コース: Blazor 基本講座
今すぐ登録して、24,800件以上登録されている、業界エキスパート指導のコースを受講しましょう。
Javascriptと連携する
Blazor WebAssembly アプリケーションは C# でプログラムコードを 記述しますが、 HTML に書かれた JavaScript を 呼び出したり、 JavaScript から C# の メソッドを世に出すということが可能です。 画面はアプリケーションを 実行した画面です。 まず「JavaScript 呼び出し１」 というボタンをクリックします。 するとこのように JavaScript アラートが実行されます。 プログラムコードを確認してみます。 ６行目の「JavaScript 呼び出し１」 と書かれたボタンが 該当するボタンです。 @onclick という Blazor の記法を用いて CallJs1 というメソッドを 呼び出しています。 このメソッドは 19 行目に定義されており、 C# で書かれたメソッドです。 その中で JSRuntime.InvokeVoidAsync というメソッドを呼び出し、 引数に呼び出したい JavaScript の メソッド名を指定しています。 続いて JavaScript のコードの方を 確認してみましょう。 .RazorPage では JavaScript を記述することはできないので 処理自体は index.html や その他 index.html から 読み込むファイルで記述します。 CallJs1 というメソッドが JavaScript で記述されており、 アラートを用いて JavaScript が呼び出されました。 というアラートを 表示していることがわかります。 同様に 24 行目の CallJs2 では、 メソッドの２つ目の引数に Sample という文字を渡しています。 このサンプルが JavaScript の 引数として渡されます。 渡された文字列を表示しています。 このコードを実行してみましょう。 「JavaScript 呼び出し２」 というボタンをクリックします。 すると Sample という C# から渡した値が JavaScript 側で利用できていることが わかります。 29 行目の呼び出し CallJs3 では async と await を用いた非同期処理となっています。 そして JSRuntime. の後に続く メソッド名が異なります。 InvokeAsync 先ほどまでは…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。