Prozkoumání vlivu parametrů tras na směrování aplikace Blazor
- 7 min
Zatím jste v tomto modulu Blazor viděli, jak pomocí částí identifikátoru URI směrovat požadavky na správnou komponentu. Parametry trasy můžete použít také k zachycení dalších částí identifikátoru URI a přístupu k nim ve vašem kódu.
Předpokládejme, že pracujete na webu společnosti pro doručování pizzy a směrujete požadavky na pizzu do komponenty Pizzas.razor . Teď chcete získat oblíbenou pizzu uživatele z identifikátoru URI a použít ji k zobrazení informací o jiných pizzách, které by se jim mohly líbit.
Tady se dozvíte, jak pomocí parametrů směrování zadat části adresy URL ke zpracování v kódu.
Poznámka:
Bloky kódu v této lekci jsou ilustrativní příklady. V další lekci napíšete vlastní kód.
Parametry trasy
Dříve v tomto modulu jste se dozvěděli, jak části identifikátoru URI, pomocí kterých lze požadavky uživatelů směrovat na správnou komponentu. Často chcete použít jiné části identifikátoru URI jako hodnotu na vykreslené stránce. Předpokládejme například, že uživatel požaduje:
http://www.contoso.com/favoritepizza/hawaiian
Pomocí direktivy @page jste viděli, jak tento požadavek směrovat, například do komponenty FavoritePizza.razor . Teď chcete použít hodnotu havajan ve vaší komponentě. Pokud chcete tuto hodnotu získat, můžete ji deklarovat jako parametr trasy.
Direktiva @page slouží k určení částí identifikátoru URI, které jsou předány komponentě jako parametry trasy. V kódu komponenty můžete získat hodnotu parametru trasy stejným způsobem, jakým byste získali hodnotu parametru komponenty:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Předchozí kód používá složené závorky v direktivě @page k určení parametru trasy a jeho název.
Poznámka:
Parametry komponenty jsou hodnoty odesílané z nadřazené komponenty do podřízené komponenty. V nadřazené části zadáte hodnotu parametru komponenty jako atribut značky podřízené komponenty. Parametry trasy se zadají odlišně. Zadají se jako součást identifikátoru URI. Směrovač Blazor na pozadí tyto hodnoty zachytí a odešle je komponentě jako hodnoty komponent, což je důvod, proč k nim můžete přistupovat stejným způsobem. Parametry trasy nerozlišují malá a velká písmena a předávají se do parametru komponenty se stejným názvem.
Volitelné parametry trasy
V předchozím příkladu {favorite} je parametr povinný. Pokud chcete parametr trasy nastavit jako volitelný, použijte otazník:
@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";
}
}
Je vhodné nastavit výchozí hodnotu volitelného parametru. V předchozím příkladu je výchozí hodnota parametru Favorite nastavena OnInitialized v metodě.
Poznámka:
Tato OnInitialized metoda se spustí, když uživatelé požadují stránku poprvé. Pokud požadují stejnou stránku s jiným parametrem směrování, nespustí se. Pokud například očekáváte, že uživatelé přejdou z http://www.contoso.com/favoritepizza/hawaiian do http://www.contoso.com/favoritepizza, nastavte výchozí hodnotu v OnParametersSet() metodě.
Omezení trasy
V předchozích příkladech je důsledkem vyžádání identifikátoru URI http://www.contoso.com/favoritepizza/2 nesmyslná zpráva "Vaše oblíbená pizza je: 2". V jiných případech může neshoda typů, jako je ta, způsobit výjimku a zobrazit uživateli chybu. Zvažte zadání 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; }
}
V tomto příkladu platí, že pokud uživatel požaduje http://www.contoso.com/favoritepizza/margherita, není žádná shoda s předchozí komponentou. V důsledku toho se požadavek směruje jinam. Pokud uživatel požádá http://www.contoso.com/favoritepizza/12o trasu, zobrazí se zpráva Vaše oblíbená pizza: 12 palců. Konkrétní typ parametru trasy, jako je tento, se nazývá omezení trasy. V omezení můžete použít tyto jiné typy:
| Omezení | Příklad | Příklad shody |
|---|---|---|
| Booleova hodnota | {vegan:bool} | http://www.contoso.com/pizzas/true |
| Datum a čas | {datum_narození:datum_čas} | http://www.contoso.com/customers/1995-12-12 |
| desetinné číslo | {maxprice:decimal} | http://www.contoso.com/pizzas/15.00 |
| dvojitý | {weight:double} | http://www.contoso.com/pizzas/1.234 |
| float (číslo s plovoucí řádovou čárkou) | {weight:float} | http://www.contoso.com/pizzas/1.564 |
| GUID (globálně unikátní identifikátor) | {pizza id:guid} | http://www.contoso.com/pizzas/CD2C1638-1638-72D5-1638-DEADBEEF1638 |
| dlouhý | {totals ales:long} | http://www.contoso.com/pizzas/568192454 |
Nastavení parametru trasy catch-all
Vezměte v úvahu následující komponentu z dřívější části této lekce:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Teď předpokládejme, že se uživatel pokusí určit dvě oblíbené položky vyžádáním identifikátoru URI http://www.contoso.com/favoritepizza/margherita/hawaiian. Na stránce se zobrazí zpráva Vaše oblíbená pizza: margherita a ignoruje podsložku hawaiian. Toto chování můžete změnit pomocí parametru trasy catch-all, který zachycuje cesty napříč několika hranicemi složek URI (lomítka). Předpona hvězdičky (*) k názvu parametru trasy, aby parametr trasy catch-all:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Se stejným identifikátorem URI požadavku se teď na stránce zobrazí zpráva Vaše oblíbené pizzy: margherita/hawaiian.