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";

    }
}

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱