「Photino.Blazor - ルーティング」の版間の差分
(→概要) |
|||
(同じ利用者による、間の5版が非表示) | |||
1行目: | 1行目: | ||
== 概要 == | == 概要 == | ||
Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。<br> | |||
ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。<br> | |||
<br> | |||
実装方法として、<code>@page</code>ディレクティブを使用する。<br> | |||
これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/counter" | |||
<h1>Counter</h1> | |||
// コンポーネントの実装 | |||
// ...略 | |||
</syntaxhighlight> | |||
<br> | |||
パラメータを含むルートも設定可能である。<br> | |||
例えば、ユーザIDに基づいた動的なルーティングは次のように実装することができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/user/{Id}" | |||
@code { | |||
[Parameter] | |||
public string Id { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
ナビゲーションについては、プログラムによる遷移と宣言的な遷移の両方をサポートしている。<br> | |||
プログラムによる遷移には<code>NavigationManager</code>を使用して、宣言的な遷移には<code><NavLink></code>コンポーネントを使用する。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
// プログラムによる遷移 | |||
@inject NavigationManager NavigationManager | |||
@code { | |||
private void NavigateToCounter() | |||
{ | |||
NavigationManager.NavigateTo("/counter"); | |||
} | |||
} | |||
// 宣言的な遷移 | |||
<NavLink class="nav-link" href="counter"> | |||
<span>Counter</span> | |||
</NavLink> | |||
</syntaxhighlight> | |||
<br> | |||
ルートパラメータのバリデーションやカスタム制約も実装可能である。<br> | |||
これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。<br> | |||
<br> | |||
さらに、入れ子のルーティングも実装可能である。<br> | |||
これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。<br> | |||
<syntaxhighlight lang="c#"> | |||
@page "/products" | |||
@page "/products/{category}" | |||
@code { | |||
[Parameter] | |||
public string Category { get; set; } | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。<br> | |||
これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。<br> | |||
<br> | |||
また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。<br> | |||
<br><br> | <br><br> | ||
17行目: | 81行目: | ||
<!-- Blazor向けのルーティング設定を行うコンポーネント --> | <!-- Blazor向けのルーティング設定を行うコンポーネント --> | ||
@using PhotinoSample.Shared | @using PhotinoSample.Shared <!-- SharedディレクトリにMainLayout.razorファイルがあるものとする --> | ||
<Router AppAssembly="@typeof(App).Assembly"> | <Router AppAssembly="@typeof(App).Assembly"> | ||
49行目: | 113行目: | ||
*: URLが見つからない場合 (404エラー) において、表示内容を定義する。 | *: URLが見つからない場合 (404エラー) において、表示内容を定義する。 | ||
*: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | *: <PageTitle>タグは、ページタイトルを設定する。一般的には、エラーメッセージを表示する。 | ||
<br> | |||
また、上記の例において、<u>@using PhotinoSample.Shared</u>はBlazorのusingディレクティブのシンタックスであり、PhotinoSample.Shared名前空間をインポートする宣言である。<br> | |||
<br> | |||
* @ | |||
*: BlazorのRazor構文であることを示すシンボルである。 | |||
* using | |||
*: C#のusingステートメントと同じ働きをする。 | |||
* PhotinoSample.Shared | |||
*: インポートする名前空間 | |||
*: 上記の例では、この名前空間には、MainLayout.razorファイル等の共有コンポーネントが含まれている。 | |||
*: <br> | |||
*: Sharedフォルダ / 名前空間には、アプリケーション全体で共有されるコンポーネントやレイアウトが配置されるのが一般的である。 | |||
<br> | |||
この宣言により、PhotinoSample.Sharedに含まれるコンポーネントを完全修飾名 (PhotinoSample.Shared.MainLayout等) を使用せずに直接参照できる。 | |||
<syntaxhighlight lang="xml"> | |||
<!-- 例: --> | |||
<!-- @using宣言がない場合 --> | |||
@typeof(PhotinoSample.Shared.MainLayout) | |||
<!-- @using宣言がある場合 --> | |||
@typeof(MainLayout) // より簡潔に記述できる | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||
2024年12月31日 (火) 19:35時点における最新版
概要
Photino.Blazorにおけるルーティングの基本的な仕組みは、通常のBlazorアプリケーションと同様、コンポーネントベースのルーティングを採用している。
ルーティングシステムは、URLパスとコンポーネントを紐付け、ユーザの画面遷移を管理する。
実装方法として、@page
ディレクティブを使用する。
これは、Razorコンポーネントファイルの先頭に記述して、そのコンポーネントがどのURLパスで表示されるかを定義する。
@page "/counter"
<h1>Counter</h1>
// コンポーネントの実装
// ...略
パラメータを含むルートも設定可能である。
例えば、ユーザIDに基づいた動的なルーティングは次のように実装することができる。
@page "/user/{Id}"
@code {
[Parameter]
public string Id { get; set; }
}
ナビゲーションについては、プログラムによる遷移と宣言的な遷移の両方をサポートしている。
プログラムによる遷移にはNavigationManager
を使用して、宣言的な遷移には<NavLink>
コンポーネントを使用する。
// プログラムによる遷移
@inject NavigationManager NavigationManager
@code {
private void NavigateToCounter()
{
NavigationManager.NavigateTo("/counter");
}
}
// 宣言的な遷移
<NavLink class="nav-link" href="counter">
<span>Counter</span>
</NavLink>
ルートパラメータのバリデーションやカスタム制約も実装可能である。
これにより、特定のパターンに一致するパラメータのみを受け付けるようなルーティングを設定することができる。
さらに、入れ子のルーティングも実装可能である。
これは、@pageディレクティブに複数のルートテンプレートを指定することで実現することができる。
@page "/products"
@page "/products/{category}"
@code {
[Parameter]
public string Category { get; set; }
}
エラーハンドリングについて、存在しないルートへのアクセスや無効なパラメータに対して、カスタムの404ページや適切なエラーページを表示するように設定できる。
これは、アプリケーションのルートコンポーネントでRouterコンポーネントを設定することで実現できる。
また、Blazorの認証システムと組み合わせることにより、特定のルートへのアクセスを認証・認可により制限することも可能である。
ルーティングの設定
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) // より簡潔に記述できる