Nelle SPA (Single Page Application) troviamo una gestione delle pagine indipendente dall'url: l'aggiornamento dell'url non corrisponde con un ri-caricamento della pagina, ma il layout viene modificato e/o aggiornato attraverso funzioni JavaScript. All'interno di un framework la funzionalità è implementata out-of-the-box, ma se avessimo un nostro portale, in cui dover gestire poche pagine, come potremmo fare?
La metodologia più conosciuta è usare l'history.pushState.
function navigateTo(event) { // gestione dell'evento event.preventDefault(); // set url window.history.pushState(null, '', 'my-page'); // aggiornamento pagina changePage(); }
Questa funzione presenta un problema: deve essere scritta più volte all'interno della pagina, non avremo quindi un punto unico in cui gestire la logica, e non è adatta alla gestione della navigazione tramite form submit.
Per ovviare a ciò, aggiungiamo un listener all'evento navigate dell'oggetto navigation. In questo modo avremo un punto centralizzato di controllo su qualsiasi evento che porterà a un cambio di url della pagina.
navigation.addEventListener('navigate', navigateEvent => { switch (navigateEvent.destination.url) { case 'https://example.com/': navigateEvent.transitionWhile(loadIndexPage()); break; case 'https://example.com/hello': navigateEvent.transitionWhile(loadHelloPage()); break; } });
La logica è pressochè invariata: all'esecuzione di una navigazione, l'evento viene intercettato e gestito. In base all'url della pagina viene eseguita la funzione transitionWhile, un metodo che mette il client in attesa della risoluzione di una promise, passata come argomento, la quale conterrà le istruzioni per aggiornare la pagina coerentemente con l'url fornito.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Routing statico e PreRendering in una Blazor Web App
Controllare gli accessi IP alle app con Azure Container Apps
Load test di ASP.NET Core con k6
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Eseguire le GitHub Actions offline
Creazione di componenti personalizzati in React.js con Tailwind CSS
Inizializzare i container in Azure Container Apps
Eseguire attività con Azure Container Jobs
Disabilitare automaticamente un workflow di GitHub (parte 2)
Reactive form tipizzati con modellazione del FormBuilder in Angular
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
I più letti di oggi
- Personalizzare la pagina di errore con ASP.NET
- Windows Phone 8 usa IE10 come browser, quindi pieno supporto ad HTML5, compresi i ... https://aspit.co/wp-summit #WPSummit
- siete pronti? la #netconfit torna anche nel 2019!.NET Conference Italia 2019 sarà trasmessa live il 23 ottobre.Info e iscrizioni su => https://aspit.co/netconf-19
- Identificare una classe come complex type con Entity Framework Code First
- Applicare effetti bitmap agli elementi di WPF
- Data binding con ADO.NET
- Utilizzare controlli ASP.NET iterativi annidati