Dall'archivio script > ASP.NET Core

Gestione file Javascript in Blazor con .NET 9

di Morgan PizziniMorgan Pizzini, in ASP.NET Core,

L'integrazione di librerie JavaScript in un'applicazione Blazor può diventare complessa, specialmente quando si tratta di moduli JavaScript. Con .NET 9, il processo di importazione di questi moduli è stato semplificato.

Supponiamo di avere un modulo JavaScript denominato toast.js per mostrare notifiche:

// toast.js
export class NotificationHelper {
  async showToast(message, type = 'info', options = {}) {
    // [..]
  }
}
export default new NotificationHelper();

In un componente Blazor, è possibile importare questo modulo e invocare i suoi metodi come segue:

@inject IJSRuntime JSRuntime

<button @onclick="() => ShowNotification("Hello World")">
    Mostra Notifica
</button>

@code {
  async Task ShowNotification(string message) {
    // caricamento modulo
    var module = await JSRuntime.InvokeAsync<IJSObjectReference>(
      "import", "./js/toast.js");
    // esecuzione metodo
    await module.InvokeVoidAsync("default.showToast", message, "success");
  }
}

Il codice carica il modulo toast.js e chiama il metodo showToast. Tuttavia, senza ulteriori configurazioni, il browser potrebbe memorizzare nella cache il modulo, causando problemi quando vengono apportate modifiche.

Grazie all'utilizzo di MapStaticAssets, già trattato nello script precedente, possiamo ovviare a questi problemi, lasciando che sia Blazor a gestire la distribuzione dei file javascript

// Rimozione chiamata UseStaticFiles
// app.UseStaticFiles();

app.MapStaticAssets();

A questo punto basterà apportare una modifica all'interno del tag head per lasciare che sia Blazor a creare automaticamente una mappa di importazione che colleghi i moduli JavaScript ai loro nomi di file univoci, rispettando il versionamento.

<!-- App.razor -->
<head>
  <!-- [...] -->
  <ImportMap />
</head>

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi