Powiązanie danych i zdarzenia w rozwiązaniu Blazor Hybrid
Zdefiniowano interfejs użytkownika aplikacji internetowej. Teraz dowiesz się, jak dodać logikę do aplikacji. W aplikacji Blazor możesz dodać kod C# w osobnych plikach cs lub wbudowanych składnikach Razor.
Kod C# w tekście w składnikach
Mieszanie języków HTML i C# w jednym pliku składników Razor jest popularną praktyką. To rozwiązanie sprawdza się w przypadku prostych składników o mniejszych wymaganiach związanych z kodem. Aby dodać kod do pliku Razor, użyjesz składni Razor.
Co to są dyrektywy Razor?
Dyrektywy Razor to znaczniki składnika, umożliwiające dodanie kodu C# w tekście pliku HTML. Dyrektywy umożliwiają deweloperom definiowanie pojedynczych instrukcji, metod lub większych bloków kodu.
Dyrektywy kodu
Deweloperzy, którzy używali składni Razor na platformie MVC lub Pages, znają dyrektywy kodu.
Możesz użyć @expression() polecenia , aby dodać instrukcję języka C# w tekście z kodem HTML. Jeśli potrzebujesz więcej kodu, użyj @code dyrektywy , aby dodać wiele instrukcji ujętych w nawiasy.
Możesz również dodać sekcję @functions do szablonu dla metod i właściwości. Są one dodawane poza wygenerowaną klasą, gdzie można się do nich odwoływać w dokumencie.
Powiązania danych składni Razor
W ramach składników Razor można powiązać elementy HTML z danymi w polach, właściwościach i wartościach wyrażeń Razor. Powiązanie danych umożliwia dwukierunkową synchronizację między kodem HTML i kodem.
Gdy składnik jest renderowany, dane są wypychane z platformy HTML do platformy .NET. Składniki renderują się po wykonaniu kodu programu obsługi zdarzeń, dlatego aktualizacje właściwości są odzwierciedlane w interfejsie użytkownika natychmiast po wyzwoleniu programu obsługi zdarzeń.
Użyj @bind znaczników, aby powiązać zmienną C# z danymi wejściowymi HTML. W następnym ćwiczeniu zobaczysz przykład powiązania danych.