Nello scorso script (https://www.aspitalia.com/script/1338/Impostare-Focus-Controllo-Blazor-Tramite-JavaScript.aspx) abbiamo visto un primo esempio di come integrare i nostri componenti Blazor con il mondo JavaScript.
Invocare una funzione JavaScript con il servizio jsRuntime è un'operazione che si presta a errori sintattici. Infatti, il compilatore non opera alcuna verifica sugli argomenti che abbiamo fornito al metodo InvokeAsync o InvokeVoidAsync. Se dobbiamo riutilizzare la funzione JavaScript in più punti dell'applicazione è probabile che, prima o poi, sbaglieremo a digitare il nome della funzione o gli argomenti a essa forniti, senza che ci venga segnalato.
Per mitigare questo problema, possiamo fare in modo che la funzione JavaScript sia invocata con una sintassi fortemente tipizzata, che sia cioè più concisa, leggibile e soprattutto meno propensa a errori.
Per renderlo possibile, ci basta creare un extension method, cioè un metodo statico definito in una classe statica. Dunque creiamo un nuovo file di codice C#, ad esempio /Extensions/IJSRuntimeExtensions.cs, in cui mettiamo quanto segue.
namespace BlazorDemo.Extensions { public static class IJSRuntimeExtensions { public static async Task FocusElement(this IJSRuntime jsRuntime, string elementId) { await jsRuntime.InvokeVoidAsync("focusElement", elementId); } } }
Ogni volta che invochiamo questo extension method da un Razor Component, il compilatore potrà verificare che gli argomenti forniti siano nel numero e nel tipo previsti, avvisandoci puntualmente di eventuali problemi di digitazione. Inoltre, il nome della funzione JavaScript si trova incapsulato al suo interno, e ciò ridurrà ulteriormente la probabilità di errore.
Ecco come invocare l'extension method da un Razor Component.
await jsRuntime.FocusElement("searchBox");
Infine, ricordiamoci di aggiungere uno using nel file _Imports.razor, altrimenti l'extension method non verrebbe trovato e ciò produrrebbe un errore di compilazione.
@using BlazorDemo.Extensions
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Load test di ASP.NET Core con k6
Le novità di Angular: i miglioramenti alla CLI
Usare le variabili per personalizzare gli stili CSS
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Supporto ai tipi DateOnly e TimeOnly in Entity Framework Core
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare le collection expression in C#
Eseguire operazioni con timeout in React
I più letti di oggi
- Utilizzare Docker Compose con Azure App Service
- Utilizzare QuickGrid di Blazor con Entity Framework
- Modernizzare le applicazioni WPF e Windows Forms con Blazor
- ASP 3 per esempi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Steel Style CheckBox per Silverlight 4.0