Powiązania danych i zdarzenia

Ukończone

Przyjrzyjmy się sposobom definiowania logiki renderowania składników i obsługi zdarzeń interfejsu użytkownika.

Renderowanie wartości wyrażeń języka C#

Jeśli chcesz renderować wartość wyrażenia języka C# w języku Razor, należy użyć znaku wiodącego @ . Na przykład Counter składnik może renderować wartość pola w currentCount następujący sposób:

<p role="status">Current count: @currentCount</p>

Razor może zwykle ustalić, kiedy kończy się wyrażenie języka C# i przechodzisz z powrotem do pisania kodu HTML. Można jednak również jawnie określić początek i zakończenie wyrażenia przy użyciu parensów.

<p role="status">Current count: @(currentCount)</p>

Dodawanie przepływu sterowania

Przepływ sterowania można dodać do logiki renderowania składników przy użyciu normalnych instrukcji języka C#. Na przykład możesz warunkowo renderować część zawartości przy użyciu instrukcji if-instrukcji języka C#, w następujący sposób:

@if (currentCount > 3)
{
    <p>You win!</p>
}

Możesz również użyć języka C# do pętli danych i renderowania listy elementów:

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Obsługa zdarzeń

Składniki platformy Blazor często obsługują zdarzenia interfejsu użytkownika. Aby określić wywołanie zwrotne zdarzeń z elementu interfejsu użytkownika, należy użyć atrybutu rozpoczynającego się od @on i kończącego się nazwą zdarzenia. Można na przykład określić metodę IncrementCount jako procedurę obsługi zdarzenia kliknięcia przycisku przy użyciu atrybutu @onclick , w następujący sposób:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Można również określić programy obsługi zdarzeń języka C# dla innych zdarzeń HTML, takich jak @onchange, @oninputi tak dalej. Metody obsługi zdarzeń mogą być synchroniczne lub asynchroniczne. Programy obsługi zdarzeń można również zdefiniować w tekście przy użyciu wyrażeń lambda języka C#:

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

Metody obsługi zdarzeń mogą opcjonalnie przyjmować argument zdarzenia z informacjami o zdarzeniu. Na przykład możesz uzyskać dostęp do wartości zmienionego elementu wejściowego, w następujący sposób:

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

Po uruchomieniu programu obsługi zdarzeń platforma Blazor automatycznie renderuje składnik ze swoim nowym stanem, więc komunikat jest wyświetlany po wprowadzeniu zmian.

Powiązanie danych

Często wartość elementu interfejsu użytkownika ma być powiązana z określoną wartością w kodzie. Gdy wartość elementu interfejsu użytkownika zmieni się, wartość kodu powinna ulec zmianie, a gdy wartość kodu zmieni element interfejsu użytkownika, powinien wyświetlić nową wartość. Obsługa powiązania danych platformy Blazor ułatwia konfigurowanie tego rodzaju dwukierunkowego powiązania danych.

Element interfejsu użytkownika jest powiązany z określoną wartością w kodzie przy użyciu atrybutu @bind . Na przykład:

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Po zmianie wartości danych wejściowych text pole zostanie zaktualizowane o nową wartość. A gdy zmienisz wartość text pola, klikając przycisk Wyczyść, wartość danych wejściowych również zostanie wyczyszczone.

Dyrektywy Razor

Dyrektywy Razor to zastrzeżone słowa kluczowe w składni Razor, które wpływają na sposób kompilowania pliku Razor. Dyrektywy Razor zawsze zaczynają się od @ znaku . Niektóre dyrektywy Razor pojawiają się na początku nowego wiersza, na przykład @page i @code, podczas gdy inne są atrybutami, które mogą być stosowane do elementów jako atrybutów, takich jak @bind. Pełną listę dyrektyw Razor można znaleźć w dokumentacji składni Razor.

Włączanie interakcyjności

Aby obsługiwać zdarzenia interfejsu użytkownika ze składnika i używać powiązania danych, składnik musi być interaktywny. Domyślnie składniki platformy Blazor są renderowane statycznie z serwera, co oznacza, że generują kod HTML w odpowiedzi na żądania i w przeciwnym razie nie mogą obsłużyć zdarzeń interfejsu użytkownika. Składnik jest interaktywny, stosując tryb renderowania interakcyjnego @rendermode przy użyciu dyrektywy .

Dyrektywę @rendermode można zastosować do definicji składnika:

@rendermode InteractiveServer

Lub do wystąpienia składnika:

<Counter @rendermode="InteractiveServer" />

Składnik Counter jest obecnie jedynym składnikiem interaktywnym w naszej aplikacji i używa renderowania interakcyjnego serwera. Renderowanie interakcyjnego serwera obsługuje zdarzenia interfejsu użytkownika z serwera za pośrednictwem połączenia protokołu WebSocket z przeglądarką. Platforma Blazor wysyła zdarzenia interfejsu użytkownika do serwera za pośrednictwem tego połączenia, aby składniki aplikacji mogły je obsłużyć. Następnie platforma Blazor obsługuje aktualizowanie modelu DOM przeglądarki za pomocą renderowanych aktualizacji.

Alternatywnie składniki platformy Blazor mogą używać InteractiveWebAssembly trybu renderowania do interaktywnego renderowania z klienta. W tym trybie kod składnika jest pobierany do przeglądarki i uruchamiany po stronie klienta przy użyciu środowiska uruchomieniowego platformy .NET opartego na zestawie WebAssembly.

Wybrany tryb renderowania interakcyjnego zależy od wymagań aplikacji. Obecnie nasz projekt Blazor jest skonfigurowany tylko na potrzeby renderowania opartego na serwerze, więc w tym module trzymamy się renderowania statycznego i interaktywnego serwera.