Introduction
Bien que Blazor permette de créer des applications web interactives en utilisant C# plutôt sans "JavaScript". Il arrive souvent que nous devions intégrer du JavaScript pour tirer parti de certaines bibliothèques ou fonctionnalités.
C'est là qu'intervient l'isolation JavaScript, une fonctionnalité introduite avec Blazor qui permet une manipulation plus propre et organisée des scripts. Dans cet article, nous allons explorer comment isoler votre code JavaScript dans Blazor avec .NET 10.
Pourquoi utiliser l'Isolation JavaScript ?
L'isolation JavaScript offre plusieurs avantages :
- Réduction des conflits : Évitez les collisions entre les fichiers JavaScript.
- Meilleure organisation : Gardez vos fichiers JavaScript séparés par composants.
- Facilité de maintenance : Modifiez un fichier JavaScript sans toucher à l'ensemble de l'application.
Intégration du JavaScript dans un composant Blazor
Si le fichier se nomme mycomponent.razor, alors on peut ajouter un fichier mycomponent.razor.js. Dans Visual Studio il sera affiché sous le composant.
voici le contenu du fichier javascript :
export function showAlert(message) {
alert(message);
}Maintenant, nous allons intégrer ce fichier JavaScript dans un composant Blazor. Ouvrez ou créez un fichier MyComponent.razor dans le dossier Pages et ajoutez le code suivant :
@page "/mycomponent"
@inject IJSRuntime JSRuntime
@code {
private IJSObjectReference? jsModule;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
"import", "./_content/Pages/mycomponent.razor.js");
}
async Task Alert(string message)
{
jsModule.InvokeVoidAsync("showAlert", message);
}
}
<h3>Mon Composant avec JavaScript Isolé</h3>
<button @onclick="@(() => Alert("message alerte"))">Afficher l'alerte</button>Conclusion
L'isolation JavaScript dans Blazor et .NET 10 offre une méthode efficace pour intégrer des scripts JavaScript tout en gardant votre code organisé et maintenable.