【Blazor】 ページをリロードする

Blazorでは、javascriptを利用できるので、location.reloadを呼び出してリロードすることができます。 以下サンプルコードになります。

@page "/"

@inject IJSRuntime JSRuntime

<button class="btn btn-primary" @onclick="ReloadPageByJavascript">Reload（Javascript）</button>

@code {
    /// <summary>
    /// Javasciptによるリロード
    /// </summary>
    /// <returns></returns>
    private async Task ReloadPageByJavascript()
    {
        await JSRuntime.InvokeVoidAsync("location.reload");
    }
}

IJSRuntimeを通じて、location.reloadを呼び出しています。 location.reloadを呼び出すだけの場合、jsファイルを作成する必要はありません。

IJSRuntimeについては、以下記事で解説しています。参考にしてみてください。

JavaScriptを呼び出し方

BlazorでWEB開発は主にHTML, CSS, C#を使用しますが、JavaScriptの利用も避けられない場面がある。JavaScriptをBlazor内で呼び出すためには、IJSRuntimeサービスを利用する。IJSRuntimeを用いることで、C#からJavaScriptの関数を非同期的に実行可能。例として、ボタンクリックでJavaScriptのアラートを表示する方法を説明。BlazorでのJavaScript使用は最小限に留めるべきだが、必要な場面での知識は重要。

更新日：2023/07/19

実際に実行してみると、リロードする様子が確認できます。

NavigationManagerを利用して、リロードすることもできます。 NavigationManagerについては、以下の記事で解説しています。

NavigationManagerの使い方

BlazorのNavigationManagerは、クライアントサイドのルーティングを制御するクラスで、URLの変更やページの表示を管理します。サービスを挿入することでNavigationManagerを使用でき、様々な機能が提供されます。例えば、URLの取得、ベースURIの取得、ページ遷移の制御、URL変更時のイベント通知などがあります。実際の適用例として、ボタンクリックによるページ遷移を示しています。

更新日：2023/07/25

以下サンプルコードになります。

@page "/"

@inject NavigationManager NavigationManager

<button class="btn btn-primary" @onclick="ReloadPageByNavigationManager">Reload（NavigationManager）</button>

@code {
    /// <summary>
    /// NavigationManagerによるリロード
    /// </summary>
    private void ReloadPageByNavigationManager()
    {
        NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
    }
}

NavigationManagerのNavigateToメソッドでページ遷移することができますが、 第１引数の遷移先URIを、現在のページURIに指定することで、リロードを可能にしています。

forceLoadは、trueでページ全体をリロード、falseで部分的な読み込みを行います。 今回はページ全体をリロードしています。

実際に実行してみると、リロードする様子が確認できます。