Uso del componente enrutador de Blazor para controlar la navegación de la aplicación
El sistema de enrutamiento de Blazor proporciona opciones flexibles para garantizar que las solicitudes de usuario lleguen a un componente que pueda controlarlos y devolver información que el usuario quiera.
Supongamos que está trabajando en el sitio web de la empresa de entrega de pizzas. Quiere configurar el sitio para que el mismo componente controle las solicitudes de detalles de pizza y los detalles de ingredientes personalizados. Ha completado esta fase, pero las pruebas muestran que las solicitudes de detención reciben un mensaje de error. Debe corregir este problema.
Aquí aprenderá a configurar rutas en Blazor mediante la directiva @page.
Nota:
Los bloques de código de esta unidad son ejemplos ilustrativos. Escriba su propio código en la unidad siguiente.
Uso de plantillas de ruta
Cuando el usuario realiza una solicitud de una página desde la aplicación web, puede especificar lo que quiere ver con información en el URI. Por ejemplo:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Después del protocolo y la dirección del sitio web, este URI indica que el usuario quiere conocer detalles de las pizzas margherita. Además, la cadena de consulta después del signo de interrogación muestra que está interesado en un ingrediente extra de piña. En Blazor, se usa el enrutamiento para asegurarse de que cada solicitud se envía al componente que mejor puede responder. También se usa el enrutamiento para asegurarse de que el componente tiene toda la información que necesita para mostrar lo que el usuario quiere. En este caso, es posible que desee enviar la solicitud al componente Pizzas y para que ese componente muestre una pizza margarita con información sobre cómo agregar piña a él.
Blazor enruta las solicitudes con un componente especializado denominado enrutador. El componente está configurado en App.razor de la siguiente manera:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, we haven't found any pizzas here.</p>
</NotFound>
</Router>
Cuando se inicia la aplicación, Blazor comprueba el atributo AppAssembly para averiguar qué ensamblado debe examinar. Examina ese ensamblado en busca de componentes en los que routeAttribute está presente. Blazor usa estos valores para compilar un objeto RouteData que especifica cómo se enrutan las solicitudes a los componentes. Al codificar la aplicación, se usa la directiva @page en cada componente para corregir RouteAttribute.
En el código anterior, la etiqueta <Found> especifica el componente que controla el enrutamiento en tiempo de ejecución: RouteView. Este componente recibe el objeto RouteData y los parámetros del URI o la cadena de consulta. A continuación, representa el componente especificado y su diseño. Puede usar la etiqueta <Found> para especificar un diseño predeterminado, que se usa cuando el componente seleccionado no especifica un diseño con la directiva @layout. Más adelante en este módulo obtendrá más información sobre los diseños.
En el componente <Router>, también puede especificar lo que se devuelve al usuario cuando no hay una ruta de acceso que coincida, mediante la etiqueta <NotFound>. En el ejemplo anterior se devuelve un único párrafo <p>, pero se puede representar código HTML más complejo. Por ejemplo, podría incluir un vínculo a la página principal o una página de contacto para los administradores del sitio.
Uso de la directiva @page
En un componente de Blazor, la directiva @page especifica que el componente debe controlar directamente las solicitudes. Puede especificar RouteAttribute en la directiva @page si se pasa como una cadena. Por ejemplo, este atributo especifica que la página controla las solicitudes a la ruta /Pizzas :
@page "/Pizzas"
Si quiere especificar más de una ruta para el componente, use dos o más directivas @page, como en este ejemplo:
@page "/Pizzas"
@page "/CustomPizzas"
Obtención de información de ubicación y navegación con NavigationManager
Supongamos que escribe un componente para controlar un URI que solicita el usuario, como http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Al escribir un componente, es posible que necesite acceder a información de navegación como la siguiente:
- El URI completo actual, como
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - El URI base, como
http://www.contoso.com/. - La ruta de acceso relativa base, como
pizzas/margherita. - La cadena de consulta, como
?extratopping=pineapple.
Puede usar un objeto NavigationManager para obtener todos estos valores. Debe insertar el objeto en el componente y, a continuación, puede acceder a sus propiedades. En este código se usa NavigationManager para obtener el URI base del sitio web y luego lo utiliza para establecer un vínculo a la página principal:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Para acceder a la cadena de consulta, debe analizar el URI completo. Para ejecutar este análisis, use la clase QueryHelpers del ensamblado Microsoft.AspNetCore.WebUtilities:
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Con el componente anterior implementado, si un usuario solicita el URI http://www.contoso.com/pizzas?extratopping=Pineapple, vería el mensaje "I want to add this topping: Pineapple" (Quiero agregar este ingrediente: Piña) en la página que se representa.
También puede usar el objeto NavigationManager para enviar los usuarios a otro componente del código llamando al método NavigationManager.NavigateTo():
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Nota:
La cadena que se pasa al método NavigateTo() es el URI absoluto o relativo al que quiere enviar al usuario. Asegúrese de que tiene un componente configurado en esa dirección. Para el código anterior, un componente con la directiva @page "/buypizza" controlará esta ruta.
Uso de componentes NavLink
En uno de los ejemplos anteriores, se ha utilizado código para obtener el valor NavigationManager.BaseUri y usarlo para establecer el atributo href de una etiqueta <a> en la página principal. En Blazor, use el componente NavLink para representar etiquetas <a> porque alterna una clase CSS active cuando el atributo href del vínculo coincide con la dirección URL actual. Al aplicar estilo a la clase active, puede dejar claro al usuario el vínculo de navegación que es para la página actual.
Cuando se usa NavLink, el ejemplo de vínculo de la página principal es similar al código siguiente:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
El atributo Match del componente NavLink se usa para administrar cuando se resalta el vínculo. Hay dos opciones:
- NavLinkMatch.All: cuando se usa este valor, el vínculo solo se resalta como activo cuando su elemento
hrefcoincide con toda la dirección URL actual. - NavLinkMatch.Prefix: cuando se usa este valor, el vínculo se resalta como activo cuando su elemento
hrefcoincide con la primera parte de la dirección URL actual. Imagine, por ejemplo, que tiene el vínculo<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Este vínculo se resalta como activo cuando la dirección URL actual eshttp://www.contoso.com/pizzasy para cualquier ubicación dentro de esa dirección URL, comohttp://www.contoso.com/pizzas/formaggio. Este comportamiento puede ayudar al usuario a comprender qué sección del sitio web está viendo actualmente.