ルート パラメーターが Blazor アプリのルーティングにどのような影響を及ぼすかを確認する
Blazor では、どのようにすると URI の一部を使用して要求を適切なコンポーネントにルーティングできるかを見てきました。 ルート パラメーターを使用して URI の他の部分を途中で取得し、コード内でそれらにアクセスすることもできます。
あなたは宅配ピザ会社の Web サイトの作業をしていて、ピザの要求を Pizzas.razor コンポーネントにルーティングしていたとします。 今は、URI からユーザーのお気に入りのピザを取得し、それを利用して、ユーザーが気に入る可能性がある他のピザについての情報を表示したいと考えています。
ここでは、ルート パラメーターを使用して、コード内で処理する URL の一部を指定する方法について学習します。
Note
このユニットのコード ブロックは実例です。 次のユニットで、独自のコードを記述します。
ルート パラメーター
このモジュールでは前に、ユーザーが要求する URI の一部を使用して、要求を適切なコンポーネントにルーティングする方法を学びました。 URI の他の部分を、レンダリングされるページで値として使用したいことがよくあります。 たとえば、次のユーザー要求があるとします。
http://www.contoso.com/favoritepizza/hawaiian
この要求を、@page ディレクティブを使用して、たとえば FavoritePizza.razor コンポーネントにルーティングする方法については学習しました。 ここで、あなたはコンポーネントで値 hawaiian を使用したいと考えます。 この値を取得するために、それをルート パラメーターとして宣言できます。
@page ディレクティブを使用して、ルート パラメーターとしてコンポーネントに渡される URI の一部を指定します。 コンポーネントのコードでは、コンポーネント パラメーターの値を取得するのと同じ方法で、ルート パラメーターの値を取得できます。
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
前のコードでは、@page ディレクティブで中かっこを使用してルート パラメーターを指定し、それに名前を付けています。
Note
コンポーネント パラメーターは、親コンポーネントから子コンポーネントに送信される値です。 親では、コンポーネント パラメーターの値を、子コンポーネントのタグの属性として指定します。 ルート パラメーターは、別の方法で指定します。 それらは URI の一部として指定します。 バック グラウンドでは、Blazor ルーターによってこれらの値が途中で取得され、コンポーネント値としてコンポーネントに送信されます。同じ方法でそれらにアクセスできるのは、これが理由です。 ルート パラメーターの大文字と小文字は区別されず、同じ名前でコンポーネント パラメーターに転送されます。
省略可能なルート パラメーター
前の例では、{favorite} パラメーターは必須です。 ルート パラメーターを省略可能にするには、疑問符を使用します。
@page "/FavoritePizzas/{favorite?}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
protected override void OnInitialized()
{
Favorite ??= "Fiorentina";
}
}
省略可能なパラメーターには既定値を設定することをお勧めします。 前の例では、Favorite パラメーターの既定値は OnInitialized メソッドで設定されます。
Note
OnInitialized メソッドは、ユーザーがページを初めて要求するときに実行されます。 別のルーティング パラメーターを使用して同じページを要求した場合は実行されません。 ユーザーが、たとえば http://www.contoso.com/favoritepizza/hawaiian から http://www.contoso.com/favoritepizza に移動すると予想される場合は、代わりに OnParametersSet() メソッド内に既定値を設定します。
ルート制約
前の例では、URI http://www.contoso.com/favoritepizza/2 を要求した結果は、無意味なメッセージである "Your favorite pizza is: 2" になります。 他の場合には、そのような型の不一致によって例外が発生し、ユーザーにエラーが表示される可能性があります。 ルート パラメーターの型を指定することを検討してください。
@page "/FavoritePizza/{preferredsize:int}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza size is: @FavoriteSize inches.</p>
@code {
[Parameter]
public int FavoriteSize { get; set; }
}
この例では、ユーザーが http://www.contoso.com/favoritepizza/margherita を要求した場合、前のコンポーネントと一致しません。 その結果、要求は別の場所にルーティングされます。 ユーザーが http://www.contoso.com/favoritepizza/12 を要求した場合は、ルートが一致し、コンポーネントには "Your favorite pizza size is: 12 inches" というメッセージが表示されます。このようなルート パラメーターを表す特定の型は、"ルート制約" と呼ばれます。 制約では、他に以下のような型を使用できます。
| 制約 | 例 | 一致の例 |
|---|---|---|
| [bool] | {vegan:bool} | http://www.contoso.com/pizzas/true |
| datetime | {birthdate:datetime} | http://www.contoso.com/customers/1995-12-12 |
| decimal | {maxprice:decimal} | http://www.contoso.com/pizzas/15.00 |
| double | {weight:double} | http://www.contoso.com/pizzas/1.234 |
| float | {weight:float} | http://www.contoso.com/pizzas/1.564 |
| guid | {pizza id:guid} | http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| long | {totals ales:long} | http://www.contoso.com/pizzas/568192454 |
すべて取得するルート パラメーターを設定する
このユニットで前に示した次のコンポーネントについて考えてみましょう。
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
ここでは、ユーザーが URI http://www.contoso.com/favoritepizza/margherita/hawaiian を要求して、2 つのお気に入りの指定を試みたとします。 ページには "Your favorite pizza is: margherita" というメッセージが表示され、サブフォルダーの hawaiian は無視されます。 この動作は、すべてを取得するルート パラメーターを使用することで変更できます。このパラメーターを使用すると、複数の URI フォルダー境界 (スラッシュ) にまたがってパスがキャプチャされます。 ルート パラメーター名にプレフィックスのアスタリスク (*) を付けて、"すべてを取得する" ルート パラメーターにします。
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
同じ要求 URI で、ページには "Your favorite pizzas are: margherita/hawaiian" というメッセージが表示されるようになりました。