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との連携 |
コメント