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
Utilizzare la session affinity con Azure Container Apps
Migrare una service connection a workload identity federation in Azure DevOps
Copiare automaticamente le secret tra più repository di GitHub
Utilizzare gli snapshot con Azure File shares
Creare form tipizzati con Angular
Assegnare un valore di default a un parametro di una lambda in C#
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Load test di ASP.NET Core con k6
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Creazione di componenti personalizzati in React.js con Tailwind CSS
I più letti di oggi
- C# 4
- Spaziatura tra i caratteri in Silverlight 5
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Segui in tempo reale il TechEd 2004
- da oggi è possibile fare login velocemente con LinkedIn e Google. a questi si aggiunge il supporto già attivo per Facebook, Twitter, Microsoft Account, Windows Hello e OpenID, per darvi sempre più possibilità di accedere semplicemente alla nostra community! #aspitalia
- Migrare una service connection a workload identity federation in Azure DevOps
- Evitare postback multipli in un UpdatePanel