Explorar como os parâmetros de rota afetam o roteamento do aplicativo Blazor
Até agora, nesse módulo do Blazor, você viu como usar partes do URI para direcionar solicitações ao componente certo. Você também pode usar o parâmetros de rota para interceptar outras partes do URI e acessá-las no seu código.
Suponha que você esteja trabalhando no site da empresa de entrega de pizza e esteja roteando solicitações de pizza para o componente Pizzas.razor. Agora, você deseja obter a pizza favorita do usuário do URI e usá-la para exibir informações sobre outras pizzas que talvez eles possam gostar.
Aqui, você aprenderá como usar parâmetros de rota para especificar partes da URL a serem processadas no seu código.
Observação
Os blocos de código desta unidade são exemplos ilustrativos. Você escreverá seu próprio código na próxima unidade.
Parâmetros de rota
Anteriormente neste módulo, você aprendeu como partes do URI que o usuário solicita podem ser usadas a fim de rotear a solicitação para o componente certo. Normalmente, você usa outras partes do URI como um valor em sua página renderizada. Por exemplo, suponha que o usuário tenha solicitado:
http://www.contoso.com/favoritepizza/hawaiian
Usando a diretiva @page, você viu como direcionar esta solicitação para, por exemplo, o componente FavoritePizza.razor. Agora, você deseja usar o valor havaiana no componente. Para obter esse valor, você pode declará-lo como um parâmetro de rota.
Use a diretiva @page para especificar as partes do URI que são passadas para o componente como parâmetros de rota. No código do componente, você pode obter o valor de um parâmetro de rota da mesma maneira que obteria o valor de um parâmetro de componente:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
O código anterior usa chaves na diretiva @page para especificar o parâmetro de rota e dar um nome a ele.
Observação
Parâmetros de componente são valores enviados de um componente pai a um componente filho. No pai, você especifica o valor do parâmetro de componente como um atributo da marca do componente filho. Os parâmetros de rota são especificados de maneira diferente. Eles são especificados como parte do URI. Nos bastidores, o roteador do Blazor intercepta esses valores e os envia ao componente como valores de componente, e é por isso você pode acessá-los da mesma maneira. Os parâmetros de rota não diferenciam maiúsculas de minúsculas e são encaminhados para um parâmetro de componente com o mesmo nome.
Parâmetros de rota opcionais
No exemplo anterior, o parâmetro {favorite} é obrigatório. Para tornar o parâmetro de rota opcional, use um ponto de interrogação:
@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";
}
}
É uma boa ideia definir um valor padrão para o parâmetro opcional. No exemplo anterior, o valor padrão do parâmetro Favorite é definido no método OnInitialized.
Observação
O método OnInitialized é executado quando os usuários solicitam a página pela primeira vez. Ele não é executado se eles solicitam a mesma página com um parâmetro de roteamento diferente. Por exemplo, se você espera que os usuários naveguem de http://www.contoso.com/favoritepizza/hawaiian para http://www.contoso.com/favoritepizza, defina o valor padrão no método OnParametersSet().
Restrições de rota
Nos exemplos anteriores, a consequência de solicitar o URI http://www.contoso.com/favoritepizza/2 é uma mensagem estranha: "Sua pizza favorita é: 2". Em outros casos, tipos incompatíveis como esse podem causar uma exceção e exibir um erro para o usuário. Considere especificar um tipo para o parâmetro de rota:
@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; }
}
Neste exemplo, se o usuário solicita http://www.contoso.com/favoritepizza/margherita, não há nenhuma correspondência com o componente anterior. Como resultado, a solicitação é roteada para outro lugar. Se o usuário solicitar http://www.contoso.com/favoritepizza/12, haverá uma correspondência de rotas e o componente exibirá a mensagem Seu tamanho de pizza favorito é: 30 cm. Um tipo específico para o parâmetro de rota como esse é chamado de restrição de rota. Você pode usar estes outros tipos em uma restrição:
| Constraint | Exemplo | Correspondências de exemplo |
|---|---|---|
| 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 |
Definir um parâmetro de rota catch-all
Considere o seguinte componente visto anteriormente nesta unidade:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Agora suponha que o usuário tente especificar dois favoritos solicitando o URI http://www.contoso.com/favoritepizza/margherita/hawaiian. A página exibe a mensagem Sua pizza favorita é: margherita e ignora a subpasta havaiana. Você pode alterar esse comportamento usando um parâmetro de rota catch-all, que captura caminhos entre vários limites de pasta de URI (barras “/”). Coloque um asterisco (*) à frente do nome do parâmetro de rota para tornar o parâmetro de rota catch-all:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Com o mesmo URI de solicitação, a página agora exibe a mensagem: Suas pizzas favoritas são: margherita/havaiana.