Esplorare come i parametri di route influiscono sul routing dell'app Blazor
Si è visto come, in Blazor, è possibile usare parti dell'URI per instradare le richieste al componente corretto. È anche possibile intercettare altre parti dell'URI e accedervi nel codice usando parametri di route.
Si supponga di lavorare al sito Web di una società di consegna di pizze a domicilio e di aver indirizzato le richieste di pizza al componente Pizzas.razor. Ora si vuole ottenere la pizza preferita dell'utente dall'URI e usarla per visualizzare informazioni su altre pizze che potrebbero piacergli.
In questo articolo si apprenderà come usare i parametri di route per specificare parti dell'URL da elaborare nel codice.
Nota
I blocchi di codice in questa unità sono esempi illustrativi. Si scriverà il codice nell'unità successiva.
Parametri di route
In precedenza in questo modulo si è appreso come specificare parti dell'URI che possono essere usate nelle richieste utente per instradare la richiesta al componente corretto. Spesso si vogliono usare altre parti dell'URI come valore nella pagina di cui è stato eseguito il rendering. Si supponga, ad esempio, che l'utente richieda:
http://www.contoso.com/favoritepizza/hawaiian
Usando la direttiva @page, si è appreso come instradare questa richiesta, ad esempio, al componente FavoritePizza.razor. Ora si vuole usare il valore hawaiian nel componente. Per ottenere questo valore, è possibile dichiararlo come parametro di route.
Usare la direttiva @page per specificare le parti dell'URI che verranno passate al componente come parametri di route. Nel codice del componente è possibile ottenere il valore di un parametro di route nello stesso modo in cui si ottiene il valore di un parametro del componente:
@page "/FavoritePizzas/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Nella direttiva @page nel codice precedente si usano le parentesi graffe per specificare il parametro di route e assegnargli un nome.
Nota
I parametri del componente sono valori inviati da un componente padre a un componente figlio. Nel componente padre specificare il valore del parametro del componente come attributo del tag del componente figlio. I parametri di route vengono specificati in modo diverso, ovvero come parte dell'URI. Dietro le quinte, il router Blazor intercetta questi valori e li invia al componente come valori del componente, motivo per cui è possibile accedervi nello stesso modo. I parametri di route non fanno distinzione tra maiuscole e minuscole e vengono inoltrati a un parametro del componente con lo stesso nome.
Parametri di route facoltativi
Nell'esempio precedente è necessario il parametro {favorite}. Per rendere facoltativo il parametro di route, usare un punto interrogativo:
@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";
}
}
È consigliabile impostare un valore predefinito per il parametro facoltativo. Nell'esempio precedente il valore predefinito per il parametro Favorite è impostato nel metodo OnInitialized.
Nota
Il metodo OnInitialized viene eseguito quando gli utenti richiedono la pagina per la prima volta. Non viene eseguito se richiedono la stessa pagina con un parametro di routing diverso. Ad esempio, se si prevede che gli utenti passino da http://www.contoso.com/favoritepizza/hawaiian a http://www.contoso.com/favoritepizza, impostare il valore predefinito nel metodo OnParametersSet().
Vincoli della route
Negli esempi precedenti la conseguenza della richiesta dell'URI http://www.contoso.com/favoritepizza/2 è il messaggio priva di senso "Your favorite pizza is: 2" (La pizza preferita è: 2). In altri casi, tipi non corrispondenti come questo potrebbero causare un'eccezione e la visualizzazione di un errore all'utente. Provare a specificare un tipo per il parametro di route:
@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; }
}
In questo esempio se l'utente richiede http://www.contoso.com/favoritepizza/margherita, non esiste alcuna corrispondenza con il componente precedente. Di conseguenza, la richiesta viene instradata altrove. Se l'utente richiede http://www.contoso.com/favoritepizza/12, c'è una corrispondenza di route e il componente visualizza il messaggio La dimensione della pizza preferita è: 12 pollici. Un tipo specifico per il parametro della route come questo è denominato vincolo della route. In un vincolo è possibile usare questi altri tipi:
| Vincolo | Esempio | Esempi di corrispondenza |
|---|---|---|
| bool | {vegan:bool} | http://www.contoso.com/pizzas/true |
| datetime | {birthdate:datetime} | http://www.contoso.com/customers/1995-12-12 |
| decimale | {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 |
Impostare un parametro di route catch-all
Prendere in considerazione il componente seguente usato in precedenza in questa unità:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Si supponga ora che l'utente abbia provato a specificare due gusti preferiti richiedendo l'URI http://www.contoso.com/favoritepizza/margherita/hawaiian. Nella pagina viene visualizzato il messaggio Your favorite pizza is: margherita (La pizza preferita è: margherita) e viene ignorata la sottocartella hawaiian. Per modificare questo comportamento, si può usare un parametro di route catch-all, che acquisisce i percorsi tra più limiti delle cartelle URI (barre). Anteporre un asterisco (*) al nome del parametro di route per impostarlo come catch-all:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Con lo stesso URI della richiesta nella pagina viene ora visualizzato il messaggio Your favorite pizzas are: margherita/hawaiian (Le tue pizze preferite sono: margherita/hawaiiana).