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
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Usare il versioning con i controller di ASP.NET Core Web API
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Creare gruppi di client per Event Grid MQTT
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Copiare automaticamente le secret tra più repository di GitHub