JavaScriptからBlazor関数を呼び出す方法

Blazorを使うとSPAを簡単に開発することができます。C#プログラマーにとってはうれしいフレームワークです。

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

引数なし、返り値なしでBlazor関数を呼び出す

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

• 呼び出し側のJavaScript

function CallBlazorFunc()
{
    DotNet.invokeMethodAsync('20200713', 'JSInvokableFunc1')
}

• JavaScriptから呼び出されるBlazor関数

    [JSInvokable]
    public static void JSInvokableFunc1()
    {
        Console.WriteLine("JSInvokableFunc1 called");
    }

JavaScript側は、DotNet.invokeMethodAsyncを使用します。

第一引数は、呼び出す関数の名前空間を指定します。

第二引数は、呼び出すBlazor関数名を指定します。

ブラウザからJavaScriptを実行すると、以下のようにIISウェブサーバー標準出力に「JSInvokableFunc1 called」が表示されれば成功です。

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

引数を与えるには、DotNet.invokeMethodAsyncの第三引数以降に記載します。

• 呼び出し側のJavaScript

function CallBlazorFuncWithParam()
{
    let param1 = 'param1';
    DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncWithParam', param1)

}

• JavaScriptから呼び出されるBlazor関数

    [JSInvokable]
    public static void CallBlazorFuncWithParam(string param1)
    {
        Console.WriteLine($"CallBlazorFuncWithParam called : {param1}");
    }

引数に「param1」を与えた場合、以下のようにIISウェブサーバー標準出力に「CallBlazorFuncWithParam called : param1」が表示されれば成功です。

Blazor関数を呼び出し、返り値を取得する

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

• 呼び出し側のJavaScript

function CallBlazorFuncRetValue()
{
    DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncRetValue')
    .then(data => {
        console.log(data);
    })
}

• JavaScriptから呼び出されるBlazor関数

    [JSInvokable]
    public static string CallBlazorFuncRetValue()
    {
        Console.WriteLine("CallBlazorFuncRetValue");
        return "CallBlazorFuncRetValue";
    }

thenメソッドでデータを取得して利用します。

実行すると、以下のようにブラウザコンソールに「CallBlazorFuncRetValue」が出力されれば成功です。

ソースコード全文

この記事で紹介したソースコードです。

• 呼び出し側のJavaScript

function CallBlazorFunc()
{
    DotNet.invokeMethodAsync('20200713', 'JSInvokableFunc1')
}

function CallBlazorFuncWithParam()
{
    let param1 = document.getElementById(param1).value;
    console.log(param1);
    DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncWithParam', param1)

}

function CallBlazorFuncRetValue()
{
    DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncRetValue')
    .then(data => {
        console.log(data);
    })
}

• razorページ

@page "/fromJS"

<h1>From JavaScript Function</h1>

<button onclick="CallBlazorFunc()">CallBlazorFunc</button>

<hr>

<input type=text placeholder=param1 id=param1/>
<button onclick="CallBlazorFuncWithParam()">CallBlazorFuncWithParam</button>

<hr>

<button onclick="CallBlazorFuncRetValue()">CallBlazorFuncRetValue</button>

@code {

    [JSInvokable]
    public static void JSInvokableFunc1()
    {
        Console.WriteLine("JSInvokableFunc1 called");
    }

    [JSInvokable]
    public static void CallBlazorFuncWithParam(string param1)
    {
        Console.WriteLine($"CallBlazorFuncWithParam called : {param1}");
    }

    [JSInvokable]
    public static string CallBlazorFuncRetValue()
    {
        Console.WriteLine("CallBlazorFuncRetValue");
        return "CallBlazorFuncRetValue";

    }
}

Blazor のおすすめ本

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

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

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

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