BlazorからJavascriptを呼び出す・実行する方法

Blazor は C# で書けるSPAフレームワークです。c#のコードからJavaScriptの関数を呼び出すことができます。

この記事では、BlazorからJavaScriptを呼び出す方法について紹介します。

JSRuntimeの使用

BlazorからJavaScriptを呼び出すには、JSRuntimeを使用します。 razorページファイルの先頭に以下を追記します。

@inject IJSRuntime JSRuntime;

引数なしでJavaScript関数を呼び出す

引数なしでJavaScriptを実行するには、以下のように書きます。

FromBlazorFuncというJavaScript関数を呼び出します。

• Blazor(C#)

    private async void callJS()
    {
        await JSRuntime.InvokeVoidAsync("FromBlazorFunc");
    }

JavaScriptファイル側では、以下のように関数を定義します。

• JavaScript

function FromBlazorFunc()
{
    console.log("Called from Blazor");
}

以下の図のように、ブラウザコンソールに出力されると成功です。

引数ありでJavaScript関数を呼び出す

引数ありでJavaScript関数を呼び出すには、以下のように書きます。

• Blazor(C#)

    private async void CallJSWithParam()
    {
        string param1 = "ParamABC";
        await JSRuntime.InvokeVoidAsync("FromBlazroWithParam", param1);
    }

• JavaScript

function FromBlazroWithParam(param1)
{
    console.log("Parameter is " + param1);
}

以下の図のように引数つきでブラウザコンソールに出力されれば成功です。

JavaScript関数から返り値を取得する

JavaScriptの返り値をBlazor側に返すこともできます。

• Blazor (C#)

    private async void CallJSRetValue()
    {
        string retValue;
        retValue = await JSRuntime.InvokeAsync<string>("FromBlazorRetValue");
    }

function FromBlazorRetValue()
{
    return "From JS";
}

以下の図のように、JavaScriptの返り値を取得できれば成功です。

ソースコード全文

この記事で説明したソースコードを以下に記載しておきます。

ボタンとテキストボックスを組み合わせています。

• Blazor(C#)

@page "/callJS"
@inject IJSRuntime JSRuntime;

<h1>Call JavaScript Function</h1>

<button @onclick="callJS">Call JS</button>

<hr>

<input @bind-value="param1" placeholder="parameter1" />

<button @onclick="CallJSWithParam">CallJSWithParam</button>

<hr>

<button @onclick="CallJSRetValue">CallJSRetValue</button>
<input @bind-value="retValue" placeholder="Return Value" />

@code {

    private string param1{get; set;}

    private string retValue{get; set;}

    private async void callJS()
    {
        await JSRuntime.InvokeVoidAsync("FromBlazorFunc");
    }

    private async void CallJSWithParam()
    {
        await JSRuntime.InvokeVoidAsync("FromBlazroWithParam", param1);
    }

    private async void CallJSRetValue()
    {
        retValue = await JSRuntime.InvokeAsync<string>("FromBlazorRetValue");
    }

}

• JavaScript

function FromBlazorFunc()
{
    console.log("Called from Blazor");
}

function FromBlazroWithParam(param1)
{
    console.log("Parameter is " + param1);
}

function FromBlazorRetValue()
{
    return "From JS";
}

Blazor のおすすめ本

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。