「Photino.Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
50行目: | 50行目: | ||
*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | *: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | ||
<br> | <br> | ||
@using | また、上記の例において、<u>@using PhotinoSample.Shared</u>はBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。<br> | ||
<br> | <br> | ||
* @ | * @ | ||
56行目: | 56行目: | ||
* using | * using | ||
*: C#のusingステートメントと同じ働きをする。 | *: C#のusingステートメントと同じ働きをする。 | ||
* | * PhotinoSample.Shared | ||
*: インポートする名前空間 | *: インポートする名前空間 | ||
*: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。 | *: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。 | ||
* | *: <br> | ||
*: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。 | *: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。 | ||
<br> | <br> | ||
この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。 | |||
<syntaxhighlight lang="xml"> | <syntaxhighlight lang="xml"> | ||
<!-- 例: --> | <!-- 例: --> | ||
<!-- using宣言がない場合 --> | <!-- @using宣言がない場合 --> | ||
@typeof( | @typeof(PhotinoSample.Shared.MainLayout) | ||
<!-- using宣言がある場合 --> | <!-- @using宣言がある場合 --> | ||
@typeof(MainLayout) // より簡潔に記述できる | @typeof(MainLayout) // より簡潔に記述できる | ||
</syntaxhighlight> | </syntaxhighlight> |
2024年12月31日 (火) 18:38時点における版
概要
ルーティングの設定
Photinoアプリケーションのルーティングの基本設定を行い、以下に示す機能を提供する。
これはBlazorの標準的なルーティング設定であり、SPAアプリケーションのナビゲーション機能を実現するために必要な基本的な設定となっている。
- 正しいURLの場合は対応するページを表示する。
- 存在しないページにアクセスした場合は、エラーページを表示する。
- 全てのページに共通のレイアウトを適用する。
以下の例では、Blazor向けのルーティング設定を行っている。
<!-- App.razorファイル -->
<!-- Blazor向けのルーティング設定を行うコンポーネント -->
@using PhotinoSample.Shared <!-- SharedディレクトリにMainLayout.razorファイルがあるものとする -->
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="body" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
- <Router>タグ
- Blazorアプリケーションのルーティングを制御する主要なコンポーネントである。
- AppAssembly属性は、ルーティング情報を含むアセンブリを指定する。
- 上記の例は、Appクラスを含むアセンブリ
- <Found>タグ
- ルートが見つかった場合の処理を定義する。
- <RouteView>タグ
- 実際のページコンテンツを表示する。
- 上記の例において、DefaultLayout属性は、MainLayoutをデフォルトレイアウトとして指定している。
- <FocusOnNavigate>タグ
- ナビゲーション後にフォーカスを設定する機能を提供する。
- <NotFound>タグ
- URLが見つからない場合 (404エラー) において、表示内容を定義する。
- <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。
また、上記の例において、@using PhotinoSample.SharedはBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。
- @
- BlazorのRazor構文であることを示すシンボルである。
- using
- C#のusingステートメントと同じ働きをする。
- PhotinoSample.Shared
- インポートする名前空間
- 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。
- Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。
この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。
<!-- 例: -->
<!-- @using宣言がない場合 -->
@typeof(PhotinoSample.Shared.MainLayout)
<!-- @using宣言がある場合 -->
@typeof(MainLayout) // より簡潔に記述できる