\

BlazorからJavascriptを呼び出す・実行する方法

Blazor は C# で書けるSPAフレームワークです。c#のコードからJavaScriptの関数を呼び出すことができます。

この記事では、BlazorからJavaScriptを呼び出す方法について紹介します。

JSRuntimeの使用

BlazorからJavaScriptを呼び出すには、JSRuntimeを使用します。
razorページファイルの先頭に以下を追記します。

1
@inject IJSRuntime JSRuntime;

引数なしでJavaScript関数を呼び出す

引数なしでJavaScriptを実行するには、以下のように書きます。

FromBlazorFuncというJavaScript関数を呼び出します。

  • Blazor(C#)
1
2
3
4
private async void callJS()
{
await JSRuntime.InvokeVoidAsync("FromBlazorFunc");
}

JavaScriptファイル側では、以下のように関数を定義します。

  • JavaScript
1
2
3
4
function FromBlazorFunc()
{
console.log("Called from Blazor");
}

以下の図のように、ブラウザコンソールに出力されると成功です。

引数ありでJavaScript関数を呼び出す

引数ありでJavaScript関数を呼び出すには、以下のように書きます。

  • Blazor(C#)
1
2
3
4
5
6

private async void CallJSWithParam()
{
string param1 = "ParamABC";
await JSRuntime.InvokeVoidAsync("FromBlazroWithParam", param1);
}
  • JavaScript
1
2
3
4
function FromBlazroWithParam(param1)
{
console.log("Parameter is " + param1);
}

以下の図のように引数つきでブラウザコンソールに出力されれば成功です。

JavaScript関数から返り値を取得する

JavaScriptの返り値をBlazor側に返すこともできます。

  • Blazor (C#)
1
2
3
4
5
private async void CallJSRetValue()
{
string retValue;
retValue = await JSRuntime.InvokeAsync<string>("FromBlazorRetValue");
}
1
2
3
4
function FromBlazorRetValue()
{
return "From JS";
}

以下の図のように、JavaScriptの返り値を取得できれば成功です。

ソースコード全文

この記事で説明したソースコードを以下に記載しておきます。

ボタンとテキストボックスを組み合わせています。

  • Blazor(C#)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function FromBlazorFunc()
{
console.log("Called from Blazor");
}


function FromBlazroWithParam(param1)
{
console.log("Parameter is " + param1);
}

function FromBlazorRetValue()
{
return "From JS";
}

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

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

About Me

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