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

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

内容
第1章 Blazorの仕組み
第2章 開発環境
第3章 最初のBlazorアプリ
第4章 コンポーネント
第5章 データバインディング
第6章 イベント処理
第7章 Razor記法
第8章 フォームと検証
第9章 データベースアクセス
第10章 Web APIの活用
第11章 SVGの活用
第12章 JavaScriptとの連携

コメントを残す

メールアドレスが公開されることはありません。