【Blazor】 JavaScriptから.NETメソッド呼び出しの方法

今回のサンプルコードの実装イメージになります。

まず.NETからJavaScriptのメソッド呼び出します。 呼び出されたJavaScriptのメソッドから、.NET側のメソッドを参照して呼び出す処理を記載します。

.NETからJavaScriptのメソッド呼び出す方法は、以下の記事で説明しています。 よかったら参照してみてください。

JavaScriptを呼び出し方

BlazorでWEB開発は主にHTML, CSS, C#を使用しますが、JavaScriptの利用も避けられない場面がある。JavaScriptをBlazor内で呼び出すためには、IJSRuntimeサービスを利用する。IJSRuntimeを用いることで、C#からJavaScriptの関数を非同期的に実行可能。例として、ボタンクリックでJavaScriptのアラートを表示する方法を説明。BlazorでのJavaScript使用は最小限に留めるべきだが、必要な場面での知識は重要。

更新日：2023/07/19

このような仕組みでコードを書いています。

.NET側のソースコードは以下のとおりです。

@page "/javascript-call-dotnet"
@inject IJSRuntime JSRuntime

<h3>JavaScriptから.NET呼び出し</h3>

<button class="btn btn-primary" @onclick="CallJavaScript">JavaScript呼び出しボタン</button>

<p>@message</p>

@code {
    /// <summary>
    /// 画面に表示するメッセージ
    /// </summary>
    private static string? message;

    /// <summary>
    /// メッセージを取得（JavaScriptから呼び出し可能なメソッド）
    /// </summary>
    /// <remarks>staticメソッドである必要あり</remarks>
    [JSInvokable("GetMessage")]
    public static Task<string> GetMessage()
    {
        return Task.FromResult(".NET -> JavaScript へのメッセージ");
    }

    /// <summary>
    /// メッセージを更新（JavaScriptから呼び出し可能なメソッド）
    /// </summary>
    /// <remarks>staticメソッドである必要あり</remarks>
    /// <param name="newMessage">更新するメッセージ</param>
    [JSInvokable("UpdateMessage")]
    public static Task UpdateMessage(string newMessage)
    {
        message = newMessage;
        return Task.CompletedTask;
    }

    /// <summary>
    /// JavaScriptのメソッド呼び出し
    /// </summary>
    private async Task CallJavaScript()
    {
        // JavaScriptの"callDotNetMethod"メソッドを呼び出し
        await JSRuntime.InvokeVoidAsync("callDotNetMethod");
    }
}

GetMessageとUpdateMessageメソッドはJavaScript側から呼ばれるメソッドです。 JavaScriptから.NETのメソッドを呼び出すには、以下の条件を満たす必要があります。

• JSInvokableを付与されていること
• アクセス修飾子がpublicかつstaticであること

CallJavaScriptメソッドでは、JavaScript側のcallDotNetMethodメソッドを呼び出す処理が書いてあります。 callDotNetMethodメソッドには、.NET側のメソッドを参照して呼び出す処理が書いてあります。

callDotNetMethodメソッドなどのJavaScript側のソースコードは、次のセクションで見ていきます。

JavaScript側のソースコードは以下のとおりです。

async function callDotNetMethod () {
    // 非同期で .NETメソッドを呼び出し、結果を取得する例
    const result = await DotNet.invokeMethodAsync('BlazorJavaScriptCallDotnet', 'GetMessage');
    // 取得結果である「.NET -> JavaScript へのメッセージ」がコンソールへ表示されます
    console.log(result);

    // 非同期で .NETメソッドにデータ（引数）を渡して呼び出す例
    await DotNet.invokeMethodAsync('BlazorJavaScriptCallDotnet', 'UpdateMessage', 'JavaScript -> .NET へのメッセージ');
};

DotNet.invokeMethodAsyncは、メソッドを使って、.NET側のGetMessageメソッドを非同期で呼び出します。 第1引数にはアセンブリ名BlazorJavaScriptCallDotnet、第2引数にはメソッドGetMessageを指定します。

アセンブリ名は、以下の赤枠部分の文字列を指定すれば大丈夫です。

再びDotNet.invokeMethodAsyncメソッドを使って、今度は引数を渡して、.NET側のUpdateMessageメソッドを呼び出します。 第3引数に渡したいデータ（"JavaScript -> .NET へのメッセージ"という文字列）を指定します。この操作も非同期で行われます。

動作確認してみましょう。ボタンクリックして、メッセージが表示されるのを確認してください。

この記事では、JavaScriptからBlazor Serverアプリケーションの.NETメソッドを呼び出す方法について解説しました。

Blazorでは、JavaScriptを利用しないと実装できない機能が多々あるので、 そういった状況になったら是非使ってみてください。