Durante la navigazione web, capita di voler spostare l'attenzione dell'utente verso un'area specifica della pagina: nel caso del fallimento di una validazione all'interno di una form, lo scroll della pagina verso il controllo che presenta l'errore, aiuta l'utente alla presa visione e correzione.
All'interno di un'applicazione Blazor, scrivendo metodi che interagiranno con codice javascript, attraverso JSInterop, possiamo raggiungere facilmente l'obiettivo. La procedura ricalca quello abbiamo già visto in uno script precedente (https://www.aspitalia.com/script/1408/Aggiungere-Temi-Custom-Blazor.aspx), nel quale controllavamo il tema dell'applicazione.
Procediamo creando i metodi javascript che permetteranno di muovere la pagina verso uno specifico elemento. All'interno di wwwroot/index.html inseriamo quanto segue
<script> function scrollToElement(el) { var element = document.getElementById(el); element.scrollIntoView(); } </script>
A questo punto possiamo richiamare questa funzione all'interno di una pagina Blazor, tramite un'istanza di IJSRuntime.
@page "/" @inject IJSRuntime JsRuntime <button @onclick="OnButtonClick" class="btn btn-primary">Scroll</button> <div>...</div> <p id="text">Ciao</p> @code { private async void OnButtonClick() { await JsRuntime.InvokeVoidAsync("scrollToElement","text"); } }
Allo stesso modo protremmo prevedere un bottone "Torna in cima", creando in principio la funzione javascript che ci permetterà di tornare in cima alla pagina
<script> function scrollToTop() { document.documentElement.scrollTop = 0; } </script>
Richiamandola con le stesse modalità mostrate in precedenza all'interno della Razor page
@page "/" @inject IJSRuntime JsRuntime <div>...</div> <button @onclick="ScrollToTop" class="btn btn-primary">Scroll to Top</button> @code { private async void ScrollToTop() await JsRuntime.InvokeVoidAsync("scrollToTop"); } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzo di Set e Array in JavaScript
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare l'attributo HTML inert per disabilitare gli eventi
Leggere i dati di configurazione di ASP.NET Core da Azure Key Vault
Controllare gli accessi IP alle app con Azure Container Apps
Autenticazione basata su certificati con ASP.NET Core
Creare attributi generici in C#
Consumare un endpoint generico in Blazor
Organizzare il codice JavaScript utilizzando i moduli
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Utilizzare l'API del browser fetch