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