ASP.NET základní Blazor datová vazba

Tento článek vysvětluje funkce datových vazeb pro Razor komponenty a prvky DOM v Blazor aplikacích.

Funkce vazby

Razor komponenty poskytují funkce datové vazby s atributem @bindRazor direktivy s polem, vlastností nebo Razor hodnotou výrazu.

Následující příklad vytvoří vazbu:

• Hodnota <input> elementu do pole jazyka C# inputValue .
• Druhá <input> hodnota elementu pro vlastnost C# InputValue .

<input> Když prvek ztratí fokus, aktualizuje se jeho vázané pole nebo vlastnost.

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; }
}

Textové pole se aktualizuje v uživatelském rozhraní pouze v případě, že se komponenta vykreslí, ne v reakci na změnu hodnoty pole nebo vlastnosti. Vzhledem k tomu, že se komponenty vykreslují po spuštění kódu obslužné rutiny události, aktualizace polí a vlastností se obvykle projeví v uživatelském rozhraní ihned po aktivaci obslužné rutiny události.

Jako ukázku, jak se datové vazby kompozují ve formátu HTML, následující příklad vytvoří vazbu InputValue vlastnosti na vlastnosti a onchange atributy druhého <input> elementu value (change). Druhým <input> prvkem v následujícím příkladu je ukázka konceptu, která nemá naznačovat, jak byste měli svázat data v Razor komponentách.

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; }
}

BindTheory Při vykreslení value komponenty pochází z vlastnosti ukázkový <input> element InputValue HTML. Když uživatel zadá do textového pole hodnotu a změní fokus prvku, onchange událost se aktivuje a InputValue vlastnost se nastaví na změněnou hodnotu. Ve skutečnosti je provádění kódu složitější, protože @bind zpracovává případy, kdy se provádějí převody typů. Obecně platí, že @bind přidruží aktuální hodnotu výrazu k value atributu <input> a zpracovává změny pomocí registrované obslužné rutiny.

Vytvořte vazbu vlastnosti nebo pole na jiné události MODELU DOM zahrnutím @bind:event="{EVENT}" atributu s událostí MODELU DOM pro {EVENT} zástupný symbol. Následující příklad vytvoří vazbu InputValue vlastnosti na <input> hodnotu elementu při aktivaci události elementu oninput (input). onchange Na rozdíl od události (change), která se aktivuje, když prvek ztratí fokus, (input) se aktivuje, oninput když se změní hodnota textového pole.

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; }
}

Pokud chcete po vazbě spustit asynchronní logiku, použijte @bind:after="{EVENT}" pro {EVENT} zástupný symbol událost MODELU DOM. Přiřazená metoda jazyka C# se nespustí, dokud se vázané hodnoty nepřiřadí synchronně.

Použití parametru zpětného volání události (EventCallbackEventCallback<T>/) s @bind:after není podporováno. Místo toho předejte metodu, která vrací nebo Action Task do @bind:after.

V následujícím příkladu:

• Každý <input> prvek value je vázán na searchText pole synchronně.
• Metoda PerformSearch se provádí asynchronně:
  • Když první pole ztratí fokus (onchange událost) po změně hodnoty.
  • Po každém stisknutí klávesy (oninput události) ve druhém poli.
• PerformSearch volá službu s asynchronní metodou (FetchAsync) pro vrácení výsledků hledání.

@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);
}

Další příklady

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; }
}

Další informace o komponentě InputText najdete v tématu ASP.NET Blazor základní vstupní komponenty.

Komponenty podporují obousměrnou datovou vazbu definováním dvojice parametrů:

• @bind:get: Určuje hodnotu, která se má svázat.
• @bind:set: Určuje zpětné volání pro, když se hodnota změní.

Modifikátory @bind:get a @bind:set modifikátory se vždy používají společně.

Příklady

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;
    }
}

Další informace o komponentě InputText najdete v tématu ASP.NET Blazor základní vstupní komponenty.

Další příklad použití @bind:get a @bind:set, podívejte se na vazbu více než dvě komponenty oddíl dále v tomto článku.

Razor Při vazbě atributu se rozlišují malá a velká písmena:

• @binda @bind:event@bind:after jsou platné.
• @Bind/@bind:Event/@bind:aftEr(velká písmena) nebo @BIND/@BIND:EVENT@BIND:AFTER/(všechna velká písmena) jsou neplatná.

Použití @bind:get/@bind:set modifikátorů a zabránění obslužným rutinám událostí pro obousměrnou datovou vazbu

Obousměrná datová vazba není možné implementovat s obslužnou rutinou události. Použijte @bind:get/@bind:set modifikátory pro obousměrnou datovou vazbu.

❌ Zvažte následující nefunkční přístup pro obousměrnou datovou vazbu pomocí obslužné rutiny události:

<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;
    }
}

Obslužná rutina OnInput události aktualizuje hodnotu inputValue po Long! zadání čtvrtého znaku. Uživatel ale může dál přidávat znaky do hodnoty elementu v uživatelském rozhraní. Hodnota inputValue není vázána zpět na hodnotu prvku s každým stisknutí klávesy. Předchozí příklad je schopen pouze jednosměrné datové vazby.

Důvodem tohoto chování je, že si není vědom, že Blazor váš kód hodlá upravit hodnotu inputValue v obslužné rutině události. Blazor nepokouší se vynutit, aby hodnoty elementů MODELU DOM a proměnné .NET odpovídaly, pokud nejsou svázané se @bind syntaxí. V dřívějších verzích Blazor, obousměrné datové vazby je implementována vazbou elementu na vlastnost a řízení hodnoty vlastnosti s jeho setter. V ASP.NET Core v .NET 7 nebo novější @bind:get/@bind:set se modifikační syntaxe používá k implementaci obousměrné datové vazby, jak ukazuje další příklad.

✔️ Zvažte použití následujícího správného přístupu @bind:get/@bind:set pro obousměrnou datovou vazbu:

<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;
    }
}

Použití @bind:get/@bind:set modifikátorů řídí základní hodnotu inputValue via @bind:set a váže hodnotu na hodnotu inputValue prvku prostřednictvím @bind:get. Předchozí příklad ukazuje správný přístup k implementaci obousměrné datové vazby.

Vazba na vlastnost pomocí jazyka C# get a set přístupových objektů

Jazyk C# get a set přístupové objekty lze použít k vytvoření vlastního chování formátu vazby , jak ukazuje následující DecimalBinding komponenta. Komponenta sváže kladné nebo záporné desetinné číslo s až třemi desetinnými místy na <input> prvek prostřednictvím string vlastnosti (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);
            }
        }
    }
}

Poznámka:

Obousměrná vazba na vlastnost s přistupujícími getset/objekty vyžaduje zahození vráceného Task objektem EventCallback.InvokeAsync. Pro obousměrnou datovou vazbu doporučujeme použít @bind:get/@bind:set modifikátory. Další informace najdete v doprovodných @bind:get/@bind:set materiálech v dřívější části tohoto článku.

Výběr více možností s <select> prvky

Vazba podporuje multiple výběr možností s <select> prvky. Událost @onchange poskytuje pole vybraných prvků prostřednictvím argumentů události (ChangeEventArgs). Hodnota musí být vázána na typ pole.

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;
        }
    }
}

Informace o tom, jak se v datové vazbě zpracovávají prázdné řetězce a null hodnoty, najdete v části Možnosti elementu Binding <select> pro hodnoty objektů null jazyka C#.

Možnosti vazby <select> elementu na hodnoty objektů null jazyka C#

Neexistuje žádný rozumný způsob, jak znázorňovat <select> hodnotu možnosti prvku jako hodnotu objektu null jazyka C#, protože:

• Atributy HTML nemohou mít null hodnoty. Nejbližší ekvivalent null html není atribut HTML value z elementu <option> .
• Při výběru atributu <option> bez value atributu zachází prohlížeč s hodnotou jako s textovým obsahem daného <option>prvku.

Architektura Blazor se nepokouší potlačit výchozí chování, protože by zahrnovala:

• Vytvoření řetězce speciálních alternativních řešení v rámci
• Rozbíjející změny aktuálního chování architektury

Nejhodnotnější null ekvivalent v HTML je prázdný řetězec value. Architektura Blazor zpracovává převody null prázdných řetězců pro obousměrnou <select>vazbu na hodnotu.

Neparsovatelné hodnoty

Když uživatel poskytne neparsable hodnotu prvku vázanému na data, při aktivaci události vazby se neparsovatelná hodnota automaticky vrátí k předchozí hodnotě.

Vezměte v úvahu následující komponentu <input> , kde prvek je vázán na int typ s počáteční hodnotou 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;
}

Vazba se vztahuje na událost elementu onchange . Pokud uživatel aktualizuje hodnotu položky 123.45 textového pole a změní fokus, vrátí se hodnota prvku při 123 onchange spuštění. Když je hodnota 123.45 odmítnuta ve prospěch původní hodnoty 123, uživatel chápe, že jeho hodnota nebyla přijata.

oninput U události (@bind:event="oninput") dojde k reverzi hodnoty po libovolném stisknutí klávesy, která zavádí neparsable hodnotu. Při cílení na oninput událost s typem int-bound se uživateli zabrání zadání tečky (.) znaku. Tečka (.) se okamžitě odebere, takže uživatel obdrží okamžitou zpětnou vazbu, že jsou povolena pouze celá čísla. Existují scénáře, kdy vrácení hodnoty oninput události není ideální, například kdy má být uživateli povoleno vymazat neparsnutelnou <input> hodnotu. Mezi alternativy patří:

• Nepoužívejte oninput událost. Použijte výchozí onchange událost, kde neplatná hodnota není vrácena, dokud prvek neztratí fokus.
• Vytvořte vazbu na typ s možnou hodnotou null, například int? nebo string použijte @bind:get/@bind:set modifikátory (popsané výše v tomto článku) nebo vytvořte vazbu na vlastnost s vlastní get logikou a set logikou přístupového objektu pro zpracování neplatných položek.
• Použijte vstupní komponentu, například InputNumber<TValue> nebo InputDate<TValue>, s ověřením formuláře. Vstupní komponenty společně s komponentami pro ověřování formulářů poskytují integrovanou podporu pro správu neplatných vstupů:
  • Povolit uživateli zadat neplatný vstup a přijímat chyby ověření v přidruženém EditContext.
  • Zobrazí chyby ověření v uživatelském rozhraní, aniž by uživatel zasahoval do dalších dat webového formuláře.

Formátování řetězců

Datová vazba funguje s jedním DateTime formátovacím řetězcem pomocí @bind:format="{FORMAT STRING}", kde {FORMAT STRING} zástupný symbol je formátovací řetězec. Jiné výrazy formátu, jako jsou formáty měny nebo čísla, nejsou v tuto chvíli dostupné, ale můžou být přidány v budoucí verzi.

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);
}

V předchozím kódu je typ pole elementu <input> (type atribut) výchozí hodnota text.

Je možné System.DateTime použít hodnotu Null a System.DateTimeOffset jsou podporovány:

private DateTime? date;
private DateTimeOffset? dateOffset;

Zadání formátu pro date typ pole se nedoporučuje, protože Blazor má integrovanou podporu formátování kalendářních dat. I přes doporučení používejte yyyy-MM-dd pro správné fungování vazby pouze formát data, pokud je s typem date pole zadaný formát:

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

Vazba s parametry komponenty

Běžným scénářem je vytvoření vazby vlastnosti podřízené komponenty na vlastnost v nadřazené komponentě. Tento scénář se nazývá zřetězený svázání , protože současně probíhá více úrovní vazby.

V podřízené komponentě nemůžete implementovat zřetězený vazby se @bind syntaxí. Obslužná rutina a hodnota události musí být zadány samostatně pro podporu aktualizace vlastnosti v nadřazené z podřízené komponenty. Nadřazená komponenta stále využívá syntaxi k nastavení datové vazby @bind s podřízenou komponentou.

ChildBind Následující komponenta Year má parametr komponenty a .EventCallback<TValue> Podle konvence EventCallback<TValue> musí být parametr pojmenován jako název parametru komponenty s příponou "Changed". Syntaxe pojmenování je {PARAMETER NAME}Changed, kde {PARAMETER NAME} zástupný symbol je název parametru. V následujícím příkladu EventCallback<TValue> má název YearChanged.

EventCallback.InvokeAsync vyvolá delegáta přidruženého k vazbě s zadaným argumentem a odešle oznámení události pro změněnou vlastnost.

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));
}

Další informace o událostech a EventCallback<TValue>naleznete v části EventCallback článku o zpracování událostí ASP.NET CoreBlazor.

V následující Parent1 komponentě year je pole vázáno na Year parametr podřízené komponenty. Parametr Year je vázán, protože má doprovodnou YearChanged událost, která odpovídá typu 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);
}

Vazba parametru komponenty může také aktivovat @bind:after události. V následujícím příkladu se YearUpdated metoda spouští asynchronně po vytvoření vazby Year parametru komponenty.

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

@code {
    ...

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

Podle konvence může být vlastnost vázána na odpovídající obslužnou rutinu události zahrnutím @bind-{PROPERTY}:event atributu přiřazeného obslužné rutině, kde {PROPERTY} zástupný symbol je vlastnost. <ChildBind @bind-Year="year" /> odpovídá zápisu:

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

V složitějším a skutečném příkladu je následující PasswordEntry komponenta:

• <input> Nastaví hodnotu prvku na password pole.
• Zpřístupňuje změny Password vlastnosti nadřazené komponentě s EventCallback předáním aktuální hodnoty pole podřízené password položky jako argumentu.
• onclick Použije událost k aktivaci ToggleShowPassword metody. Další informace najdete v tématu ASP.NET Zpracování událostí 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;
}

Komponenta PasswordEntry se používá v jiné komponentě, například v následujícím PasswordBinding příkladu komponenty.

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";
}

Při počátečním PasswordBinding vykreslení password komponenty se hodnota Not set zobrazí v uživatelském rozhraní. Po počátečním vykreslení hodnota password odráží změny provedené v hodnotě parametru Password komponenty v komponentě PasswordEntry .

Poznámka:

Předchozí příklad vytvoří vazbu hesla jednosměrně z podřízené PasswordEntry komponenty na nadřazenou PasswordBinding komponentu. Obousměrná vazba není v tomto scénáři požadavkem, pokud cílem je, aby aplikace měla sdílenou součást pro zadávání hesel pro opakované použití aplikace, která pouze předává heslo nadřazené sadě. Přístup, který umožňuje obousměrnou vazbu bez zápisu přímo do parametru podřízené komponenty, najdete NestedChild v příkladu komponenty v části Bind ve více než dvou částech tohoto článku.

Proveďte kontroly nebo chyby soutisku v obslužné rutině. Následující revidovaná PasswordEntry komponenta uživateli poskytuje okamžitou zpětnou vazbu, pokud se v hodnotě hesla použije mezera.

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;
}

Vytvoření vazby mezi více než dvěma komponentami

Parametry můžete svázat pomocí libovolného počtu vnořených komponent, ale musíte respektovat jednosměrný tok dat:

• Změna toku oznámení v hierarchii
• Nové hodnoty parametrů protékají v hierarchii.

Běžným a doporučeným přístupem je ukládat pouze podkladová data v nadřazené komponentě, aby nedocházelo k nejasnostem o tom, jaký stav se musí aktualizovat, jak je znázorněno v následujícím příkladu.

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}";
}

V následující NestedChild komponentě komponenta NestedGrandchild :

• Přiřadí hodnotu ChildMessage syntaxi GrandchildMessage @bind:get .
• Aktualizuje GrandchildMessage se při ChildMessageChanged spuštění pomocí @bind:set syntaxe.

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}");
}

Alternativní přístup vhodný ke sdílení dat v paměti a mezi komponentami, které nejsou nutně vnořené, najdete v tématu ASP.NET správa stavu jádraBlazor.

Vázané pole nebo strom výrazu vlastnosti

Pro usnadnění hlubších interakcí s vazbou Blazor umožňuje zachytit strom výrazů vázaného pole nebo vlastnosti. Toho lze dosáhnout definováním vlastnosti s polem nebo názvem vlastnosti příponou Expression. Pro každé dané pole nebo vlastnost s názvem {FIELD OR PROPERTY NAME}je odpovídající vlastnost stromu výrazu pojmenována {FIELD OR PROPERTY NAME}Expression.

Následující ChildParameterExpression komponenta identifikuje model výrazu Year a název pole. A FieldIdentifier, který se používá k získání názvu modelu a pole, jednoznačně identifikuje jedno pole, které lze upravit. To může odpovídat vlastnosti objektu modelu nebo může být libovolná jiná pojmenovaná hodnota. Použití výrazu parametru je užitečné při vytváření vlastních ověřovacích komponent, které nejsou popsány v dokumentaci Microsoftu Blazor , ale řeší řadu prostředků třetích stran.

ChildParameterExpression.razor:

@using System.Linq.Expressions

<ul>
    <li>Year model: @yearField.Model</li>
    <li>Year field name: @yearField.FieldName</li>
</ul>

@code {
    private FieldIdentifier yearField;

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

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

    [Parameter]
    public Expression<Func<int>> YearExpression { get; set; } = default!;

    protected override void OnInitialized() => 
        yearField = FieldIdentifier.Create(YearExpression);
}

Parent3.razor:

@page "/parent-3"

<PageTitle>Parent 3</PageTitle>

<h1>Parent Example 3</h1>

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

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

@code {
    private int year = 1979;
}

Další materiály

• Detekce změn parametrů a další pokyny k Razor vykreslování komponent
• Blazor Přehled základních formulářů ASP.NET
• Vazba na přepínače ve formuláři
• Možnosti vazby InputSelect na hodnoty objektů null jazyka C#
• zpracování událostí ASP.NET Core Blazor : EventCallback oddíl
• Blazorukázky úložiště GitHub () (dotnet/blazor-samplespostup stažení)