Interoperabilita JavaScriptu s Blazorem
- 5 min
Blazor používá komponenty jazyka C# místo JavaScriptu k vytváření webových stránek nebo oddílů HTML s dynamickým obsahem. K volání javascriptových knihoven JavaScriptu v aplikacích Blazor a volání funkcí JavaScriptu z kódu jazyka .NET C# ale můžete použít interoperabilitu JavaScriptu (JS).
V této lekci se naučíte volat JavaScript z kódu jazyka C# na stránce Blazor a jak vyvolat metody jazyka C# z funkcí JavaScriptu. V další lekci použijete komponentu upozornění z knihovny JavaScriptu k aktualizaci webu pro doručování pizzy Blazor.
Použití interoperability Blazor JavaScriptu
Typická komponenta Blazor používá k vykreslení kódu HTML za běhu rozložení a logiku uživatelského rozhraní. Kód jazyka C# slouží ke zpracování událostí a dalších dynamických funkcí stránky, které komunikují s uživatelem a externími službami. V mnoha případech nemusíte používat javascriptový kód. Místo toho můžete použít Blazor s knihovnami .NET, které poskytují mnoho ekvivalentních funkcí.
Někdy ale potřebujete použít existující javascriptovou knihovnu. Některé opensourcové knihovny JavaScriptu například vykreslují komponenty a zpracovávají prvky uživatelského rozhraní specializovaným způsobem. Nebo jste už možná vyzkoušeli a otestovali javascriptový kód, který chcete znovu použít místo toho, abyste ho převedli na C#.
JavaScriptové knihovny můžete do svých aplikací integrovat pomocí spolupráce Blazor s JavaScriptem nebo JS interop. K volání javascriptových funkcí z metod .NET a k vyvolání metod .NET z funkcí JavaScriptu použijete interop JS. Js interop zpracovává zařazování dat a objektů odkazů mezi Blazorem a JavaScriptem, aby se usnadnil přechod mezi nimi.
Načtení kódu JavaScriptu v aplikaci Blazor
JavaScript do aplikace Blazor přidáte stejným způsobem jako do standardní webové aplikace HTML pomocí elementu HTML <script> . Značku přidáte <script> za existující <script src="_framework/blazor.*.js"></script> značku v souboru Pages/_Host.cshtml nebo souboru wwwroot/index.html v závislosti na modelu hostování Blazor. Další informace najdete v tématu ASP.NET modely hostování Core Blazor.
Nejlepší není umístit skripty do <head> prvku stránky. Blazor řídí pouze obsah v <body> elementu stránky HTML, takže spolupráce JS může selhat, pokud skripty závisejí na Blazoru. Stránka se také může zobrazovat pomaleji kvůli době, která trvá parsování kódu JavaScriptu.
Značka <script> funguje stejně jako ve webové aplikaci HTML. Kód můžete napsat přímo do těla značky nebo můžete odkazovat na existující soubor JavaScriptu. Další informace najdete v tématu ASP.NET Interoperabilita JavaScriptu Core Blazor (JS interop): Umístění JavaScriptu.
Důležité
Soubory JavaScriptu umístěte do složky wwwroot projektu Blazor.
Další možností je vložit <script> prvek, který odkazuje na javascriptový soubor do stránky Pages/_Host.cshtml dynamicky. Tento přístup je užitečný, pokud potřebujete načíst různé skripty v závislosti na podmínkách, které je možné určit pouze za běhu. Tento přístup také může urychlit počáteční načtení aplikace, pokud aktivujete logiku událostí, která se aktivuje po vykreslení stránky. Další informace najdete v tématu ASP.NET spuštění Core Blazor.
Volání JavaScriptu z kódu .NET
Funkci JavaScriptu můžete IJSRuntime volat z kódu .NET. Pokud chcete zpřístupnit modul runtime zprostředkovatele komunikace JS, vložte instanci IJSRuntime abstrakce na stránku Blazor page za direktivu @page blízko začátku souboru.
Rozhraní IJSRuntime zveřejňuje InvokeAsync a InvokeVoidAsync metody pro vyvolání javascriptového kódu. Slouží InvokeAsync<TValue> k volání javascriptové funkce, která vrací hodnotu. Jinak zavolejte InvokeVoidAsync. Jak názvy naznačují, obě metody jsou asynchronní, takže k zachycení výsledků použijete operátor jazyka C# await .
Parametrem InvokeAsync nebo InvokeVoidAsync metodou je název funkce JavaScriptu, která se má vyvolat, následovaný libovolnými argumenty, které funkce vyžaduje. Funkce JavaScriptu musí být součástí window oboru nebo podskopu window. Argumenty musí být serializovatelné ve formátu JSON.
Poznámka:
Interoperabilita JS je k dispozici pouze v případech, kdy je mezi aplikací Blazor Server a prohlížečem navázáno připojení SignalR. Dokud se vykreslování nedokončí, nemůžete volat interop. Pokud chcete zjistit, zda je vykreslování dokončené, použijte události OnAfterRender nebo OnAfterRenderAsync ve svém kódu Blazor.
Použití objektu ElementReference k aktualizaci modelu DOM
Blazor udržuje reprezentaci modelu DOM (Document Object Model) jako virtuálního stromu vykreslování. Při změně struktury stránky vygeneruje Blazor nový strom vykreslování, který obsahuje rozdíly. Po dokončení změn blazor iteruje rozdíly, aby aktualizoval zobrazení prohlížeče uživatelského rozhraní a verzi prohlížeče MODELU DOM, kterou JavaScript používá.
Mnoho knihoven JavaScriptu třetích stran je k dispozici k vykreslení prvků na stránce a tyto knihovny mohou aktualizovat dom. Pokud kód JavaScriptu upraví prvky DOM, nemusí se kopie DOM v Blazoru už shodovat s aktuálním stavem. Tato situace může způsobit neočekávané chování a případně způsobit rizika zabezpečení. Není důležité provádět změny, které můžou způsobit poškození zobrazení DOM Blazor.
Nejjednodušší způsob, jak tuto situaci zvládnout, je vytvořit zástupný prvek v komponentě Blazor, obvykle prázdný <div @ref="placeHolder"></div> prvek. Kód Blazor interpretuje tento kód jako prázdné místo a strom vykreslení Blazor se nepokouší sledovat jeho obsah. Do tohoto kódu <div>můžete volně přidávat prvky kódu JavaScriptu a Blazor se ho nepokouší změnit.
Kód aplikace Blazor definuje pole typu ElementReference pro uložení odkazu na <div> prvek. Atribut @ref prvku <div> nastaví hodnotu pole. Objekt ElementReference pak předá funkci JavaScriptu, která může použít odkaz k přidání obsahu do elementu <div> .
Volání kódu .NET z JavaScriptu
Kód JavaScriptu může spustit metodu .NET, kterou kód Blazor definuje pomocí DotNet třídy utility, která je součástí knihovny interoperability JS. Třída DotNet zveřejňuje invokeMethod funkce a invokeMethodAsync pomocné funkce. Slouží invokeMethod ke spuštění metody a čekání na výsledek nebo k invokeMethodAsync asynchronnímu volání metody. Metoda invokeMethodAsync vrátí JavaScript Promise.
Návod
Pokud chcete zachovat rychlost odezvy v aplikacích, definujte metodu .NET jako asynca volejte ji pomocí JavaScriptu invokeMethodAsync .
Je nutné označit metodu .NET, která je volána pomocí JSInvokableAttribute. Metoda musí být publica všechny parametry musí být serializovatelné ve formátu JSON. Pro asynchronní metodu musí být voidnávratový typ , a Task, nebo obecný Task<T> objekt, kde T je serializovatelný typ JSON.
Chcete-li volat metodu static , zadejte název sestavení .NET, které obsahuje třídu, identifikátor metody a všechny parametry, které metoda přijímá jako argumenty nebo invokeMethodinvokeMethodAsync funkce. Ve výchozím nastavení je identifikátor metody stejný jako název metody, ale pomocí atributu můžete zadat jinou JSInvokable hodnotu.
Volání metody instance .NET z JavaScriptu
Ke spuštění metody instance vyžaduje JavaScript odkaz na objekt, který odkazuje na instanci. Interoperabilita JS poskytuje obecný DotNetObjectReference typ, který můžete použít k vytvoření odkazu na objekt v kódu .NET. Kód musí zpřístupnit tento odkaz na objekt pro JavaScript.
Kód JavaScriptu pak může volat invokeMethodAsync s názvem metody .NET a všechny parametry, které metoda vyžaduje. Aby nedošlo k nevracení paměti, měl by kód .NET odstranit odkaz na objekt, pokud už není potřeba.