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

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

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

Excel操作をコマンドで! proBoarderExcel

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

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

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

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

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

About Me

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