Blazor WebAssembly C#からJavaScriptを実行

はじめに

この記事ではC#からJavaScriptを実行するまでの記事です。JavaScriptからC#コードを呼ぶ事も出来ますが別記事で記載します。

JavaScriptコードサンプル

サンプルとしてメッセージ表示系の以下のコードをwwwrootの中に入れています。

//アラート
export function displayAlert(message) {
    alert(message);
}

//Ok,キャンセルアラート
export function okCancelAlert(message) {
    return confirm(message);
}

//入力アラート
export function inputAlert(message, def) {
    return prompt(message, def);
}

使い方

IJSRuntimeをInjectし、JSファイルを設定。 後は、JSの関数を指定して実行出来ます。

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />


@code{ 
    [Inject]
    private IJSRuntime JSRuntime { get; set; }
    private IJSObjectReference JSCommand { get; set; }

    protected override async Task OnInitializedAsync()
    {
        this.JSCommand = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./JsCommand.js");

        await this.JSCommand.InvokeVoidAsync("displayAlert", "メッセージを表示");

        var result = await this.JSCommand.InvokeAsync<bool>("okCancelAlert", "Ok,Cancelメッセージを表示");

        await this.JSCommand.InvokeVoidAsync("displayAlert", result);
    }

}

動作