Powiązanie danych i zdarzenia w rozwiązaniu Blazor Hybrid

Zdefiniowano interfejs użytkownika dla aplikacji internetowej. Teraz dowiesz się, jak dodać logikę do aplikacji. W aplikacji Platformy Blazor możesz dodać kod języka C# w osobnych plikach .cs lub wbudowanych w składnikach Razor.

Wbudowany język C# w składnikach

Częstą praktyką jest mieszanie kodu HTML i C# w jednym pliku składników Razor. W przypadku prostych składników z jaśniejszymi wymaganiami dotyczącymi kodu to podejście działa dobrze. Aby dodać kod do pliku Razor, użyjesz składni Razor.

Co to są dyrektywy Razor?

Dyrektywy Razor to elementy składni używane do dodawania kodu C# równocześnie z HTML. Dzięki dyrektywom deweloperzy mogą definiować pojedyncze instrukcje, metody lub większe bloki kodu.

Dyrektywy kodu

Dyrektywy kodu powinny być znane deweloperom, którzy używali składni Razor w mvC lub Pages.

Możesz użyć @expression(), aby dodać instrukcję języka C# w tekście z kodem HTML. Jeśli potrzebujesz więcej kodu, użyj dyrektywy @code, 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 do góry wygenerowanej klasy, gdzie dokument może się do nich odwoływać.

Powiązanie danych 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 a twoim kodem.

Dane są wypychane z kodu HTML do platformy .NET, gdy składnik jest renderowany. 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.