Blazor でrazorページごとに異なるJavaScriptを読み込む方法

Blazorでは、JavaScriptファイルはrazorファイルに記述できません。razorページは動的に読み込まれるため、scriptタグを記述できません。

そのかわり、scriptタグは「_Host.cshtml」ファイルに記述します。

しかしそうすると、razorページごとに読み込まれるJavaScriptは共通のものだけになってしまいます。

この記事では、razorページごとに読み込むJavaScriptファイルを変更する方法について紹介します。

この記事に書かれていること

  • razorページごとに異なるJavaScriptファイルを読み込む方法を紹介します。

具体的には以下の方法で実現します。

  • 全ページ共通的に呼び出すJavaScriptファイルを用意する
  • ページ個別に呼び出すJavaScriptファイルを用意する
  • 「_Host.cshtml」ファイルに共通的に使用するJavaScriptファイルをscriptタグで定義する
  • razorページからOnAfterRenderAsyncを使用してJavaScript関数を実行する
  • ページ個別のjavascriptファイルが呼び出される

全ページ共通的に呼び出すJavaScriptファイルを用意する

すべてのrazorページから共通的に使用するJavaScriptファイルを用意します。

今回は、AppCommon.jsとします。

AppCommon.jsには、各ページから呼び出される関数を定義しておきます。

以下の例では、Page.jsをheadタグ内に埋め込み、JavaScriptを呼び出すコードです。

function launchPage()
{
    let script = document.createElement(script);
    script.src = "/js/Page.js";

    document.getElementsByTagName(head)[0].append(script);
}

各ページ個別に呼び出すJavaScriptファイルを用意する

この例では、各ページ個別に呼び出すJavaScriptファイルをPage.jsとします。

このファイルに、個別ロジックを記述していきます。

今回はサンプルですので、以下のようにします。

console.log("Page.js Loaded")

「_Host.cshtml」ファイルに共通的に使用するJavaScriptファイルをscriptタグで定義する

_Host.cshtmlを以下のように編集して、AppCommon.jsを呼び出すようにします。


<html lang="ja">
<head>

    ...(省略)

    <script src="/js/AppCommon.js"></script>

</head>

razorページからOnAfterRenderAsyncを使用してJavaScript関数を実行する

OnAfterRenderAsyncとは、コンポーネントがすべてレンダリングされた後に呼び出される関数です。

OnAfterRenderAsyncから、さきほどAppCommon.jsに定義したlaunchPageA関数を呼び出します。

launchPageA関数から、独自のJavaScriptファイルを呼び出す、という作戦です。

OnAfterRenderAsyncは、以下のようになります。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        await JS.InvokeVoidAsync(launchPage);
    }
}

ページ個別のjavascriptファイルが呼び出される

OnAfterRenderAsyncからlaunchPageJS関数が実行され、そこからPage.jsが読み込まれます。

Page.jsにはロード時にconsole.log("Page.js Loaded")が実行されるように記述していますので、

Chrome Developer toolsなどからコンソールに出力されていることを確認できれば成功です。

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

コメント

タイトルとURLをコピーしました