powiązanie danych ASP.NET Core Blazor

W tym artykule opisano funkcje powiązania danych dla Razor składników i elementów DOM w Blazor aplikacjach.

Funkcje powiązań

Razor składniki zapewniają funkcje powiązania danych z atrybutem @bindRazor dyrektywy z wartością pola, właściwości lub Razor wyrażenia.

Poniższe przykładowe powiązania:

• <input> Wartość elementu w polu C#inputValue.
• Druga <input> wartość elementu do właściwości języka C# InputValue .

<input> Gdy element utraci fokus, jego pole powiązane lub właściwość zostaną zaktualizowane.

Bind.razor:

@page "/bind"

<PageTitle>Bind</PageTitle>

<h1>Bind Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
</p>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" />
    </label>
</p>

<ul>
    <li><code>inputValue</code>: @inputValue</li>
    <li><code>InputValue</code>: @InputValue</li>
</ul>

@code {
    private string? inputValue;

    private string? InputValue { get; set; }
}

Pole tekstowe jest aktualizowane w interfejsie użytkownika tylko wtedy, gdy składnik jest renderowany, a nie w odpowiedzi na zmianę wartości pola lub właściwości. Ponieważ składniki renderują się po wykonaniu kodu procedury obsługi zdarzeń, aktualizacje pól i właściwości są zwykle odzwierciedlane w interfejsie użytkownika natychmiast po wyzwoleniu programu obsługi zdarzeń.

W ramach pokazu sposobu tworzenia powiązań danych w kodzie HTML poniższy przykład wiąże InputValue właściwość z atrybutami i onchange atrybutami drugiego <input> elementu value (change). Drugi <input> element w poniższym przykładzie to demonstracja koncepcji i nie jest przeznaczona do sugerowania sposobu powiązania danych w Razor składnikach.

BindTheory.razor:

@page "/bind-theory"

<PageTitle>Bind Theory</PageTitle>

<h1>Bind Theory Example</h1>

<p>
    <label>
        Normal Blazor binding: 
        <input @bind="InputValue" />
    </label>
</p>

<p>
    <label>
        Demonstration of equivalent HTML binding: 
        <input value="@InputValue"
            @onchange="@((ChangeEventArgs __e) => InputValue = __e?.Value?.ToString())" />
    </label>
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

Gdy BindTheory składnik jest renderowany, value element demonstracyjny <input> HTML pochodzi z InputValue właściwości . Gdy użytkownik wprowadzi wartość w polu tekstowym i zmieni fokus elementu, onchange zdarzenie zostanie wyzwolone, a InputValue właściwość zostanie ustawiona na zmienioną wartość. W rzeczywistości wykonywanie kodu jest bardziej złożone, ponieważ @bind obsługuje przypadki, w których są wykonywane konwersje typów. Ogólnie rzecz biorąc, @bind kojarzy bieżącą wartość wyrażenia z value atrybutem <input> i obsługuje zmiany przy użyciu zarejestrowanej procedury obsługi.

Powiąż właściwość lub pole z innymi zdarzeniami DOM, dołączając @bind:event="{EVENT}" atrybut ze zdarzeniem DOM dla symbolu zastępczego {EVENT} . Poniższy przykład wiąże InputValue właściwość z wartością <input> elementu po wyzwoleniu zdarzenia elementu oninput (input). onchange W przeciwieństwie do zdarzenia (change), które jest uruchamiane, gdy element traci fokus, (input) jest wyzwalany, oninput gdy wartość pola tekstowego się zmienia.

Page/BindEvent.razor:

@page "/bind-event"

<PageTitle>Bind Event</PageTitle>

<h1>Bind Event Example</h1>

<p>
    <label>
        InputValue: 
        <input @bind="InputValue" @bind:event="oninput" />
    </label>
    
</p>

<p>
    <code>InputValue</code>: @InputValue
</p>

@code {
    private string? InputValue { get; set; }
}

Aby wykonać logikę asynchroniczną po powiązaniu, użyj @bind:after="{EVENT}" zdarzenia DOM dla symbolu zastępczego {EVENT} . Przypisana metoda języka C# nie jest wykonywana, dopóki powiązana wartość nie zostanie przypisana synchronicznie.

Używanie parametru wywołania zwrotnego zdarzeń (EventCallbackEventCallback<T>/) z parametrem @bind:after nie jest obsługiwane. Zamiast tego przekaż metodę zwracającą wartość Action lub Task do @bind:after.

W poniższym przykładzie:

• Każdy <input> element value jest powiązany z polem searchText synchronicznie.
• Metoda PerformSearch wykonuje asynchronicznie:
  • Gdy pierwsze pole traci fokus (onchange zdarzenie) po zmianie wartości.
  • Po każdym naciśnięciu klawiszy (oninput zdarzenie) w drugim polu.
• PerformSearch wywołuje usługę za pomocą metody asynchronicznej (FetchAsync), aby zwrócić wyniki wyszukiwania.

@inject ISearchService SearchService

<input @bind="searchText" @bind:after="PerformSearch" />
<input @bind="searchText" @bind:event="oninput" @bind:after="PerformSearch" />

@code {
    private string? searchText;
    private string[]? searchResult;

    private async Task PerformSearch()
    {
        searchResult = await SearchService.FetchAsync(searchText);
    }
}

Dodatkowe przykłady

BindAfter.razor:

@page "/bind-after"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind After Examples</h1>

<h2>Elements</h2>

<input type="text" @bind="text" @bind:after="() => { }" />

<input type="text" @bind="text" @bind:after="After" />

<input type="text" @bind="text" @bind:after="AfterAsync" />

<h2>Components</h2>

<InputText @bind-Value="text" @bind-Value:after="() => { }" />

<InputText @bind-Value="text" @bind-Value:after="After" />

<InputText @bind-Value="text" @bind-Value:after="AfterAsync" />

@code {
    private string text = "";

    private void After() {}
    private Task AfterAsync() { return Task.CompletedTask; }
}

Aby uzyskać więcej informacji na InputText temat składnika, zobacz ASP.NET Podstawowe Blazor składniki wejściowe.

Składniki obsługują dwukierunkowe powiązanie danych, definiując parę parametrów:

• @bind:get: określa wartość, która ma być powiązana.
• @bind:set: określa wywołanie zwrotne dla momentu zmiany wartości.

Modyfikatory @bind:get i @bind:set są zawsze używane razem.

Przykłady

BindGetSet.razor:

@page "/bind-get-set"
@using Microsoft.AspNetCore.Components.Forms

<h1>Bind Get Set Examples</h1>

<h2>Elements</h2>

<input type="text" @bind:get="text" @bind:set="(value) => { text = value; }" />
<input type="text" @bind:get="text" @bind:set="Set" />
<input type="text" @bind:get="text" @bind:set="SetAsync" />

<h2>Components</h2>

<InputText @bind-Value:get="text" @bind-Value:set="(value) => { text = value; }" />
<InputText @bind-Value:get="text" @bind-Value:set="Set" />
<InputText @bind-Value:get="text" @bind-Value:set="SetAsync" />

@code {
    private string text = "";

    private void Set(string value)
    {
        text = value;
    }

    private Task SetAsync(string value)
    {
        text = value;
        return Task.CompletedTask;
    }
}

Aby uzyskać więcej informacji na InputText temat składnika, zobacz ASP.NET Podstawowe Blazor składniki wejściowe.

Aby zapoznać się z innym przykładem użycia @bind:get elementów i @bind:set, zobacz sekcję Wiązanie między więcej niż dwoma składnikami w dalszej części tego artykułu.

Razor Powiązanie atrybutu jest uwzględniane w wielkości liter:

• @bind, @bind:eventi @bind:after są prawidłowe.
• @Bind/@bind:Event/@bind:aftEr(wielkie litery) lub @BIND/@BIND:EVENT@BIND:AFTER/(wszystkie wielkie litery) są nieprawidłowe.

Używanie @bind:get/@bind:set modyfikatorów i unikanie procedur obsługi zdarzeń na potrzeby dwukierunkowego powiązania danych

Dwukierunkowe powiązanie danych nie jest możliwe do zaimplementowania za pomocą programu obsługi zdarzeń. Użyj @bind:get/@bind:set modyfikatorów do powiązania danych dwukierunkowego.

❌ Rozważ następujące dysfunkcyjne podejście do powiązania danych dwukierunkowego przy użyciu programu obsługi zdarzeń:

<p>
    <input value="@inputValue" @oninput="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(ChangeEventArgs args)
    {
        var newValue = args.Value?.ToString() ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

Procedura OnInput obsługi zdarzeń aktualizuje wartość inputValue do po Long! podaniu czwartego znaku. Użytkownik może jednak nadal dodawać znaki do wartości elementu w interfejsie użytkownika. Wartość inputValue elementu nie jest powiązana z wartością elementu przy użyciu każdego naciśnięcia klawisza. Powyższy przykład umożliwia tylko jednokierunkowe powiązanie danych.

Przyczyną tego zachowania jest to, że nie wiadomo, Blazor że kod zamierza zmodyfikować wartość inputValue w procedurze obsługi zdarzeń. Blazor Nie próbuje wymusić dopasowania wartości elementów DOM i wartości zmiennych platformy .NET, chyba że są one powiązane ze składnią @bind . We wcześniejszych wersjach Blazorpowiązania danych dwukierunkowego jest implementowane przez powiązanie elementu z właściwością i kontrolowanie wartości właściwości za pomocą jego ustawiania. W programie ASP.NET Core na platformie .NET 7 lub nowszym @bind:get/@bind:set składnia modyfikatora służy do implementowania dwukierunkowego powiązania danych, jak pokazano w następnym przykładzie.

✔️ Rozważ następujące poprawne podejście, korzystając z powiązania @bind:get/@bind:set danych dwukierunkowego:

<p>
    <input @bind:event="oninput" @bind:get="inputValue" @bind:set="OnInput" />
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private string? inputValue;

    private void OnInput(string value)
    {
        var newValue = value ?? string.Empty;

        inputValue = newValue.Length > 4 ? "Long!" : newValue;
    }
}

Użycie @bind:get/@bind:set modyfikatorów steruje podstawową wartością inputValue elementu za pomocą metody @bind:set i wiąże wartość z inputValue wartością elementu za pośrednictwem metody @bind:get. W poprzednim przykładzie pokazano prawidłowe podejście do implementowania powiązania danych dwukierunkowych.

Wiązanie z właściwością za pomocą języka C# get i set metod dostępu

Język C# get i metody dostępu mogą służyć do tworzenia niestandardowego zachowania formatu powiązania, jak pokazano w poniższym DecimalBinding składnikuset. Składnik wiąże dodatnią lub ujemną liczbę dziesiętną z maksymalnie trzema miejscami dziesiętnymi do <input> elementu za string pomocą właściwości (DecimalValue).

DecimalBinding.razor:

@page "/decimal-binding"
@using System.Globalization

<PageTitle>Decimal Binding</PageTitle>

<h1>Decimal Binding Example</h1>

<p>
    <label>
        Decimal value (±0.000 format):
        <input @bind="DecimalValue" />
    </label>
</p>

<p>
    <code>decimalValue</code>: @decimalValue
</p>

@code {
    private decimal decimalValue = 1.1M;
    private NumberStyles style = 
        NumberStyles.AllowDecimalPoint | NumberStyles.AllowLeadingSign;
    private CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");

    private string DecimalValue
    {
        get => decimalValue.ToString("0.000", culture);
        set
        {
            if (Decimal.TryParse(value, style, culture, out var number))
            {
                decimalValue = Math.Round(number, 3);
            }
        }
    }
}

Uwaga

Powiązanie dwukierunkowe z właściwością z get/set metodami dostępu wymaga odrzucenia Task zwracanego przez EventCallback.InvokeAsyncelement . W przypadku powiązania danych dwukierunkowego zalecamy używanie @bind:get/@bind:set modyfikatorów. Aby uzyskać więcej informacji, zobacz @bind:get/@bind:set wskazówki przedstawione we wcześniejszej sekcji tego artykułu.

Wybór wielu opcji z elementami <select>

Powiązanie obsługuje multiple wybór opcji z elementami <select> . Zdarzenie @onchange udostępnia tablicę wybranych elementów za pośrednictwem argumentów zdarzeń (ChangeEventArgs). Wartość musi być powiązana z typem tablicy.

BindMultipleInput.razor:

@page "/bind-multiple-input"

<h1>Bind Multiple <code>input</code>Example</h1>

<p>
    <label>
        Select one or more cars: 
        <select @onchange="SelectedCarsChanged" multiple>
            <option value="audi">Audi</option>
            <option value="jeep">Jeep</option>
            <option value="opel">Opel</option>
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
        </select>
    </label>
</p>

<p>
    Selected Cars: @string.Join(", ", SelectedCars)
</p>

<p>
    <label>
        Select one or more cities: 
        <select @bind="SelectedCities" multiple>
            <option value="bal">Baltimore</option>
            <option value="la">Los Angeles</option>
            <option value="pdx">Portland</option>
            <option value="sf">San Francisco</option>
            <option value="sea">Seattle</option>
        </select>
    </label>
</p>

<span>
    Selected Cities: @string.Join(", ", SelectedCities)
</span>

@code {
    public string[] SelectedCars { get; set; } = new string[] { };
    public string[] SelectedCities { get; set; } = new[] { "bal", "sea" };

    private void SelectedCarsChanged(ChangeEventArgs e)
    {
        if (e.Value is not null)
        {
            SelectedCars = (string[])e.Value;
        }
    }
}

Aby uzyskać informacje na temat obsługi pustych ciągów i null wartości w powiązaniu danych, zobacz sekcję Binding, element options to C# object values (Wiązanie <select> opcji elementu do wartości obiektów null języka C#).

Wiązanie <select> opcji elementu z wartościami obiektów null języka C#

Nie ma rozsądnego <select> sposobu reprezentowania wartości opcji elementu jako wartości obiektu null języka C#, ponieważ:

• Atrybuty HTML nie mogą mieć null wartości. Najbliższy odpowiednik null w kodzie HTML jest brak atrybutu <option> HTML value z elementu .
• Podczas wybierania elementu <option> bez value atrybutu przeglądarka traktuje wartość jako zawartość tekstową tego <option>elementu .

Struktura Blazor nie próbuje pominąć domyślnego zachowania, ponieważ obejmuje:

• Tworzenie łańcucha obejść specjalnych przypadków w strukturze.
• Zmiany powodujące niezgodność dotyczące bieżącego zachowania platformy.

Najbardziej prawdopodobnym nullodpowiednikiem w kodzie HTML jest pusty ciągvalue. Platforma Blazor obsługuje null puste konwersje ciągów w celu powiązania dwukierunkowego z wartością <select>.

Nieparzyswalne wartości

Gdy użytkownik udostępni nieparzystną wartość elementowi powiązanemu z danymi, nieparzysłana wartość zostanie automatycznie przywrócona do poprzedniej wartości po wyzwoleniu zdarzenia powiązania.

Rozważmy następujący składnik, w którym <input> element jest powiązany z typem int z początkową wartością 123.

UnparsableValues.razor:

@page "/unparsable-values"

<PageTitle>Unparsable Values</PageTitle>

<h1>Unparsable Values Example</h1>

<p>
    <label>
        inputValue: 
        <input @bind="inputValue" />
    </label>
    
</p>

<p>
    <code>inputValue</code>: @inputValue
</p>

@code {
    private int inputValue = 123;
}

Domyślnie powiązanie dotyczy zdarzenia elementu onchange . Jeśli użytkownik zaktualizuje wartość wpisu 123.45 pola tekstowego i zmieni fokus, wartość elementu zostanie przywrócona 123 podczas onchange uruchamiania. Gdy wartość 123.45 zostanie odrzucona na rzecz oryginalnej wartości 123, użytkownik rozumie, że ich wartość nie została zaakceptowana.

W przypadku zdarzenia (@bind:event="oninput") następuje przekierowanie wartości po każdym naciśnięciu oninput klawisza, który wprowadza nieparzystną wartość. W przypadku określania oninput wartości docelowej zdarzenia z typem int-bound użytkownik nie może wpisać znaku kropki (.). Znak kropki (.) jest natychmiast usuwany, więc użytkownik otrzymuje natychmiastową opinię, że dozwolone są tylko liczby całkowite. Istnieją scenariusze, w których przywracanie wartości zdarzenia oninput nie jest idealne, na przykład wtedy, gdy użytkownik powinien mieć możliwość wyczyszczenia nieparzystej <input> wartości. Alternatywy obejmują:

• Nie używaj oninput zdarzenia. Użyj zdarzenia domyślnego onchange , w którym nieprawidłowa wartość nie zostanie przywrócona, dopóki element nie utraci fokusu.
• Powiąż z typem dopuszczalnym wartości null, takim jak int? lub string i użyj/@bind:get@bind:set modyfikatorów (opisanych wcześniej w tym artykule) lub powiąż z właściwością z niestandardową get i set logiką dostępu do obsługi nieprawidłowych wpisów.
• Użyj składnika wejściowego, takiego jak InputNumber<TValue> lub InputDate<TValue>, z walidacją formularza. Składniki wejściowe wraz ze składnikami weryfikacji formularzy zapewniają wbudowaną obsługę zarządzania nieprawidłowymi danymi wejściowymi:
  • Zezwól użytkownikowi na podanie nieprawidłowych danych wejściowych i otrzymanie błędów walidacji w skojarzonym obiekcie EditContext.
  • Wyświetla błędy walidacji w interfejsie użytkownika bez zakłócania wprowadzania przez użytkownika dodatkowych danych w formacie webform.

Formatowanie ciągów

Powiązanie danych działa z pojedynczym DateTime ciągiem formatu przy użyciu metody @bind:format="{FORMAT STRING}", gdzie {FORMAT STRING} symbol zastępczy jest ciągiem formatu. Inne wyrażenia formatu, takie jak waluty lub formaty liczb, nie są obecnie dostępne, ale mogą zostać dodane w przyszłej wersji.

DateBinding.razor:

@page "/date-binding"

<PageTitle>Date Binding</PageTitle>

<h1>Date Binding Example</h1>

<p>
    <label>
        <code>yyyy-MM-dd</code> format:
        <input @bind="startDate" @bind:format="yyyy-MM-dd" />
    </label>
</p>

<p>
    <code>startDate</code>: @startDate
</p>

@code {
    private DateTime startDate = new(2020, 1, 1);
}

W poprzednim kodzie typ <input> pola elementu (type atrybut) domyślnie to text.

Obsługiwane są wartości System.DateTimeSystem.DateTimeOffset null:

private DateTime? date;
private DateTimeOffset? dateOffset;

Określanie formatu typu date pola nie jest zalecane, ponieważ Blazor ma wbudowaną obsługę formatowania dat. Pomimo zalecenia użyj formatu daty do poprawnego yyyy-MM-dd działania, jeśli format jest dostarczany z typem date pola:

<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd">

Wiązanie z parametrami składnika

Typowy scenariusz polega na powiązaniu właściwości składnika podrzędnego z właściwością w składniku nadrzędnym. Ten scenariusz jest nazywany powiązaniem łańcuchowym, ponieważ wiele poziomów powiązania występuje jednocześnie.

Nie można zaimplementować powiązań łańcuchowych ze @bind składnią w składniku podrzędnym. Program obsługi zdarzeń i wartość muszą być określone oddzielnie, aby obsługiwać aktualizowanie właściwości w elemencie nadrzędnym ze składnika podrzędnego. Składnik nadrzędny nadal wykorzystuje @bind składnię do konfigurowania powiązania danych ze składnikiem podrzędnym.

ChildBind Poniższy składnik ma Year parametr składnika i .EventCallback<TValue> Zgodnie z konwencją EventCallback<TValue> parametr musi mieć nazwę jako nazwę parametru składnika z sufiksem "Changed". Składnia nazewnictwa to {PARAMETER NAME}Changed, gdzie {PARAMETER NAME} symbol zastępczy to nazwa parametru. W poniższym przykładzie nazwa EventCallback<TValue> to YearChanged.

EventCallback.InvokeAsync wywołuje delegata skojarzonego z powiązaniem z podanym argumentem i wysyła powiadomienie o zdarzeniu dla zmienionej właściwości.

ChildBind.razor:

<div class="card bg-light mt-3" style="width:18rem ">
    <div class="card-body">
        <h3 class="card-title">ChildBind Component</h3>
        <p class="card-text">
            Child <code>Year</code>: @Year
        </p>
        <button @onclick="UpdateYearFromChild">Update Year from Child</button>
    </div>
</div>

@code {
    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public EventCallback<int> YearChanged { get; set; }

    private async Task UpdateYearFromChild()
    {
        await YearChanged.InvokeAsync(Random.Shared.Next(1950, 2021));
    }
}

Aby uzyskać więcej informacji na temat zdarzeń i EventCallback<TValue>, zobacz sekcję EventCallback w artykule dotyczącym obsługi zdarzeń ASP.NET CoreBlazor.

W poniższym Parent1 składniku year pole jest powiązane z parametrem Year składnika podrzędnego. Parametr Year jest powiązany, ponieważ ma zdarzenie towarzyszące YearChanged zgodne z typem parametru Year .

Parent1.razor:

@page "/parent-1"

<PageTitle>Parent 1</PageTitle>

<h1>Parent Example 1</h1>

<p>Parent <code>year</code>: @year</p>

<button @onclick="UpdateYear">Update Parent <code>year</code></button>

<ChildBind @bind-Year="year" />

@code {
    private int year = 1979;

    private void UpdateYear()
    {
        year = Random.Shared.Next(1950, 2021);
    }
}

Powiązanie parametrów składników może również wyzwalać @bind:after zdarzenia. W poniższym przykładzie YearUpdated metoda wykonuje asynchronicznie po powiązaniu parametru Year składnika.

<ChildBind @bind-Year="year" @bind-Year:after="YearUpdated" />

@code {
    ...

    private async Task YearUpdated()
    {
        ... = await ...;
    }
}

Zgodnie z konwencją właściwość może być powiązana z odpowiednią procedurą obsługi zdarzeń przez dołączenie @bind-{PROPERTY}:event atrybutu przypisanego do procedury obsługi, gdzie {PROPERTY} symbol zastępczy jest właściwością. <ChildBind @bind-Year="year" /> jest odpowiednikiem zapisu:

<ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />

W bardziej zaawansowanym i rzeczywistym przykładzie następujący PasswordEntry składnik:

• <input> Ustawia wartość elementu na password pole.
• Uwidacznia zmiany Password właściwości w składniku nadrzędnym, EventCallback który przekazuje bieżącą wartość pola podrzędnego password jako argument.
• onclick Używa zdarzenia, aby wyzwolić metodę ToggleShowPassword . Aby uzyskać więcej informacji, zobacz obsługa zdarzeń ASP.NET CoreBlazor.

PasswordEntry.razor:

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged"
                       required
                       type="@(showPassword ? "text" : "password")"
                       value="@password" />
            </label>
        </p>
        <button class="btn btn-primary" @onclick="ToggleShowPassword">
            Show password
        </button>
    </div>
</div>

@code {
    private bool showPassword;
    private string? password;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private async Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        await PasswordChanged.InvokeAsync(password);
    }

    private void ToggleShowPassword()
    {
        showPassword = !showPassword;
    }
}

Składnik PasswordEntry jest używany w innym składniku, na przykład w poniższym PasswordBinding przykładzie składnika.

PasswordBinding.razor:

@page "/password-binding"

<PageTitle>Password Binding</PageTitle>

<h1>Password Binding Example</h1>

<PasswordEntry @bind-Password="password" />

<p>
    <code>password</code>: @password
</p>

@code {
    private string password = "Not set";
}

PasswordBinding Gdy składnik jest początkowo renderowany, password wartość elementu Not set jest wyświetlana w interfejsie użytkownika. Po początkowym renderowaniu password wartość odzwierciedla zmiany wprowadzone w wartości parametru Password składnika w składniku PasswordEntry .

Uwaga

Powyższy przykład wiąże hasło jednokierunkowo ze składnika podrzędnego PasswordEntry ze składnikiem nadrzędnym PasswordBinding . Powiązanie dwukierunkowe nie jest wymaganiem w tym scenariuszu, jeśli celem aplikacji jest posiadanie składnika wpisu hasła współużytkowanego do ponownego użycia wokół aplikacji, która jedynie przekazuje hasło do elementu nadrzędnego. Aby uzyskać podejście, które zezwala na powiązanie dwukierunkowe bez bezpośredniego zapisywania do parametru składnika podrzędnego, zobacz NestedChild przykładowy składnik w sekcji Wiązanie w więcej niż dwóch składnikach tego artykułu.

Wykonaj kontrole lub błędy pułapki w procedurze obsługi. Poniższy poprawiony PasswordEntry składnik udostępnia użytkownikowi natychmiastową opinię, jeśli miejsce jest używane w wartości hasła.

PasswordEntry.razor:

<div class="card bg-light mt-3" style="width:22rem ">
    <div class="card-body">
        <h3 class="card-title">Password Component</h3>
        <p class="card-text">
            <label>
                Password:
                <input @oninput="OnPasswordChanged"
                       required
                       type="@(showPassword ? "text" : "password")"
                       value="@password" />
            </label>
            <span class="text-danger">@validationMessage</span>
        </p>
        <button class="btn btn-primary" @onclick="ToggleShowPassword">
            Show password
        </button>
    </div>
</div>

@code {
    private bool showPassword;
    private string? password;
    private string? validationMessage;

    [Parameter]
    public string? Password { get; set; }

    [Parameter]
    public EventCallback<string> PasswordChanged { get; set; }

    private Task OnPasswordChanged(ChangeEventArgs e)
    {
        password = e?.Value?.ToString();

        if (password != null && password.Contains(' '))
        {
            validationMessage = "Spaces not allowed!";

            return Task.CompletedTask;
        }
        else
        {
            validationMessage = string.Empty;

            return PasswordChanged.InvokeAsync(password);
        }
    }

    private void ToggleShowPassword()
    {
        showPassword = !showPassword;
    }
}

Wiązanie między więcej niż dwoma składnikami

Parametry można powiązać za pomocą dowolnej liczby zagnieżdżonych składników, ale należy przestrzegać jednokierunkowego przepływu danych:

• Zmień przepływ powiadomień w górę hierarchii.
• Nowe wartości parametrów przepływają w dół hierarchii.

Typowym i zalecanym podejściem jest przechowywanie tylko danych bazowych w składniku nadrzędnym, aby uniknąć pomyłek dotyczących stanu, który należy zaktualizować, jak pokazano w poniższym przykładzie.

Parent2.razor:

@page "/parent-2"

<PageTitle>Parent 2</PageTitle>

<h1>Parent Example 2</h1>

<p>Parent Message: <b>@parentMessage</b></p>

<p>
    <button @onclick="ChangeValue">Change from Parent</button>
</p>

<NestedChild @bind-ChildMessage="parentMessage" />

@code {
    private string parentMessage = "Initial value set in Parent";

    private void ChangeValue()
    {
        parentMessage = $"Set in Parent {DateTime.Now}";
    }
}

W następującym NestedChild składniku NestedGrandchild składnik:

• Przypisuje wartość parametru ChildMessage do GrandchildMessage z składnią @bind:get .
• GrandchildMessage Aktualizacje podczas ChildMessageChanged wykonywania za pomocą @bind:set składni.

NestedChild.razor:

<div class="border rounded m-1 p-1">
    <h2>Child Component</h2>

    <p>Child Message: <b>@ChildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Child</button>
    </p>

    <NestedGrandchild @bind-GrandchildMessage:get="ChildMessage" 
        @bind-GrandchildMessage:set="ChildMessageChanged" />
</div>

@code {
    [Parameter]
    public string? ChildMessage { get; set; }

    [Parameter]
    public EventCallback<string?> ChildMessageChanged { get; set; }

    private async Task ChangeValue()
    {
        await ChildMessageChanged.InvokeAsync(
            $"Set in Child {DateTime.Now}");
    }
}

NestedGrandchild.razor:

<div class="border rounded m-1 p-1">
    <h3>Grandchild Component</h3>

    <p>Grandchild Message: <b>@GrandchildMessage</b></p>

    <p>
        <button @onclick="ChangeValue">Change from Grandchild</button>
    </p>
</div>

@code {
    [Parameter]
    public string? GrandchildMessage { get; set; }

    [Parameter]
    public EventCallback<string> GrandchildMessageChanged { get; set; }

    private async Task ChangeValue()
    {
        await GrandchildMessageChanged.InvokeAsync(
            $"Set in Grandchild {DateTime.Now}");
    }
}

Aby uzyskać alternatywne podejście do udostępniania danych w pamięci i między składnikami, które nie muszą być zagnieżdżone, zobacz ASP.NET Zarządzanie stanem podstawowymBlazor.

Dodatkowe zasoby

• Wykrywanie zmian parametrów i dodatkowe wskazówki dotyczące Razor renderowania składników
• Omówienie formularzy ASP.NET Core Blazor
• Wiązanie z przyciskami radiowymi w formularzu
• Opcje powiązania InputSelect z wartościami obiektów null języka C#
• ASP.NET Core Blazor obsługi zdarzeń: EventCallback sekcja
• Blazorprzykładowe repozytorium GitHub () (dotnet/blazor-samplesjak pobrać)