Współdziałanie języka JavaScript z platformą Blazor
- 5 min
Platforma Blazor używa składników języka C# zamiast języka JavaScript do tworzenia stron internetowych lub sekcji HTML z zawartością dynamiczną. Można jednak użyć współdziałania języka JavaScript platformy Blazor (międzyoperacyjności JS) do wywoływania bibliotek Języka JavaScript w aplikacjach Blazor i wywoływania funkcji Języka JavaScript z poziomu kodu platformy .NET C#.
W tej lekcji dowiesz się, jak wywołać kod JavaScript z kodu języka C# na stronie platformy Blazor oraz jak wywoływać metody języka C# z funkcji Języka JavaScript. W następnej lekcji użyjesz składnika alertu z biblioteki Języka JavaScript, aby zaktualizować witrynę internetową dostarczania pizzy Blazor.
Korzystanie z współdziałania języka JavaScript platformy Blazor
Typowy składnik platformy Blazor używa logiki układu i interfejsu użytkownika do renderowania kodu HTML w czasie wykonywania. Kod języka C# służy do obsługi zdarzeń i innych dynamicznych funkcji strony, które współdziałają z użytkownikiem i usługami zewnętrznymi. W wielu przypadkach nie trzeba używać kodu JavaScript. Zamiast tego można użyć platformy Blazor z bibliotekami platformy .NET, które zapewniają wiele równoważnych możliwości.
Jednak czasami trzeba użyć istniejącej biblioteki Języka JavaScript. Na przykład niektóre biblioteki Języka JavaScript typu open source renderować składniki i obsługiwać elementy interfejsu użytkownika w wyspecjalizowany sposób. Możesz też użyć istniejącego wypróbowanego i przetestowanego kodu JavaScript, który chcesz użyć ponownie, zamiast konwertować go na język C#.
Biblioteki JavaScript można zintegrować z aplikacjami przy użyciu interoperacyjności Blazor JavaScript lub JS interop. Interop JS służy do wywoływania funkcji Języka JavaScript z metod platformy .NET i wywoływania metod platformy .NET z funkcji języka JavaScript. Interop JS obsługuje przeprowadzanie marshalingu odwołań do danych i obiektów między platformami Blazor i JavaScript w celu ułatwienia przejścia między nimi.
Ładowanie kodu JavaScript w aplikacji Blazor
Język JavaScript można dodać do aplikacji Blazor w taki sam sposób, jak do standardowej aplikacji internetowej HTML przy użyciu elementu HTML <script> . Dodajesz tag <script> po istniejącym <script src="_framework/blazor.*.js"></script> w pliku Pages/_Host.cshtml lub wwwroot/index.html, w zależności od modelu hostingu Blazor. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor modele hostingu.
Najlepiej nie umieszczać skryptów w <head> elemenie strony. Platforma Blazor kontroluje tylko zawartość elementu <body> strony HTML, więc interop JS może zakończyć się niepowodzeniem, jeśli skrypty zależą od platformy Blazor. Ponadto strona może być wyświetlana wolniej ze względu na czas analizowania kodu JavaScript.
Tag <script> działa tak samo jak w aplikacji internetowej HTML. Kod można napisać bezpośrednio w treści tagu lub odwołać się do istniejącego pliku JavaScript. Aby uzyskać więcej informacji, zobacz ASP.NET Core Blazor interoperacyjność JavaScriptu (JS interop): Lokalizacja JavaScriptu.
Ważne
Umieść pliki JavaScript w folderze wwwroot projektu Blazor.
Inną opcją jest dynamicznie wstrzyknąć element <script>, który odwołuje się do pliku JavaScript do strony Pages/_Host.cshtml. Takie podejście jest przydatne, jeśli trzeba załadować różne skrypty w zależności od warunków, które można określić tylko w czasie wykonywania. Takie podejście może również przyspieszyć początkowe ładowanie aplikacji, jeśli wyzwolisz logikę z zdarzeniem, które jest uruchamiane po renderowaniu strony. Aby uzyskać więcej informacji, zobacz uruchamianie ASP.NET Core Blazor.
Wywoływanie kodu JavaScript z platformy .NET
Element służy IJSRuntime do wywoływania funkcji JavaScript z kodu platformy .NET. Aby udostępnić środowisko uruchomieniowe międzyoperacyjne JS, należy wstrzyknąć wystąpienie IJSRuntime abstrakcji do strony Blazor po @page dyrektywie w pobliżu początku pliku.
Interfejs IJSRuntime uwidacznia InvokeAsync metody i InvokeVoidAsync do wywoływania kodu JavaScript. Użyj InvokeAsync<TValue> polecenia , aby wywołać funkcję Języka JavaScript, która zwraca wartość. W przeciwnym razie wywołaj metodę InvokeVoidAsync. Jak sugerują nazwy, obie metody są asynchroniczne, więc do przechwytywania wyników używa się operatora języka C# await .
Parametr metody InvokeAsync or InvokeVoidAsync jest nazwą funkcji JavaScript do wywołania, a następnie dowolnymi argumentami, których wymaga funkcja. Funkcja JavaScript musi być częścią window zakresu lub podzakresu .window Argumenty muszą być serializowalne w formacie JSON.
Uwaga
JS interop jest dostępny tylko wtedy, gdy połączenie SignalR zostanie nawiązane między aplikacją Blazor Server a przeglądarką. Nie można wykonywać wywołań międzyoperaowych, dopóki renderowanie nie zostanie ukończone. Aby wykryć, czy renderowanie zostało zakończone, użyj zdarzenia OnAfterRender lub OnAfterRenderAsync w swoim kodzie Blazor.
Aktualizowanie modelu DOM za pomocą obiektu ElementReference
Platforma Blazor utrzymuje reprezentację modelu obiektów dokumentów (DOM) jako wirtualnego drzewa renderowania. W miarę zmiany struktury strony platforma Blazor generuje nowe drzewo renderowania zawierające różnice. Po zakończeniu wprowadzania zmian platforma Blazor iteruje różnice w celu zaktualizowania wyświetlania w przeglądarce interfejsu użytkownika i wersji przeglądarki modelu DOM używanego przez język JavaScript.
Wiele bibliotek języka JavaScript innych firm jest dostępnych do renderowania elementów na stronie, a te biblioteki mogą aktualizować dom. Jeśli kod JavaScript modyfikuje elementy modelu DOM, kopia platformy Blazor modelu DOM może nie być już zgodna z bieżącym stanem. Taka sytuacja może spowodować nieoczekiwane zachowanie i ewentualnie wprowadzić zagrożenia bezpieczeństwa. Ważne jest, aby nie wprowadzać zmian, które mogą spowodować uszkodzenie widoku blazor modelu DOM.
Najprostszym sposobem obsługi tej sytuacji jest utworzenie elementu zastępczego w składniku blazor, zwykle pusty <div @ref="placeHolder"></div> element. Kod blazor interpretuje ten kod jako puste miejsce, a drzewo renderowania Platformy Blazor nie próbuje śledzić jego zawartości. Możesz swobodnie dodawać do niego <div>elementy kodu JavaScript, a platforma Blazor nie próbuje jej zmienić.
Kod aplikacji Platformy Blazor definiuje pole typu ElementReference do przechowywania odwołania do <div> elementu. Atrybut w elemecie @ref<div> ustawia wartość pola. Następnie ElementReference obiekt przekazuje do funkcji JavaScript, która może używać odwołania do dodawania zawartości do <div> elementu.
Wywoływanie kodu platformy .NET z poziomu języka JavaScript
Kod JavaScript może uruchamiać metodę platformy .NET, którą kod platformy Blazor definiuje przy użyciu DotNet klasy narzędzi, części biblioteki międzyoperacyjnej JS. Klasa DotNet uwidacznia invokeMethod funkcje pomocnicze i invokeMethodAsync . Użyj invokeMethod polecenia , aby uruchomić metodę i poczekać na wynik, lub użyć metody invokeMethodAsync , aby wywołać metodę asynchronicznie. Metoda invokeMethodAsync zwraca kod JavaScript Promise.
Napiwek
Aby zachować czas odpowiedzi w aplikacjach, zdefiniuj metodę .NET jako asynci wywołaj ją przy użyciu języka invokeMethodAsync JavaScript.
Musisz otagować wywoływaną metodę .NET za pomocą metody JSInvokableAttribute. Metoda musi mieć publicwartość , a wszystkie parametry muszą być serializowalne w formacie JSON. Ponadto w przypadku metody asynchronicznej zwracany typ musi mieć voidwartość , Tasklub obiekt ogólny Task<T> , w którym T jest typem serializowalnym JSON.
Aby wywołać metodę static , należy podać nazwę zestawu .NET, który zawiera klasę, identyfikator metody i wszystkie parametry, które metoda przyjmuje jako argumenty do invokeMethod funkcji lub invokeMethodAsync . Domyślnie identyfikator metody jest taki sam jak nazwa metody, ale można określić inną wartość przy użyciu atrybutu JSInvokable .
Wywoływanie metody wystąpienia platformy .NET z poziomu języka JavaScript
Aby uruchomić metodę wystąpienia, język JavaScript wymaga odwołania do obiektu wskazującego wystąpienie. Interop JS udostępnia typ ogólny DotNetObjectReference , którego można użyć do utworzenia odwołania do obiektu w kodzie platformy .NET. Kod musi udostępnić to odwołanie do obiektu w języku JavaScript.
Kod JavaScript może następnie wywołać invokeMethodAsync metodę z nazwą metody .NET i dowolnymi parametrami wymaganymi przez metodę. Aby uniknąć przecieków pamięci, kod platformy .NET powinien usuwać odwołanie do obiektu, gdy nie jest już potrzebne.