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 parola chiave nameof per referenziare i nomi dei parametri di un metodo in C#
Utilizzare il metodo reduce in JavaScript
3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
Confronto tra moduli in Javascript: ES e commonJS
Organizzare il codice JavaScript utilizzando i moduli
Caricare automaticamente i dati delle relazioni in EF Core 6
Utilizzare le Promise in Javascript - seconda parte
Velocizzare l'installazione delle dipendenze in un workflow di GitHub
Bloccare una pull request che arriva da branch non definiti in GitHub
Scrivere CSS Media Query utilizzando una range syntax
Ottimizzare le performance di serializzazione e deserializzazione JSON con System.Text.Json e i source generators
Modernizzare le applicazioni WPF e Windows Forms con Blazor
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!