ページ遷移を行う

Blazor WebAssembly アプリケーションで ページ遷移を行う方法は いくつかあります。 ひとつは HTML から C# を呼び出し、 ページ遷移を行う方法です。 画面は Visual Studio で index.razor ファイルの コードを表示した画面です。 ボタンには、 razor 記法で @onclick クリックしたときに、 Navigate というメソッドを 呼び出すという処理が書かれています。 Navigate のメソッドは 14 行目のこのメソッドです。 NavigationManager という クラスを用意して NavigateTo というメソッドに 遷移したい URL を渡しています。 もうひとつは HTML の A タグでページ遷移を行う方法です。 href 属性に ページ遷移を行いたい URL を 指定しています。 最後は C# のメソッドを 呼び出しますが、 その C# のメソッドから JavaScript のコードを実行して ページ遷移を行う方法です。 onclick の後には、 NavigateJs というメソッドの呼び出しが 記述されています。 この NavigateJs メソッドは 61 行目の NavigateJs という メソッドになります。 JsRuntime.InvokeVoidAsync というメソッドで 呼び出したい JavaScript の メソッドを指定しています。 JavaScript は Razor ページに記述することは できないので、 index.html に記述されています。 MovePage は location.href の値を変更して リダイレクトを行っています。 このアプリケーションを 実行してみました。 左側に表示している HTML ページと 右側に F12 開発者ツールを表示しています。 それでは C# の呼び出しを 実行してみます。 クリックすると、 _New のページに遷移しました。 HTML の A タグで ページ遷移を行っています。 同じようにページが _New の URL に切り替わりました。 最後に JavaScript を用いた ページ遷移をクリックしてみましょう。 これまでのページ遷移と 動作が異なりました。 これはリダイレクトを 行っているので、 もう一度…