BlazorでのWebアプリケーション開発手法１【C#】B10_画面遷移_NavigationManagerでの遷移

今回も画面遷移の回です。前回まではaタグを使った画面遷移を扱いましたが、今回は普通のボタンを使って画面遷移を行う方法を解説します。

aタグはHTML標準のリンク機能で画面遷移するだけのものでしたが、ボタンの@onclickクリックイベントでメソッドを呼び出す形にすると、メソッドの中に自由にロジックを書けるようになります。たとえば入力チェックを行ってから画面遷移する、といった制御ができるのが大きな違いです。そういった制御が必要な場合は、普通のボタンを置いて画面遷移を行います。

まずは前回までに作成済みのHome.razorを確認します。すでにaタグによる計測画面（/measure）へのリンクが2つ配置されています。

図1　Home.razorの開始時点。aタグによる計測画面へのリンクが2つ配置されている

ボタンによる画面遷移を実装するにあたり、まずはCounter.razorに元々あるボタン（class=”btn btn-primary” @onclick=”IncrementCount”）をコピー元として利用します。改行を入れたあと、このボタンをコピーしてHome.razorに貼り付けます。

図2　Counter.razorの既存ボタンをコピー元として確認

図3　コピーしたボタンをHome.razorに貼り付けた状態（@onclick=”IncrementCount”のまま）

貼り付けたボタンで独自の処理を呼び出すために、@codeブロックでC#のメソッドを追加します。private void ShowMeasure() という名前のメソッドを用意します。

図4　@codeブロックにメソッドを追加し始めたところ

Home.razor（@codeブロックに追加したメソッド）

@code {
    private void ShowMeasure()
    {
    }
}

続けて、ボタンのonclick属性をShowMeasureに変更し、ボタンの表示テキストも「ボタンで計測画面を開く」に書き換えます。

図5　onclick=”ShowMeasure”に変更し、ボタンのテキストを「ボタンで計測画面を開く」に書き換えた状態

Home.razor（ボタン部分）

<button class="btn btn-primary" @onclick="ShowMeasure">ボタンで計測画面を開く</button>

この時点ではまだボタンを置いただけなので、押しても何も起きません。コードで画面遷移させるには、NavigationManagerというクラスを使います。使い方としては、Home.razorの先頭で@injectを使って依存性注入（DI）を行います。依存性注入については、オブジェクト指向の原則である「依存関係逆転の原則」の回で詳しく解説していますが、ここでは外部からどのクラスを使うかを渡してもらう仕組み、という理解でひとまず書き方を見ていきます。

図6　@injectによる依存性注入の説明。外部からクラスを渡してもらう仕組みであることを示す注釈

@injectのあとにNavigationManagerと型名を書き、続けて同じ名前で変数名も書きます。

図7　@inject NavigationManager と型名を記述したところ

図8　@inject NavigationManager NavigationManager と、変数名まで書き終えた状態

Home.razor（@inject記述）

@inject NavigationManager NavigationManager

NavigationManagerにカーソルを合わせてF12（定義へ移動）を押すと、実体が確認できます。NavigationManagerはabstractクラス（抽象クラス）になっており、ここで依存性注入をしておくことで、実際に画面遷移の機能を持ったクラスのインスタンスが自動的に渡されるようになっています。

図9　F12でNavigationManagerの定義に移動し、public abstract classであることを確認

この注入したNavigationManagerを使って、ShowMeasureメソッドの中にNavigationManager.NavigateTo(“measure”)と記述します。引数に渡したURLへ画面遷移する、という意味になります。

図10　ShowMeasureメソッド内にNavigationManager.NavigateTo(“measure”)を記述

Home.razor（ShowMeasureメソッド）

@code {
    private void ShowMeasure()
    {
        NavigationManager.NavigateTo("measure");
    }
}

ここで一度実行してボタンを押してみますが、何も起きません。これは以前のレクチャーでも扱った内容と同じで、@rendermodeの記述が必要なためです。aタグの場合はHTML標準の機能で遷移するためBlazorのレンダリングモードに依存しませんが、ボタンの@onclickイベントはBlazorがJavaScriptのonclickイベントをラップしたものなので、Blazorのレンダリングモードに依存します。そのため、ボタンなどを反応させるには@rendermodeの記述が必要になります。

図11　実行してボタンを押しても画面遷移しない（@rendermode未記述の状態）

そこで、Counter.razorにある@rendermode InteractiveServerをコピーしてきて、Home.razorに追加します。

図12　ソリューションエクスプローラーからCounter.razorを開き、@rendermodeの記述をコピーする準備

図13　Home.razorの先頭に@rendermode InteractiveServerを追加し終えた状態

Home.razor（先頭部分・最終形）

@page "/"
@rendermode InteractiveServer
@inject NavigationManager NavigationManager

この状態で改めて実行し、「ボタンで計測画面を開く」ボタンを押してみます。

図14　実行して「ボタンで計測画面を開く」ボタンを押す

図15　NavigationManagerが効いて、計測画面（/measure）へ正しく画面遷移した

今回はNavigationManagerという名前を変数名にもそのまま使ったため、型名と変数名が同じでややわかりにくいかもしれません。たとえば変数名を_navigationManagerのようにしていれば、より区別しやすくなります。

図16　変数名を_navigationManagerにした場合の記述例

このようにボタンとメソッドを使う方法にしておけば、NavigateTo()を呼び出す前に入力チェックなどのロジックを自由に書くことができます。チェックの結果NGならそこで処理を抜け、OKなら画面遷移する、といった制御が可能になるのがaタグにはできない利点です。

図17　ShowMeasureメソッド内に「//入力チェック」というコメントを追加し、遷移前にロジックを書けることを示す

まとめると、ただ画面遷移するだけであればaタグで十分ですが、遷移前に何らかのロジックを実行したい場合は、今回解説したNavigationManagerを使う方法を利用してください。