Negli ultimi script abbiamo proposto un paio di esempi (https://www.aspitalia.com/script/1338/Impostare-Focus-Controllo-Blazor-Tramite-JavaScript.aspx e https://www.aspitalia.com/script/1339/Invocare-Funzioni-JavaScript-Maniera-Fortemente-Tipizzata-Blazor.aspx) su come interagire con il mondo JavaScript dai nostri componenti Blazor.
Proseguendo sul medesimo caso d'uso di impostare il focus su un particolare elemento della pagina, possiamo apportare ancora una miglioria alla nostra invocazione. L'obiettivo, questa volta, è eliminare anche la stringa con cui indichiamo l'id dell'elemento su cui porre il focus. Andiamo quindi a correggere il Razor Component in questo modo.
@page "/" @inject IJSRuntime jsRuntime <input type="search" @ref="searchBox" placeholder="Cerca..." /> @code { ElementReference searchBox; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await jsRuntime.FocusElement(searchBox); } } }
In questo caso abbiamo posto l'attributo @ref sulla casella di testo, che ci permette di ottenere il riferimento a quell'elemento HTML e di conservarlo in un campo privato di tipo ElementReference. Tale riferimento viene quindi fornito come argomento all'extension method, che aggiorniamo come segue.
namespace BlazorDemo.Extensions { public static class IJSRuntimeExtensions { public static async Task FocusElement(this IJSRuntime jsRuntime, ElementReference element) { await jsRuntime.InvokeVoidAsync("focusElement", element); } } }
E, per finire, dobbiamo anche aggiornare la funzione JavaScript focusElement, che ora riceverà il riferimento all'elemento stesso, anziché il suo id.
function focusElement(element) { element.focus(); }
In questo modo, con pochi e semplici passi, siamo riusciti a rendere fortemente tipizzate anche le invocazioni a funzioni JavaScript.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Filtering sulle colonne in una QuickGrid di Blazor
Creare una custom property in GitHub
Eseguire query verso tipi non mappati in Entity Framework Core
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Evitare la script injection nelle GitHub Actions
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Ottenere un token di accesso per una GitHub App
Miglioramenti nelle performance di Angular 16
Assegnare un valore di default a un parametro di una lambda in C#
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Usare un KeyedService di default in ASP.NET Core 8
I più letti di oggi
- anche domani dalle 17:30 seguite con noi live #build15 https://aspit.co/build15
- Webcast 'AJAX & ATLAS Overview'
- a #igds il 25 e 26/10 a Milano puoi sviluppare un gioco per #wp8 con @AppCampus. in palio 70.000 Euro: https://aspit.co/apa
- WinJS in Windows Phone 8.1
- la RC di #vs13 è compatibile con #win81 RTM, non con la Preview. l'annuncio ufficiale è su https://aspit.co/any
- Ancora un bug: esce Mono 0.23
- SSL Certificates for everyone on Azure
- Mostrare una MessageBox con un custom control
- disponibile la preview 1 ci #dotnetcore 2.1, #aspnetcore, #efcore. performance, novità e migliorie su https://aspit.co/bmf
- si continua a #netconfit con 'developing modern web apps with #aspnetcore', con il nostro @dbochicchiohttps://aspit.co/netconf-18