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
Migrare un repository che contiene large file storage objects in GitHub
Eseguire operazioni con timeout in React
Utilizzare flat e flatMap per appiattire array innestati in array
Determinare lo stato di un pod in Kubernetes
Controllare se un branch esiste nel remote con un workflow di GitHub
Aggiungere le issue di più repository in una board in GitHub
Generare file PDF da Blazor WebAssembly con iText
Verificare la provenienza di un commit tramite le GitHub Actions
Personalizzare le richieste con i rule set di Azure Front Door
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
Utilizzare la parola chiave file nel codice C#
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5