Puedes ver el contenido de este vídeo junto con su curso en el modo vídeo (similar a Udemy) si pulsas aquí.

Enrutamiento en Blazor

En el post de hoy vamos a hablar del routing o enrutamiento en Blazor. 

Veremos que es y cómo utilizarlo, así como algunas de sus características o funcionalidades más avanzadas que no son tan claras al usuario. 

 

 

1 - Qué es el enrutamiento

Primero y antes de nada debemos entender que es el enrutamiento y para qué sirve.

Por lo tanto el enrutamiento es el mecanismo que hace que las request HTTP vayan dirigidas al lugar correcto, en nuestro caso, a la página correcta.

 

 

1.1 - Enrutamiento en Blazor

Para considerar si un componente es enrutable en Blazor lo hacemos durante el tiempo de compilación.

 

El compilador detecta todos los componentes que contienen la directiva @page en su código y son añadidos a la tabla de enrutamiento  y cuando la request llega, el componente de enrutamiento escanea la tabla para comprobar si existe o no. 

 

routing blazor

En caso de que no utilicemos la directiva @page ese componente únicamente puede ser utilizado como componente embedded dentro de otro.

 

 

2 - Componente de enrutamiento 

El componente de enrutamiento es la pieza de código que podemos encontrar en el fichero app.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Cuando definimos una request por ejemplo `localhost\fetchdata` lo primero que .net hace es comprobar si hay un controlador que define esa ruta. 

 

Si lo hay, la request es enviada a ese endpoint a través del componente <Found.. >

En caso de que no exista, la request va al componente <NotFound…> donde comúnmente mostraremos un error

 

 

En caso de existir nos imprime la vista y si no existe nos mostrará la página de error por defecto. 

 

 

3 - Funcionalidades adicionales del enrutamiento en Blazor

Además del enrutamiento básico que acabamos de ver, disponemos de otras funcionalidades, las cuales nos ayudan a tener un funcionamiento más completo. 

 

3.1 - Recibir parámetros en la URL con Blazor

Utilizando la directiva page podemos recibir parámetros en la URL. Únicamente debemos indicarlo como lo vimos en el enrutamiento de la API en C#  incluyendo el nombre de la variable entre corchetes;

@page "/nombre/{id}"
<div>El nombre enviado como parámetro es @id</div>
@code {
    [Parameter]
    public string id { get; set; }
}

Por supuesto debemos indicar que vamos a recibir el parámetro dentro de nuestro código. 

 

Finalmente, únicamente debemos llamar a la URL https://localhost:44323/Nombre/NetMentor.

 

 

3.2 - Condicionar el tipo de parámetro

SImilar a la funcionalidad de generics donde podemos limitar el tipo que va a ser T. En Blazor tenemos la misma funcionalidad, ya que podemos condicionar de que tipo va a ser la variable que vamos a recibir. 

 

Para ello, debemos indicar en la directiva, junto a la variable que vamos a recibir el tipo con :tipo.

@page "/codigo/{id:int}"

<div>El código enviado es @id</div>

@code {
    [Parameter]
    public int id { get; set; }
}

Podemos observar que en el ejemplo hemos limitado el tipo a int.

Estos condicionantes son muy útiles para prevenir el recibir datos de forma incorrecta desde la URL.

En caso de que enviemos en la url un tipo que no es el correcto, nos saltara el componente <NotFound… > con el error. 

 

3.3 - Cargar assemblies adicionales

Cuando hemos visto nuestro componente de enrutamiento, luce tal que así en su primera línea: 

<Router AppAssembly="@typeof(Program).Assembly" >

Esta línea indica que va a buscar enrutamiento dentro de nuestro program.cs. Pero qué sucede si importamos algún otro DLL que también tenga componentes con enrutamiento?

 

Para ello podemos extender el componente utilizando la directiva AdditionalAssemblies, la cual nos permite indicar un array con diferentes assemblies. 

<Router AppAssembly="@typeof(Program).Assembly" 
        AdditionalAssemblies="new[] { typeof(dllExterno).Assembly }">
        ....
</Router>

 

3.4 - Match en el menú de blazor

Para este punto no nombro directamente al routing, sino que es más bien la experiencia de usuario.

Es muy común tener en la web un menú, ya sea lateral o superior. A su vez, es común que ese menú tenga “marcado” el apartado en el que nos encontramos actualmente. 

 

En Blazor para el menú utilizaremos el componente NavLink y uno de los motivos es porque nos permite indicar el atributo Match el cual asigna estilos css de “activo” si la URL corresponde con la URL del componente.

<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
    <span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>

 

Para ello podemos utilizar tanto la URL completa, utilizando Match="NavLinkMatch.All" o únicamente los prefijos con Match="NavLinkMatch.Prefix".

 

Conclusión

En este post hemos visto que es el enrutamiento en Blazor, por supuesto hay que tener muy claro cómo funciona y una noción de cómo funciona por detrás.

Hemos visto además, diferentes funcionalidades adicionales del enrutamiento en blazor. 

 


Uso del bloqueador de anuncios adblock

Hola!

Primero de todo bienvenido a la web de NetMentor donde podrás aprender programación en C# y .NET desde un nivel de principiante hasta más avanzado.


Yo entiendo que utilices un bloqueador de anuncios como AdBlock, Ublock o el propio navegador Brave. Pero te tengo que pedir por favor que desactives el bloqueador para esta web.


Intento personalmente no poner mucha publicidad, la justa para pagar el servidor y por supuesto que no sea intrusiva; Si pese a ello piensas que es intrusiva siempre me puedes escribir por privado o por Twitter a @NetMentorTW.


Si ya lo has desactivado, por favor recarga la página.


Un saludo y muchas gracias por tu colaboración

© copyright 2024 NetMentor | Todos los derechos reservados | RSS Feed

Buy me a coffee Invitame a un café