Exploración de cómo afectan los parámetros de ruta al enrutamiento de la aplicación Blazor
Ha visto cómo puede usar, en Blazor, partes del URI para enrutar las solicitudes al componente correcto. También puede interceptar otras partes del URI y acceder a ellas en el código mediante parámetros de ruta.
Supongamos que está trabajando en el sitio web de la empresa de entrega de pizzas y ha enrutado las solicitudes de pizza al componente Pizzas.razor. Ahora, quiere obtener la pizza favorita del usuario desde el URI y usarla para mostrar información sobre otras pizzas que pueda querer.
Aquí, aprenderá a usar parámetros de ruta para especificar partes de la dirección URL que se procesarán en el código.
Nota
Los bloques de código de esta unidad son ejemplos ilustrativos. Escribirá su propio código en la unidad siguiente.
Parámetros de ruta
Anteriormente en este módulo, ha aprendido cómo se pueden usar partes del URI que el usuario solicita para enrutar la solicitud al componente correcto. A menudo, desea usar otras partes del URI como un valor en la página que se representa. Por ejemplo, suponga que el usuario solicita:
http://www.contoso.com/favoritepizza/hawaiian
Mediante el uso de la directiva @page, ha aprendido a enrutar esta solicitud, por ejemplo, al componente FavoritePizza.razor. Ahora quiere usar el valor hawaiian en el componente. Para obtener este valor, puede declararlo como un parámetro de ruta.
Use la directiva @page para especificar partes del URI que se pasarán al componente como parámetros de ruta. En el código del componente, puede obtener el valor de un parámetro de ruta de la misma manera que obtendría el valor de un 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; }
}
En el código anterior se usan llaves en la directiva @page para especificar el parámetro de ruta y darle un nombre.
Nota:
Los parámetros de componente son valores enviados desde un componente primario a un componente secundario. En el elemento primario, especifique el valor del parámetro de componente como atributo de la etiqueta del componente secundario. Los parámetros de ruta se especifican de otra forma. Se especifican como parte del URI. En segundo plano, el enrutador de Blazor intercepta estos valores y los envía al componente como valores de componente, por lo que puede acceder a ellos de la misma manera. Los parámetros de ruta no distinguen mayúsculas de minúsculas y se reenvían a un parámetro de componente con el mismo nombre.
Parámetros de ruta opcionales
En el ejemplo anterior, el parámetro {favorite} es obligatorio. Para que el parámetro de ruta sea opcional, use un signo de interrogación:
@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";
}
}
Es una buena idea establecer un valor predeterminado para el parámetro opcional. En el ejemplo anterior, el valor predeterminado del parámetro Favorite se establece en el método OnInitialized.
Nota:
El método OnInitialized se ejecuta cuando los usuarios solicitan la página por primera vez. No se ejecuta si solicitan la misma página con otro parámetro de enrutamiento. Por ejemplo, si espera que los usuarios naveguen desde http://www.contoso.com/favoritepizza/hawaiian hasta http://www.contoso.com/favoritepizza, establezca el valor predeterminado en el método OnParametersSet() en su lugar.
Restricciones de ruta
En los ejemplos anteriores, la consecuencia de solicitar el URI http://www.contoso.com/favoritepizza/2 sería un mensaje sin sentido: "Your favorite pizza is: 2" (Su pizza favorita es: 2). En otros casos, los errores de coincidencia de tipos como este podrían generar una excepción y mostrar un error al usuario. Considere la posibilidad de especificar un tipo para el parámetro de ruta:
@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; }
}
En este ejemplo, si el usuario solicita http://www.contoso.com/favoritepizza/margherita, no hay ninguna coincidencia con el componente anterior. Como resultado, la solicitud se enruta a otro lugar. Si el usuario solicita http://www.contoso.com/favoritepizza/12, hay una coincidencia de ruta y el componente muestra el mensaje Su tamaño de pizza favorito es: 12 pulgadas. Un tipo específico para el parámetro de ruta como este se denomina restricción de ruta. Puede usar estos otros tipos en una restricción:
| Restricción | Ejemplo | Coincidencias de ejemplo |
|---|---|---|
| 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 |
Establecimiento de un parámetro de ruta catch-all
Considere el componente siguiente que encontrará antes en esta unidad:
@page "/FavoritePizza/{favorite}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizza is: @Favorite</p>
@code {
[Parameter]
public string Favorite { get; set; }
}
Ahora imagine que el usuario ha intentado especificar dos pizzas favoritas mediante la solicitud del URI http://www.contoso.com/favoritepizza/margherita/hawaiian. La página muestra el mensaje Su pizza favorita es: margherita e ignora la subcarpeta hawaiana. Puede cambiar este comportamiento mediante un parámetro de ruta catch-all, que captura las rutas de acceso a través de varios límites de carpeta de URI (barras diagonales). Anteponga un asterisco (*) al nombre del parámetro de ruta para convertirlo en comodín:
@page "/FavoritePizza/{*favorites}"
<h1>Choose a Pizza</h1>
<p>Your favorite pizzas are: @Favorites</p>
@code {
[Parameter]
public string Favorites { get; set; }
}
Con el mismo URI de solicitud, la página muestra ahora el mensaje Sus pizzas favoritas son: margherita/hawaiian.