Trudny / egzaminacyjny · lekcja 30

Data binding i formularze w Blazor — @bind i EditForm

Zacznij tutaj

Po co się tego uczymy?

Formularze w Razor Pages (lekcje 6-7) wymagają wysłania CAŁEGO formularza (POST) i przeładowania strony, żeby zobaczyć wynik walidacji. Blazor pozwala na coś więcej — dwukierunkowe wiązanie danych (data binding) aktualizujące zmienne C# NATYCHMIAST, w miarę pisania, oraz walidację formularza bez przeładowania strony. Ta lekcja pokazuje mechanizm @bind i komponent EditForm — dokładnie ten sam poziom interaktywności formularzy, co w Angularze, tylko w C#.

Wprowadzenie

Teoria

@bind — dwukierunkowe wiązanie danych. <input @bind="imie" /> automatycznie: (1) wyświetla aktualną wartość zmiennej imie w polu, i (2) aktualizuje zmienną imie, gdy użytkownik coś wpisze. To BARDZO podobne do [(ngModel)] w Angularze albo Text="{Binding Właściwość, Mode=TwoWay}" z lekcji o modelach danych w dziale MAUI — ale znacznie prostsze w zapisie. Domyślnie @bind aktualizuje zmienną dopiero po opuszczeniu pola (zdarzenie change); żeby reagować na KAŻDE naciśnięcie klawisza, używa się @bind:event="oninput".

Komponent EditForm to specjalny, wbudowany komponent Blazor do budowy formularzy z walidacją — przyjmuje parametr Model (obiekt z danymi formularza) i zdarzenie OnValidSubmit (wywoływane TYLKO, gdy walidacja przeszła pomyślnie). Wewnątrz niego:

Komponent	Rola
`<DataAnnotationsValidator />`	włącza sprawdzanie atrybutów Data Annotations (te same `[Required]`, `[Range]` z lekcji 7!) na modelu formularza
`<ValidationSummary />`	pokazuje ZBIORCZĄ listę wszystkich błędów walidacji naraz
`<ValidationMessage For="@(() => Model.Nazwa)" />`	pokazuje błąd walidacji dla KONKRETNEGO pola
`<InputText @bind-Value="Model.Nazwa" />`	gotowa kontrolka tekstowa zintegrowana z `EditForm` (analogiczne: `InputNumber`, `InputDate`, `InputCheckbox`, `InputSelect`)

Ogromna zaleta: TA SAMA klasa modelu z Data Annotations z lekcji 7 działa BEZ ŻADNYCH zmian zarówno w Razor Pages/MVC, jak i w Blazor — reguły walidacji ([Required], [Range], [EmailAddress]...) są niezależne od tego, JAKIM mechanizmem UI budujesz formularz; to jeszcze jeden dowód, że wiedza zdobyta wcześniej w tym dziale przenosi się bezpośrednio na Blazor.

Walidacja NATYCHMIASTOWA, bez przeładowania strony. W przeciwieństwie do Razor Pages (gdzie błędy walidacji widać dopiero PO wysłaniu formularza, żądaniem POST i ponownym renderowaniem strony), EditForm w Blazor Server może pokazywać błędy na bieżąco, w miarę wypełniania pól, bo cały formularz "żyje" jako część interaktywnego komponentu, bez przeładowań.

Zobacz zależności

Schemat

<input @bind="imie" />
        │
        │  użytkownik wpisuje tekst
        ▼
zmienna imie (w bloku @code) aktualizuje się NATYCHMIAST
        │
        ▼
@imie w innym miejscu widoku pokazuje aktualną wartość (bez przeładowania)

EditForm Model="Produkt" OnValidSubmit="Zapisz"
   ├── DataAnnotationsValidator          (te same atrybuty co w lekcji 7!)
   ├── InputText @bind-Value="Produkt.Nazwa"
   │      └── ValidationMessage For="() => Produkt.Nazwa"
   ├── InputNumber @bind-Value="Produkt.Cena"
   └── button type="submit"
        │
        │  klik "Zapisz"
        ▼
sprawdzenie WSZYSTKICH atrybutów Data Annotations na Produkt
        │
   niepoprawne ──┴── poprawne
   │                     │
   ▼                     ▼
pokazanie błędów      wywołanie OnValidSubmit -> metoda Zapisz()
(bez przeładowania)   (np. zapis do bazy przez EF Core)

Połącz z praktyką

Przykład z życia

Formularz dodawania produktu w panelu sprzedawcy pokazuje błąd "Cena musi być dodatnia" NATYCHMIAST po wpisaniu ujemnej wartości, bez potrzeby klikania przycisku "Zapisz" i czekania na przeładowanie strony — to poziom płynności formularzy, jakiego użytkownicy oczekują dziś od nowoczesnych aplikacji, i dokładnie to oferuje EditForm w Blazor.