\

JavaScriptからBlazor関数を呼び出す方法

Blazorを使うとSPAを簡単に開発することができます。C#プログラマーにとってはうれしいフレームワークです。

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

引数なし、返り値なしでBlazor関数を呼び出す

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

  • 呼び出し側のJavaScript
1
2
3
4
function CallBlazorFunc()
{
DotNet.invokeMethodAsync('20200713', 'JSInvokableFunc1')
}
  • JavaScriptから呼び出されるBlazor関数
1
2
3
4
5
[JSInvokable]
public static void JSInvokableFunc1()
{
Console.WriteLine("JSInvokableFunc1 called");
}

JavaScript側は、DotNet.invokeMethodAsyncを使用します。

第一引数は、呼び出す関数の名前空間を指定します。

第二引数は、呼び出すBlazor関数名を指定します。

ブラウザからJavaScriptを実行すると、以下のようにIISウェブサーバー標準出力に「JSInvokableFunc1 called」が表示されれば成功です。

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

引数を与えるには、DotNet.invokeMethodAsyncの第三引数以降に記載します。

  • 呼び出し側のJavaScript
1
2
3
4
5
6
function CallBlazorFuncWithParam()
{
let param1 = 'param1';
DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncWithParam', param1)

}
  • JavaScriptから呼び出されるBlazor関数
1
2
3
4
5
[JSInvokable]
public static void CallBlazorFuncWithParam(string param1)
{
Console.WriteLine($"CallBlazorFuncWithParam called : {param1}");
}

引数に「param1」を与えた場合、以下のようにIISウェブサーバー標準出力に「CallBlazorFuncWithParam called : param1」が表示されれば成功です。

Blazor関数を呼び出し、返り値を取得する

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

  • 呼び出し側のJavaScript
1
2
3
4
5
6
7
function CallBlazorFuncRetValue()
{
DotNet.invokeMethodAsync('20200713', 'CallBlazorFuncRetValue')
.then(data => {
console.log(data);
})
}
  • JavaScriptから呼び出されるBlazor関数
1
2
3
4
5
6
[JSInvokable]
public static string CallBlazorFuncRetValue()
{
Console.WriteLine("CallBlazorFuncRetValue");
return "CallBlazorFuncRetValue";
}

thenメソッドでデータを取得して利用します。

実行すると、以下のようにブラウザコンソールに「CallBlazorFuncRetValue」が出力されれば成功です。

ソースコード全文

この記事で紹介したソースコードです。

  • 呼び出し側のJavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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ページ
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
@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";

}
}

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

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

About Me

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