Principes de base de Blazor : appeler .NET à partir de JavaScript

Nous apprenons à appeler des méthodes .NET à partir de fonctions JavaScript dans les applications Blazor Server et Blazor WebAssembly.

JavaScript est très populaire pour le développement Web. Avec Blazor, nous disposons d’une alternative qui nous permet d’utiliser C# au lieu de JavaScript pour créer des applications Web modernes et interactives sur une seule page.

Mais parfois, nous souhaitons tirer parti du code JavaScript existant.

Dans un article précédent de cette série, nous avons appris à intégrer du code JavaScript dans une application Web Blazor en appelant du code JavaScript à partir de notre code C#. Dans cet article, nous souhaitons découvrir l’inverse. Nous apprendrons comment appeler du code .NET à partir de JavaScript.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Appel d’une méthode C# simple à partir de JavaScript

Nous voulons construire un application de chat simple dans lequel les messages de discussion sont créés en code JavaScript et envoyés à un composant Blazor.

Nous commençons par implémenter le composant Blazor. Pour cet exemple, j’ai créé un Serveur Blazor application Web utilisant le Application Web Blazor modèle de projet fourni avec .NET 8.

Indice: N’hésitez pas si vous préférez l’interactivité de Blazor WebAssembly. Le code d’interopérabilité que je partage dans cet article fonctionne également pour Blazor WebAssembly.

Nous implémentons l’application de chat à l’intérieur du Home composant de page.

@page "https://www.telerik.com/"
@rendermode InteractiveServer
@inject IJSRuntime JS
@implements IDisposable

<PageTitle>Home</PageTitle>

<h1>Chat from JavaScript!</h1>
<h2>Messages</h2>

@foreach (var message in ChatMessages)
{
    <p>@message</p>
}

Nous utilisons le @page directive telle que générée par le modèle de projet pour rendre le Home composant un page routable composant.

Le @rendermode est requise lors de l’utilisation d’un per page/composant lieu d’interactivité lors de la génération du projet. Si vous disposez d’une application d’interactivité Blazor Server globale, vous n’avez pas besoin de cette ligne.

Le @inject IJSRuntime La directive donne accès au runtime JavaScript.

Le @implement IDisposable La directive permet à ce composant d’implémenter la Dispose méthode. Nous découvrirons pourquoi nous devons mettre en œuvre le IDisposable interface lors de la mise en œuvre du comportement du Home composant.

Le code du composant utilise le PageTitle composant pour rendre le titre visible dans la fenêtre ou l’onglet du navigateur.

Ensuite, nous utilisons des éléments HTML statiques pour afficher les en-têtes.

La partie la plus intéressante du code du modèle est la foreach où nous restituons les messages de discussion stockés dans le ChatMessages propriété utilisant un élément de paragraphe HTML.

Maintenant, implémentons le code interactif dans le @code section.

@code {
    public IList<string> ChatMessages { get; set; } = new List<string>();
    public DotNetObjectReference<Home>? DotNetReference { get; set; }
}

Nous avons deux propriétés. La première propriété, ChatMessages de type IList<string>contient les messages de discussion que nous souhaitons afficher sur la page.

La deuxième propriété, appelée DotNetReference du générique DotNetObjectReference type, contient une référence à un type .NET. Dans notre scénario, utilisez Home comme argument de type générique puisque nous voulons passer une référence au Home composant au code JavaScript.

Ensuite, nous implémentons trois méthodes. Nous commençons par le OnAfterRender méthode du cycle de vie.

protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);

    if (firstRender)
    {
        DotNetReference = DotNetObjectReference.Create(this);
        JS.InvokeVoidAsync("generateChatMessages", DotNetReference);
    }
}

Dans le OnAfterRender méthode du cycle de vie, nous appelons la méthode de la classe de base et vérifions si cette exécution est le premier rendu du composant.

Dans le cas du premier rendu, nous créons une référence à l’objet .NET en utilisant le static DotNetObjectReference.Create méthode. Nous fournissons ceci comme argument parce que nous voulons créer une référence au Home composant que nous mettons actuellement en œuvre.

Ensuite, nous utilisons la propriété JS et son InvokeVoidAsync méthode pour appeler une fonction JavaScript à partir du code .NET. Dans cet exemple, c’est notre façon d’appeler le code JavaScript, que nous utiliserons plus tard pour appeler le code .NET.

Nous mettrons en œuvre le generateChatMessages fonction ci-dessous.

Tout d’abord, nous souhaitons implémenter la méthode que nous appellerons à partir du code JavaScript.

[JSInvokable("AddMessage")]
public Task AddChatMessage(string message)
{
    ChatMessages.Add(message);
    StateHasChanged();

    return Task.CompletedTask;
}

Nous marquons le AddChatMessage méthode avec le JSInvokable attribut. Nous devons ajouter le JSInvokable attribut à toute méthode que nous souhaitons mettre à disposition de JavaScript. Nous pouvons fournir le nom de la fonction à l’argument chaîne des attributs.

De plus, nous avons besoin que la méthode à laquelle nous voulons accéder depuis JavaScript soit un public méthode.

Dans l’implémentation de la méthode, nous ajoutons le message reçu au ChatMessages propriété utilisant son Add méthode. Et nous renvoyons une `Task terminée.

Conseil: Si nous utilisons async méthodes d’interopérabilité JavaScript, nous prenons en charge les deux cas, Serveur Blazor et Blazor WebAssembly. Par conséquent, il est préférable d’utiliser async méthodes pour Interopérabilité JavaScript à Blazor.

Nous avons maintenant la méthode qui crée la référence à l’objet .NET et la méthode que nous voulons appeler depuis JavaScript. La dernière méthode dont nous avons besoin est la Dispose méthode.

public void Dispose()
{
    GC.SuppressFinalize(this);

    if (DotNetReference != null)
    {
        DotNetReference.Dispose();
    }
}

Dans le Dispose méthode, nous appelons la GC.SuppressFinalize méthode, et s’il y a une référence à l’intérieur de la DotNetReference propriété, nous l’appelons Dispose méthode.

Indice: Pour éviter une fuite de mémoire, il est important d’implémenter le Dispose méthode et appelez-la sur des propriétés ou des variables de type DotNetObjectReference pour libérer des ressources lorsque le composant Blazor est éliminé.

Le code Javascript

Maintenant que nous avons le composant Blazor et implémenté les trois méthodes C# requises, nous devons implémenter le code JavaScript référencé.

Rappelez-vous, nous appelons un generateChatMessages Fonction JavaScript à l’intérieur du OnAfterRender méthode.

Nous ajoutons un scripts.js fichier dans le wwwroot dossier du projet et ajoutez une référence à ce fichier JavaScript dans le App.razor déposer:

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    
    <script src="script.js"></script>
</body>

À l’intérieur du script.js fichier, nous ajoutons ce qui suit generateChatMessages Fonction Javascript :

function generateChatMessages(dotnetObjectReference) {
    dotnetObjectReference.invokeMethodAsync("AddMessage", "Hello from JavaScript!")
    setTimeout(() => {
        dotnetObjectReference.invokeMethodAsync("AddMessage", "Are you still there?!")
    }, 2000);
    setTimeout(() => {
        dotnetObjectReference.invokeMethodAsync("AddMessage", "Blazor and JavaScript live side-by-side!")
    }, 5000);
}

La fonction accepte un seul paramètre, la référence à l’objet .NET que nous transmettons lors de l’appel de la fonction JavaScript.

Nous utilisons ensuite le invokeMethodAsync et fournissez le nom de la méthode comme premier paramètre et l’argument de la méthode comme deuxième paramètre. Dans notre cas, c’est le message de chat.

Nous envoyons d’abord un message de chat qui devrait s’afficher dès le lancement de l’application. Ensuite, nous avons deux autres messages que nous envoyons après une courte période. Nous utilisons le setTimeout fonctionner et fournir deux et cinq secondes comme délai d’attente.

Maintenant que tout est en place, nous construisons et exécutons l’application et nous devrions voir les messages de discussion apparaître un par un dans le navigateur. Après cinq secondes, le site Web devrait ressembler à ceci :

Appel d’une méthode C# renvoyant une valeur

Maintenant que nous avons notre exemple en place, nous souhaitons l’intensifier et non seulement appeler du code .NET à partir d’une fonction JavaScript, mais également recevoir des données d’une méthode C#.

Nous ajoutons un GetName méthode à la Home composant.

[JSInvokable]
public Task<string> GetName()
{
    return Task.FromResult("Claudio Bernasconi");
}

Encore une fois, nous utilisons un Task comme type de retour d’une méthode que nous voulons appeler depuis JavaScript. Encore une fois, nous utilisons le JSInvoke attribut pour le rendre accessible à JavaScript.

Cette fois, nous n’apportons pas d’argument au JSInvoke attribut. Cela signifie que nous devons maintenant utiliser le GetName nom de la méthode pour accéder à la méthode à partir de JavaScript.

Nous renvoyons mon nom comme valeur de retour statique de type string.

Dans le script.js fichier, on en ajoute un autre setTimeout déclaration au generateChatMessages fonction:

setTimeout(async () => {
    const name = await dotnetObjectReference.invokeMethodAsync("GetName")
    dotnetObjectReference.invokeMethodAsync("AddMessage", "Your name is: " + name + ".")
}, 3000);

Après trois secondes, nous utilisons le invokeMethodAsync appeler le GetName méthode. Nous utilisons ensuite la valeur de retour de cette méthode et la passons comme argument à un appel supplémentaire au AddMessage méthode.

En conséquence, le nom défini dans le code C# sera envoyé à la fonction JavaScript puis renvoyé au code .NET et affiché sous la forme d’un autre message de discussion à l’intérieur du Home composant.

Créons et exécutons l’application une fois de plus.

Cette fois, après quelques secondes, nous voyons quatre messages de chat apparaître dans l’application web Blazor.

Conclusion

Il existe des options d’interopérabilité du code JavaScript vers .NET beaucoup plus avancées, telles que le renvoi de tableaux et l’appel de méthodes statiques, etc.

Cependant, les exemples présentés dans cet article sont les solutions d’interopérabilité fondamentales que j’ai le plus utilisées dans mes applications Blazor, et je pense que ce sont les scénarios les plus courants.

Nous avons appris comment appeler une méthode C# à partir d’une fonction JavaScript et nous avons appris à utiliser valeurs de retour (à partir d’une méthode C#) en code JavaScript.

Même si j’ai utilisé Serveur Blazor interactivité dans cet exemple, vous pouvez également utiliser Blazor WebAssembly interactivité en utilisant la même interopérabilité JavaScript approche.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.