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
Paginare i risultati con QuickGrid in Blazor
Creare alias per tipi generici e tuple in C#
Usare una container image come runner di GitHub Actions
Generare file per il download da Blazor WebAssembly
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Sfruttare lo streaming di una chiamata Http da Blazor
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Eseguire una GroupBy per entity in Entity Framework
Creare form tipizzati con Angular
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Disabilitare automaticamente un workflow di GitHub (parte 2)
- Paginare i risultati con QuickGrid in Blazor
- Ottimizzazione dei block template in Angular 17