【Blazor】 JavaScriptを呼び出し方

JavaScriptを呼び出すには、まずIJSRuntimeというサービスを挿入する必要があります。 IJSRuntimeは、BlazorでC#コードとJavaScriptコードをやり取りするためのインターフェースです。 例として、IJSRuntimeを使用してJavaScriptのアラートを呼び出すプログラムを書いていきます。

@page "/"
@inject IJSRuntime JSRuntime

<h3>IJSRuntime Sample</h3>

<button @onclick="ShowAlert">Show Alert</button>

@code {
    private async Task ShowAlert()
    {
        await JSRuntime.InvokeVoidAsync("alert", "JavaScript呼び出し");
    }
}

ボタンのクリックイベントにShowAlertメソッドを割り当て、 そのメソッド内でJavaScriptを呼び出す処理を書いています。 IJSRuntime.InvokeVoidAsyncメソッドを使用して JavaScriptのalert関数を実行します。 第１引数には呼び出すメソッド名、第２引数にはメソッドに渡す引数を指定します。 こうすることで、ボタンがクリックされた際に、アラートが表示されます。

先ほど作成したプログラムを実行して確認してみましょう。 アラートが表示されているのが、確認できます。

JavaScriptをなるべく使わない方が良いですが、現状Blazorでは全く使わないのは難しいです。 この記事の内容を覚えておくと便利かもしれません。