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
Combinare Container Queries e Media Queries
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Montare Azure Blob Storage su Linux con BlobFuse2
Utilizzare Locust con Azure Load Testing
Testare il failover sulle region in Azure Storage
Utilizzare WhenEach per processare i risultati di una lista di task
Loggare le query più lente con Entity Framework
Utilizzare Container Queries nominali
Supportare la sessione affinity di Azure App Service con Application Gateway
Utilizzare il nuovo modello GPT-4o con Azure OpenAI
Anonimizzare i dati sensibili nei log di Azure Front Door
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!