BlazorでのWebアプリケーション開発手法１【C#】B02_サイドバーから画面を表示する

前回のレクチャーで、Weather.razorをコピーして作成した計測用のページ（MeasurePage.razor、URLは”/measure”）が表示できるところまで進めました。今回は、この計測画面をサイドバーのメニューからも表示できるようにします。

サイドメニューの実体は、Componentsフォルダー内のLayoutフォルダーにある NavMenu.razor です。これをダブルクリックして開きます。

図1　ソリューションエクスプローラーでNavMenu.razorを開く

NavMenu.razorの中には、Home・Counter・Weatherという3つのメニュー項目に対応する、同じ形をしたコードのかたまり（<div class=”nav-item px-3″>〜</div>）が並んでいます。

図2　NavMenu.razor内のHome・Counter・Weatherのメニューブロック

このうち、一番下のWeatherのかたまりをコピーし、その下にそのまま貼り付けます。新しいメニュー項目は、既存のブロックをコピーして必要な部分だけ書き換えるのが手早い方法です。

図3　Weatherのメニューブロックを選択してコピーする

図4　コピーしたブロックをWeatherブロックの下に貼り付ける

貼り付けたブロックのNavLinkタグのhref属性を、計測画面のURLに書き換えます。ここで注意点があります。href属性に指定するURLの先頭には、スラッシュ（/）を付けません。後ろにスラッシュが付くパスであればそのスラッシュは必要ですが、一番先頭のスラッシュは不要です。

図5　href属性を”measure”に書き換える

実際にMeasurePage.razorの@pageディレクティブを確認すると、こちらは @page “/measure” のように先頭にスラッシュが付いています。@pageディレクティブのURL指定とNavMenu側のhref属性とでは、スラッシュの要否が異なる点を覚えておいてください。

図6　MeasurePage.razorの@pageディレクティブでURLを確認

href属性を”measure”に修正できたら、続けてメニューに表示される文字列（Weatherの部分）を「計測」に書き換えます。span要素のCSSクラス（アイコン指定）はそのままで構いません。

図7　href=”measure”に修正し、表示テキストのWeatherを選択

最終的に、追加したメニュー項目のコードは次のようになります。

<div class="nav-item px-3">
    <NavLink class="nav-link" href="measure">
        <span class="bi bi-list-nested-nav-menu"
              aria-hidden="true"></span> 計測
    </NavLink>
</div>

修正できたら実行して確認します。サイドメニューの一番下に「計測」という項目が追加されており、これをクリックすると計測画面に遷移し、アドレスバーのURLも /measure になっていることが確認できます。

図8　修正後のコードと、「計測」メニューをクリックして遷移した実行結果

図9　サイドメニューの「計測」をクリックすると計測画面が表示される

このように、NavMenu.razorの中でメニュー項目のブロックをコピーし、href属性で遷移先のURL、表示テキストでメニューのタイトル部分を指定することで、サイドメニューに新しい画面へのリンクを追加できます。同じ要領で、他の画面を追加した際にもサイドメニューから呼び出せるようにしてみてください。