ルート パラメーターが Blazor アプリのルーティングにどのような影響を及ぼすかを確認する

• 7 分

ここまで、この Blazor モジュールでは、URI の一部を使用して適切なコンポーネントに要求をルーティングする方法について説明しました。 "ルート パラメーター" を使用して URI の他の部分をインターセプトし、コード内でそれらにアクセスすることもできます。

あなたは宅配ピザ会社の Web サイトの作業をしていて、ピザの要求を Pizzas.razor コンポーネントにルーティングしているとします。 今は、URI からユーザーのお気に入りのピザを取得し、それを利用して、ユーザーが気に入る可能性がある他のピザについての情報を表示したいと考えています。

ここでは、ルート パラメーターを使用して、コード内で処理する URL の部分を指定する方法を学習します。

ルート パラメーター

このモジュールでは前に、ユーザーが要求する 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 ディレクティブで中かっこを使用してルート パラメーターを指定し、それに名前を付けています。

省略可能なルート パラメーター

前の例では、{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 メソッドで設定されます。

ルート制約

前の例では、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" というメッセージが表示されるようになりました。

自分の知識をチェックする

1.

ルートのパラメーターを使用して、操作するお気に入りのピザを定義する URL の一部をキャプチャするためには、どの形式が正しいですか?

/FavoritePizzas/{favorite}

/FavoritePizzas/[favorite]

/FavoritePizzas?favorite

2.

"すべてを取得するパラメーター" が含まれる Blazor のルート パラメーターを示しているのは、どの構文ですか?

/FavoritePizzas/{favorite?}

/FavoritePizzas/{favorite:catchall}

/FavoritePizzas/{*favorite}

作業を確認する前にすべての問題に回答する必要があります。