Dowiedz się, jak parametry trasy wpływają na routing aplikacji Blazor
Do tej pory w tym module Blazor pokazano, jak używać części identyfikatora URI do kierowania żądań do odpowiedniego składnika. Możesz również użyć parametrów trasy, aby przechwycić inne części identyfikatora URI i uzyskać do nich dostęp w kodzie.
Załóżmy, że pracujesz nad witryną internetową firmy dostarczania pizzy i kierujesz żądania pizzy do składnika Pizzas.razor . Teraz chcesz pobrać ulubioną pizzę użytkownika z identyfikatora URI i użyć go do wyświetlania informacji o innych pizzach, które mogą lubić.
Tutaj dowiesz się, jak używać parametrów trasy do określania części adresu URL do przetwarzania w kodzie.
Uwaga
Bloki kodu w tej lekcji są przykładami ilustracyjnymi. Napiszesz własny kod w następnej lekcji.
Parametry tras
Wcześniej w tym module przedstawiono, jak części identyfikatora URI mogą służyć do kierowania żądania użytkownika do odpowiedniego składnika. Często chcesz użyć innych części identyfikatora URI jako wartości na renderowanej stronie. Załóżmy na przykład, że użytkownik żąda:
http://www.contoso.com/favoritepizza/hawaiian
Korzystając z @page dyrektywy, przedstawiono sposób kierowania tego żądania do, na przykład składnika FavoritePizza.razor . Teraz chcesz użyć wartości hawajskiej w składniku. Aby uzyskać tę wartość, możesz zadeklarować ją jako parametr trasy.
@page Użyj dyrektywy , aby określić części identyfikatora URI, które są przekazywane do składnika jako parametry trasy. W kodzie składnika można uzyskać wartość parametru trasy w taki sam sposób, jak w przypadku uzyskania wartości parametru składnika:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Powyższy kod używa nawiasów klamrowych w @page dyrektywie, aby określić parametr trasy i nadać mu nazwę.
Uwaga
Parametry składnika to wartości wysyłane ze składnika nadrzędnego do składnika podrzędnego. W elemencie nadrzędnym należy określić wartość parametru składnika jako atrybut tagu składnika podrzędnego. Parametry trasy są określane inaczej. Są one określane jako część identyfikatora URI. W tle router Blazor przechwytuje te wartości i wysyła je do składnika jako wartości składników, dlatego można uzyskać do nich dostęp w taki sam sposób. Parametry trasy są niewrażliwe na wielkość liter i są przekazywane do parametru składnika o tej samej nazwie.
Opcjonalne parametry trasy
W poprzednim przykładzie {favorite} parametr jest wymagany. Aby ustawić parametr trasy jako opcjonalny, użyj znaku zapytania:
@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";
}
}
Dobrym pomysłem jest ustawienie wartości domyślnej dla opcjonalnego parametru. W poprzednim przykładzie wartość domyślna parametru Favorite jest ustawiana w metodzie OnInitialized .
Uwaga
Metoda OnInitialized jest uruchamiana, gdy użytkownicy żądają strony po raz pierwszy. Nie jest ono uruchamiane, jeśli żądają tej samej strony z innym parametrem routingu. Jeśli na przykład oczekujesz, że użytkownicy przejdą z http://www.contoso.com/favoritepizza/hawaiian do http://www.contoso.com/favoritepizza, ustaw wartość domyślną w metodzie OnParametersSet() .
Ograniczenia trasy
W poprzednich przykładach konsekwencją żądania identyfikatora URI http://www.contoso.com/favoritepizza/2 jest niesensowny komunikat "Twoja ulubiona pizza to: 2". W innych przypadkach niezgodność typów może spowodować wyjątek i wyświetlić błąd dla użytkownika. Rozważ określenie typu parametru trasy:
@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; }
}
W tym przykładzie, jeśli użytkownik żąda http://www.contoso.com/favoritepizza/margherita, nie ma dopasowania do poprzedniego składnika. W związku z tym żądanie jest kierowane gdzie indziej. Jeśli użytkownik zażąda http://www.contoso.com/favoritepizza/12dopasowania trasy, a składnik wyświetla komunikat Twój ulubiony rozmiar pizzy to: 12 cali. Określony typ parametru trasy, taki jak ten, jest nazywany ograniczeniem trasy. Można użyć tych innych typów w ograniczeniu:
| Ograniczenie | Przykład | Przykładowe dopasowania |
|---|---|---|
| bool | {wegańskie: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 |
| liczba zmiennoprzecinkowa | {weight:float} | http://www.contoso.com/pizzas/1.564 |
| Identyfikator GUID | {pizza id:guid} | http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| długi | {totals ales:long} | http://www.contoso.com/pizzas/568192454 |
Ustawianie parametru trasy catch-all
Rozważ następujący składnik z wcześniejszej części tej lekcji:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Teraz załóżmy, że użytkownik próbuje określić dwa ulubione, żądając identyfikatora URI http://www.contoso.com/favoritepizza/margherita/hawaiian. Na stronie zostanie wyświetlony komunikat Twoja ulubiona pizza to: ix i ignoruje podfolder hawajski. To zachowanie można zmienić przy użyciu parametru trasy catch-all, który przechwytuje ścieżki w wielu granicach folderu identyfikatora URI (ukośniki do przodu). Prefiks gwiazdki (*) do nazwy parametru trasy, aby parametr route catch-all:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Przy użyciu tego samego identyfikatora URI żądania na stronie jest teraz wyświetlany komunikat Twoja ulubiona pizza to: ю/hawaiian.