Il routing in Blazor è abbastanza limitato, e tra le varie lacune, non possiede un sistema per la generazione degli URL. Pertanto, tutte le volte che dobbiamo creare un link a una pagina, la soluzione più semplice è quella di scriverlo in forma di stringa.
<li class="nav-item px-3"> <NavLink class="nav-link" href="counter"> Counter </NavLink> </li>
Come sappiamo, questo approccio è soggetto a potenziali errori di battitura, e soprattutto mal si presta a refactoring dovesse la nostra logica di routing cambiare in futuro.
Fortunatamente, possiamo facilmente creare una classe in grado di creare il link in maniera dinamica, in base al contenuto della direttiva @page del componente:
public static class RouteHelper { public static string GetUrl<TComponent>() where TComponent : ComponentBase { Type type = typeof(TComponent); var att = type.GetCustomAttributes(typeof(RouteAttribute), inherit: false) .OfType<RouteAttribute>() .SingleOrDefault(); if (att == null) return null; return att.Template; } }
Questa direttiva, infatti, viene tradotta in fase di compilazione con l'attributo RouteAttribute. Il codice in alto, non fa altro che recuperarlo dalla classe del componente e restituirlo come risultato.
A questo punto, potremo riscrivere il nostro link precedente come segue, con il vantaggio di non dover più usare una stringa statica, bensì facendo riferimento all'oggetto su cui vogliamo navigare.
<NavLink class="nav-link" href="@(RouteHelper.GetUrl<Counter>()"> <span class="oi oi-plus" aria-hidden="true"></span> Counter </NavLink>
In questo modo, la definizione della route resta centralizzata sul componente Counter e, se dovessimo cambiarla, tutti i link si adegueranno di conseguenza.
Quanto visto finora è solo un semplice punto di partenza, che non supporta ancora due importanti use case: Route con parametri e Route multiple. Ce ne occuperemo in uno dei prossimi script.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire query verso tipi non mappati in Entity Framework Core
Usare il versioning con i controller di ASP.NET Core Web API
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare Model as a Service su Microsoft Azure
Creare un'applicazione React e configurare Tailwind CSS
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Reactive form tipizzati con FormBuilder in Angular
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Sfruttare lo streaming di una chiamata Http da Blazor
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
I più letti di oggi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0
- Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
- Speciale Windows Store app: costruire app con WinRT per Windows 8