ASP.NET Core Projekte können/sollen um Bibliotheken erweitert oder bestehende genutzt werden. Der Visual Studio Projekttyp nennt sich Razor Class Library auch wenn er aus Blazor heraus genutzt wird.
Da nun Blazor allen Unkenrufen zum trotz niemals ohne Browser API Zugriffe auskommt und dafür nur JavaScript genutzt werden kann, legt man diese JS Dateien in die wwwroot Struktur.
Dort liegen im aspnetcore Projekt die statischen Datein wie HTML, CSS oder eben auch JS. Was folgt ist das übliche. Projekt Referenzieren und verwenden. Für eingebette Resource hat sich Microsoft eine spezielle Pfad Notation einfallen lassen. Diese Script Referenz wird dann _hosts.cshtml platziert. Eine Klasenbibliothek mit dem Standardnamen RazorClasslibrary1 und dem Script dazu im nicht vorhanden _content Directory
1: <script src="_framework/blazor.server.js"></script>
2: <script src="_content/RazorClassLibrary1/exampleJsInterop.js"></script>
Wie kann man sich diesen Schritt in Zeile 2 sparen? Immerhin eine latente Fehlerquelle und auch nervig für jede Lib eine Script Referenz setzen zu müssen.
Dafür bin ich in die tiefen von JavaScript eingetaucht. Grob gesagt folgender Ablauf
- der HTML Node Body bekommt ein Child
- Child ist ein Element Script
- Es wird ein Konfigurationsobjekt für die Attribute src und Type erzeugt
- Das Objekt wird dem Script per assign zugewiesen
Das erinnert mich daran warum ich diese Sprache hasse.
Dann nutze ich die JavaScript Bridge von Blazor. Damit lässt sich einen Funktion, samt Parameter aufrufen. Eine Zeile genau. Alles andere muss man in eine extra JS Resource Datei legen, die ich ha gerade einbinden will. Die Funktion in dem Fall Eval, der Parameter der an sich mehrzeilige JavaScript Code als Text.
1: public class ExampleJsInterop
2: {
3: [Inject]
4: public IJSRuntime JsRuntime { get; set; }
5: public static void LoadJS(IJSRuntime jsRuntime)
6: {
7: jsRuntime.InvokeVoidAsync(
8: "eval",
9: "document.body.appendChild(
Object.assign( document.createElement('script'),
{ src: '_content/RazorClassLibrary1/exampleJsInterop.js',
type: 'text/javascript' }));");
10: }
Der Aufruf dieser LoadJS Hilfsmethode muss/kann in der Blazor Page/Component erfolgen. Aber erst wenn die Seite durchs rendering durch ist.
1: protected override async Task OnAfterRenderAsync(bool firstRender)
2: {
3: if (firstRender)
4: {
5: RazorClassLibrary1.ExampleJsInterop.LoadJS(jsRuntime);
6: }
7: }