Interoperabilität JavaScript und Blazor

Interoperabilität zwischen JavaScript und Blazor mit [JSInvokable]

‍

Blazor ist ein Web-Framework von Microsoft, das Entwicklern ermöglicht, C# anstelle von JavaScript für die Client-seitige Logik zu verwenden. Eine der wichtigsten Funktionen ist die Interoperabilität mit JavaScript, wodurch Entwickler die Stärken beider Sprachen kombinieren können.

In diesem Artikel wird ein praktisches Beispiel vorgestellt: Vier Rechtecke werden auf einer Webseite angezeigt. Beim Klicken auf ein Rechteck wird eine C#-Methode in Blazor über JavaScript aufgerufen, um die Position des Rechtecks zu bestimmen und anzuzeigen.

‍

Durchführung

1@using Microsoft.JSInterop
2@page "/rectangles"
3@inject IJSRuntime JS
4
5<h3>Position der Rechtecke</h3>
6<div id="rectanglesContainer">
7    <div id="rect1" class="rectangle">Rechteck 1</div>
8    <div id="rect2" class="rectangle">Rechteck 2</div>
9    <div id="rect3" class="rectangle">Rechteck 3</div>
10    <div id="rect4" class="rectangle">Rechteck 4</div>
11</div>
12
13<p id="positionInfo">@message</p>
14
15@code {
16    private string message = "Klicken Sie auf ein Rechteck, um die Position zu sehen.";
17    private string positionInfo = "Keine Position ausgewählt.";
18
19    protected override async Task OnAfterRenderAsync(bool firstRender)
20    {
21        if (firstRender)
22        {
23            await JS.InvokeVoidAsync("initializeRectangles", DotNetObjectReference.Create(this));
24        }
25    }
26
27    [JSInvokable]
28    public void DisplayPosition(string rectId, int x, int y)
29    {
30        message = $"Rechteck {rectId} -- Position: X = {x}px, Y = {y}px";
31        StateHasChanged();
32    }
33}
34
35<script>
36    window.initializeRectangles = (dotnetHelper) => {
37        const rectangles = document.querySelectorAll('.rectangle');
38
39        rectangles.forEach(rectangle => {
40            rectangle.addEventListener('click', () => {
41                const rect = rectangle.getBoundingClientRect();
42                const rectId = rectangle.id;
43                const x = Math.round(rect.left + window.scrollX);
44                const y = Math.round(rect.top + window.scrollY);
45
46                dotnetHelper.invokeMethodAsync('DisplayPosition', rectId, x, y)
47                    .catch(err => console.error(err));
48            });
49        });
50    };
51</script>

Die DisplayPosition-Methode wird mit dem Attribut [JSInvokable] deklariert. Dadurch kann sie von JavaScript aufgerufen werden. Diese Methode aktualisiert die Variable Message mit den Positionsdaten des angeklickten Rechtecks und löst eine UI-Aktualisierung aus.

1[JSInvokable]
2public void DisplayPosition(string rectId, int x, int y)
3{
4    message = $"Rechteck {rectId} -- Position: X = {x}px, Y = {y}px";
5    StateHasChanged(); // UI aktualisieren
6}

Die JavaScript-Funktion erkennt das Klickereignis auf den Rechtecken und ruft die C#-Methode in Blazor auf. Die Methode InvokeMethodAsync ermöglicht den asynchronen Aufruf der Blazor-Methode DisplayPosition und übergibt dabei die benötigten Parameter.

1dotnetHelper.invokeMethodAsync('DisplayPosition', rectId, x, y)
2    .catch(err => console.error(err));

Vorteile der Interoperabilität

• Echtzeit-Interaktionen: Die direkte Verbindung zwischen JavaScript und C#-Methoden sorgt für schnelle und reaktive Benutzererlebnisse. Besonders für Anwendungen mit hoher Interaktivität ist dies ein entscheidender Vorteil.
• Erweiterte Funktionalität: Entwickler können JavaScript für komplexe DOM-Manipulationen nutzen, während C# die Geschäftslogik und Datenverarbeitung übernimmt.
• Flexibilität und Integration: Die Integration bestehender JavaScript-Bibliotheken und -Frameworks in Blazor-Anwendungen ermöglicht eine effiziente Wiederverwendung bewährter Technologien.

Nachteile und Herausforderungen

• Fehleranfälligkeit: Kommunikationsfehler zwischen JavaScript und C# können schwer zu debuggen sein. Insbesondere asynchrone Aufrufe bergen Risiken, wenn sie nicht korrekt behandelt werden.
• Wartbarkeit: Der Mix aus JavaScript und C# kann den Code komplizierter machen. Änderungen in einer Sprache können unvorhergesehene Auswirkungen auf die andere haben.
• Sicherheitsaspekte: Die Exposition von C#-Methoden über [JSInvokable] kann Sicherheitsrisiken darstellen. Es ist essenziell, den Datenfluss abzusichern und nur autorisierte Daten zuzulassen.

‍

Fazit

Die Verwendung von [JSInvokable] in Kombination mit DotNet.InvokeMethodAsync bietet eine leistungsfähige Möglichkeit, die Interoperabilität zwischen JavaScript und Blazor zu realisieren. Diese Technologie vereint die Stärken beider Sprachen, um reaktive und flexible Benutzererlebnisse zu schaffen.

Entwickler sollten sich jedoch der zusätzlichen Komplexität bewusst sein, die diese Integration mit sich bringt. Mit einer sorgfältigen Planung und sicheren Implementierung kann diese Methode eine effektive Lösung für moderne Webanwendungen sein.

‍