Blazor meets JavaScript
12.02.2024, 00:00 Uhr
Die Blechtrommel
Kommunikation zwischen Blazor und JavaScript: mühsam, aber möglich.
Ein Klassiker des World Wide Web ist Atwood’s Law [1]. Formuliert wurde es von Jeff Atwood, unter anderem als Mitgründer von Stack Overflow und von Discord bekannt. Sein „Gesetz“ besagt: Jede Anwendung, die (theoretisch) mit JavaScript entwickelt werden kann, wird es irgendwann auch. Das war 2007, und etwa elf Jahre später versuchte Microsoft mit Blazor, dies gewissermaßen zu widerlegen: Ist es doch möglich, komplett ohne JavaScript (oder TypeScript) eine Webanwendung zu erstellen, gar eine Single Page Application. Natürlich stimmt das nicht so ganz, natürlich läuft im Browser Skriptcode, etwa um eine Verbindung mit dem Server aufrechtzuerhalten oder um WebAssembly zu initialisieren, aber Microsoft hat hier tatsächlich eine Nische gefunden: Insbesondere Unternehmensanwendungen von .NET-affinen Teams mit JavaScript-Aversion werden gerne mit Blazor umgesetzt, ganz ohne eigenen JavaScript-Code.
Es gibt jedoch immer wieder Szenarien, in denen dennoch Skriptcode notwendig ist. Ein typisches Beispiel ist der Zugriff auf JavaScript-APIs, um clientseitige Informationen (etwa die aktuelle Position, den Netzwerkzustand oder die Bildschirmauflösung) an den Server beziehungsweise an die Blazor-Anwendung zu übermitteln. Für diese JavaScript-Interoperabilität gibt es eine Reihe von Ansätzen, die zu unterschiedlichen Zeitpunkten in Blazor mit übernommen wurden. Wir setzen auf die aktuelle Long-Term-Support-Variante von Blazor als Ausgangsbasis und werfen einen Blick auf die verschiedenen Wege, von Blazor aus JavaScript-Code aufzurufen oder von JavaScript aus auf C#-Code zugreifen zu können. Das alles ist teilweise etwas mühsam und verwendet ein nicht unbedingt intuitives API, aber letzten Endes funktioniert es wie gewünscht. Legen wir los!
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar