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

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との連携

コメントを残す

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