Seite 4: Interoperabilität mit JavaScript

Inhaltsverzeichnis

Die Save()-Methode fragt allerdings vorher noch nach, ob der Benutzer wirklich speichern will. Dazu kommt die JavaScript-Funktion confirm() zum Einsatz – einfach um zu zeigen, dass man aus Blazor heraus JavaScript aufrufen kann. Der JavaScript-Aufruf erfolgt über die statische Invoke()-Methode des eingebauten Objekts Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction. Bei Invoke() ist als erster Parameter der Funktionsname festzulegen. Alle weiteren Parameter werden an JavaScript übergeben.

Allerdings kann man so nicht direkt die confirm()-Funktion von JavaScript adressieren. Der Entwickler muss einen clientseitigen Wrapper bereitstellen, der per Methode registerFunction() in dem von Blazor.js bereitgestellten Blazor-Objekt die gewünschte JavaScript-Methode aufruft.

<script>
  Blazor.registerFunction('confirm', (text1, text2) => {
   return confirm(text1 + "\n" + text2);;
  });
 </script>

Diesen Wrapper sollte man nicht in die Komponentendatei einbauen, weil das Probleme mit dem virtual DOM bereitet. Stattdessen sollte man ihn in /wwwroot/index.html unter das Tag <script type="blazor-boot"> </script> einfügen. Abbildung 6 zeigt die neu erstellte Seite mit dem Bestätigungsdialog.

Es ist umgekehrt auch möglich, aus JavaScript heraus eine C#-Methode aufzurufen. Außerdem erlaubt Blazor schon heute, Webkomponenten oder Teile davon komplett in C#-Programmcode zu erzeugen, ganz dynamisch ohne eine Razor-Vorlagenseite. Neben onclick() unterstützt Blazor seit Version 0.3 zahlreiche DOM-Ereignisse (siehe Quellcode).