Wiązanie kontrolek z danymi w aplikacjach platformy Blazor

  • 7 min

Platforma Blazor umożliwia powiązanie kontrolek HTML z właściwościami, dzięki czemu zmiany wartości są automatycznie wyświetlane w interfejsie użytkownika.

Załóżmy, że tworzysz stronę, która zbiera informacje od klientów o ich preferencjach pizzy. Chcesz załadować informacje z bazy danych i umożliwić klientom wprowadzanie zmian, takich jak rejestrowanie ulubionych toppingów. Jeśli w bazie danych nastąpiła zmiana z użytkownika lub aktualizacji, nowe wartości mają być wyświetlane w interfejsie użytkownika tak szybko, jak to możliwe.

W tej lekcji dowiesz się, jak używać powiązania danych w rozwiązaniu Blazor, aby powiązać elementy interfejsu użytkownika z wartościami danych, właściwościami lub wyrażeniami.

Co to jest powiązanie danych?

Jeśli chcesz, aby element HTML wyświetlał wartość, możesz napisać kod w celu zmiany wyświetlania. Musisz napisać dodatkowy kod, aby zaktualizować ekran po zmianie wartości. W środowisku Blazor można użyć powiązania danych, aby połączyć element HTML z polem, właściwością lub wyrażeniem. Dzięki temu po zmianie wartości element HTML zostanie automatycznie zaktualizowany. Aktualizacja zwykle odbywa się szybko po zmianie i nie trzeba pisać żadnego kodu aktualizacji.

Aby powiązać kontrolkę, należy użyć @bind dyrektywy :

@page "/"

<p>
    Your email address is:
    <input @bind="customerEmail" />
</p>

@code {
    private string customerEmail = "user@contoso.com"
}

Na poprzedniej stronie za każdym razem, gdy zmienna customerEmail zmienia jego wartość, wartość zostanie zaktualizowana <input> .

Uwaga

Kontrolki, takie jak <input>, aktualizują ich wyświetlanie tylko wtedy, gdy składnik jest renderowany, a nie wtedy, gdy wartość pola ulegnie zmianie. Ponieważ składniki platformy Blazor są renderowane po wykonaniu kodu procedury obsługi zdarzeń, w praktyce aktualizacje są zwykle wyświetlane szybko.

Wiązanie elementów z określonymi zdarzeniami

Dyrektywa jest inteligentna @bind i rozumie używane kontrolki. Na przykład po powiązaniu wartości z polem <input>tekstowym wiąże atrybut value . Pole wyboru <input> HTML ma checked atrybut zamiast atrybutu value . Atrybut @bind automatycznie używa tego checked atrybutu. Domyślnie kontrolka jest powiązana ze zdarzeniem DOM onchange . Rozważmy na przykład tę stronę:

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind="favPizza" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

Gdy strona jest renderowana, wartość domyślna Myślnie jest wyświetlana zarówno w elemecie, jak <h1> i w polu tekstowym. Po wprowadzeniu nowej ulubionej pizzy w polu tekstowym <h1> element nie zmieni się, dopóki nie zostanie wyświetlona karta z pola tekstowego lub wybierz klawisz Enter , ponieważ jest to przyczyna onchange uruchomienia zdarzenia DOM.

Często jest to zachowanie, którego potrzebujesz. Załóżmy jednak, że chcesz <h1> , aby element został zaktualizowany zaraz po wprowadzeniu dowolnego znaku w polu tekstowym. Ten wynik można osiągnąć przez powiązanie ze zdarzeniem oninput DOM. Aby powiązać to zdarzenie, należy użyć @bind-value dyrektyw i @bind-value:event :

@page "/"

<h1>My favorite pizza is: @favPizza</h1>

<p>
    Enter your favorite pizza:
    <input @bind-value="favPizza" @bind-value:event="oninput" />
</p>

@code {
    private string favPizza { get; set; } = "Margherita"
}

W takim przypadku tytuł zmienia się, gdy tylko wpiszesz dowolny znak w polu tekstowym.

Formatowanie wartości powiązanych

Jeśli wyświetlasz daty użytkownikowi, możesz użyć zlokalizowanego formatu danych. Załóżmy na przykład, że piszesz stronę specjalnie dla użytkowników w Wielkiej Brytanii, którzy wolą pisać daty z pierwszym dniem. Możesz użyć @bind:format dyrektywy , aby określić pojedynczy ciąg formatu daty:

@page "/ukbirthdaypizza"

<h1>Order a pizza for your birthday!</h1>

<p>
    Enter your birth date:
    <input @bind="birthdate" @bind:format="dd-MM-yyyy" />
</p>

@code {
    private DateTime birthdate { get; set; } = new(2000, 1, 1);
}

Uwaga

W momencie pisania ciągi formatu są obsługiwane tylko w przypadku wartości daty. Formaty walut, formaty liczb i inne formaty mogą zostać dodane w przyszłości. Aby sprawdzić najnowsze informacje na temat formatów powiązań, zobacz Formatowanie ciągów w dokumentacji platformy Blazor.

Alternatywą dla używania @bind:format dyrektywy jest napisanie kodu języka C#, aby sformatować powiązaną wartość. get Użyj metod i set w definicji elementu członkowskiego, jak w tym przykładzie:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

<p>Approval rating: @approvalRating</p>

<p>
    <label>
        Set a new approval rating:
        <input @bind="ApprovalRating" />
    </label>
</p>

@code {
    private decimal approvalRating = 1.0;
    private NumberStyles style = NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
    
    private string ApprovalRating
    {
        get => approvalRating.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                approvalRating = Math.Round(number, 3);
            }
        }
    }
}

W następnej lekcji zastosujesz zdobytą wiedzę.