ASP.NET Blazor アプリケーションにページを追加する手順を紹介します。

事前準備

単純な ASP.NET Blazor アプリケーションを作成します。作成手順はこちらの記事を参照してください。

手順

ASP.NET Blazor アプリケーションを開き、ソリューションエクスプローラーのプロジェクトの"Pages"フォルダをクリックして選択し右クリックします。下図のポップアップメニューが表示されますので、[追加]の[新しい項目]をクリックします。


[新しい項目の追加]ダイアログが表示されます。中央のファイルの種類のリストの[Razor コンポーネント]をクリックして選択します。


ダイアログ下部の[名前]テキストボックスにファイル名を設定します。今回は "Content.razor" としました。Razorコンポーネントは先頭の文字を大文字にする必要があることに注意してください。設定ができましたらウィンドウ右下の[追加]ボタンをクリックします。


Pagesフォルダに "Content.razor" ファイルが作成されました。


作成直後の "Content.razor"ファイルは下記です。

<h3>Content</h3>

@code {

}

Content.razorファイルを下記に変更します。@page ディレクティブを追記します。ここに設定したパスにルーティングされる動作になります。下記のコードの例ではアプリケーションルートの/Content ページにアクセスした際に Content.razor コンポーネントがレンダリングされます。

@page "/Content"
<h3>コンテンツ画面です</h3>

@code {

}

実行結果

プロジェクトを実行します。実行後 アプリケーションルートURL/Index URLにアクセスします。下図のページが表示されます。Index.razor ファイルの内容が表示されています。


アドレスバーのURLをアプリケーションルートURL/Content に変更します。下図のページが表示されます。別の画面に切り替わることが確認できました。