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
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 (číslo s plovoucí řádovou čárkou) {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

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.

Kontrola znalostí

1.

Jaký je správný formát pro použití parametru trasy k zachycení části adresy URL, která definuje oblíbenou pizzu, se kterou chcete pracovat?

2.

Která syntaxe ukazuje parametr trasy Blazor s parametrem catch-all?