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
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Utilizzare Azure AI Studio per testare i modelli AI
.NET Aspire per applicazioni distribuite
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Gestione file Javascript in Blazor con .NET 9
Gestione degli eventi nei Web component HTML
Recuperare l'ultima versione di una release di GitHub
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Effettuare il refresh dei dati di una QuickGrid di Blazor
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Utilizzare WhenEach per processare i risultati di una lista di task