ASP.NET Core Blazor-gegevensbinding

In dit artikel worden gegevensbindingsfuncties voor Razor onderdelen en DOM-elementen in Blazor-apps uitgelegd.

Bindingsfuncties

Razor onderdelen bieden gegevensbindingsfuncties met het @bindRazor richtlijnkenmerk met een veld, eigenschap of Razor expressiewaarde.

Het volgende voorbeeld verbindt:

• Een <input>-elementwaarde voor het veld C# inputValue.
• Een tweede <input> elementwaarde voor de eigenschap C# InputValue.

Wanneer een <input> element de focus verliest, wordt het gebonden veld of de gebonden eigenschap bijgewerkt.

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

Het tekstvak wordt alleen bijgewerkt in de gebruikersinterface wanneer het onderdeel wordt weergegeven, niet als reactie op het wijzigen van de waarde van het veld of de eigenschap. Omdat onderdelen worden weergegeven nadat de code van de gebeurtenis-handler wordt uitgevoerd, worden veld- en eigenschapsupdates meestal weergegeven in de gebruikersinterface direct nadat een gebeurtenis-handler is geactiveerd.

Als demonstratie van hoe gegevensbindingen in HTML worden samengesteld, koppelt het volgende voorbeeld de eigenschap InputValue aan de kenmerken van het tweede <input> element value en onchange (change). Het tweede <input>-element in het volgende voorbeeld is een conceptdemonstratie en is niet bedoeld om aan te geven hoe u gegevens in Razor onderdelen moet binden.

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

Wanneer het BindTheory onderdeel wordt weergegeven, komt de value van het HTML-demonstratieelement <input> element uit de eigenschap InputValue. Wanneer de gebruiker een waarde invoert in het tekstvak en de focus van het element wijzigt, wordt de onchange gebeurtenis geactiveerd en wordt de eigenschap InputValue ingesteld op de gewijzigde waarde. In werkelijkheid is de uitvoering van code complexer omdat @bind gevallen verwerkt waarin typeconversies worden uitgevoerd. Over het algemeen koppelt @bind de huidige waarde van een expressie aan het value kenmerk van de <input> en verwerkt wijzigingen met behulp van de geregistreerde handler.

Bind een eigenschap of veld aan andere DOM-gebeurtenissen door een @bind:event="{EVENT}" kenmerk op te delen met een DOM-gebeurtenis voor de {EVENT} tijdelijke aanduiding. In het volgende voorbeeld wordt de eigenschap InputValue gekoppeld aan de waarde van het <input> element wanneer de oninput gebeurtenis (input) van het element wordt geactiveerd. In tegenstelling tot de gebeurtenis onchange (change), die wordt geactiveerd wanneer het element de focus verliest, wordt oninput (input) geactiveerd wanneer de waarde van het tekstvak verandert.

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

Als u asynchrone logica na binding wilt uitvoeren, gebruikt u @bind:after="{DELEGATE}", waarbij {DELEGATE} een C#-delegate (methode) is. Een toegewezen C#-delegate wordt alleen uitgevoerd wanneer de gebonden waarde synchroon is toegewezen.

Het gebruik van een callbackparameter voor gebeurtenis (EventCallback/EventCallback<T>) met @bind:after wordt niet ondersteund. Geef in plaats daarvan een methode door die een Action of Task retourneert aan @bind:after.

In het volgende voorbeeld:

• Het value van elk <input> element is synchroon gebonden aan het searchText veld.
• De methode PerformSearch wordt asynchroon uitgevoerd:
  • Wanneer het eerste vak de focus verliest (onchange gebeurtenis) nadat de waarde is veranderd.
  • Na elke toetsaanslag (gebeurtenisoninput) in het tweede vak.
• PerformSearch roept een service aan met een asynchrone methode (FetchAsync) om zoekresultaten te retourneren.

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

Aanvullende voorbeelden

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

Zie ASP.NET Core Blazor input componentsvoor meer informatie over het InputText onderdeel.

Onderdelen ondersteunen tweerichtingsgegevensbinding door een paar @bind kenmerken te definiëren met een :get of :set modifier. De tijdelijke aanduiding {PARAMETER} in de volgende voorbeelden wordt gebruikt om een onderdeelparameter te binden:

• @bind:get / @bind-{PARAMETER}:get: hiermee geeft u de waarde op die moet worden gebonden.
• @bind:set / @bind-{PARAMETER}:set: hiermee geeft u een callback op voor wanneer de waarde wordt gewijzigd.

De :get en :set modifiers worden altijd samen gebruikt.

Met :get/:set binding kunt u reageren op een waardewijziging voordat deze wordt toegepast op de DOM en kunt u indien nodig de toegepaste waarde wijzigen. Terwijl bij @bind:event="{EVENT}" kenmerkbinding de {EVENT} tijdelijke aanduiding een DOM-gebeurtenis is, ontvangt u de melding nadat de DOM is bijgewerkt en kunt u de toegepaste waarde tijdens de binding niet wijzigen.

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

Zie ASP.NET Core Blazor input componentsvoor meer informatie over het InputText onderdeel.

Zie de sectie Bind voor meer dan twee onderdelen sectie verderop in dit artikel voor een ander voorbeeld van @bind:get en @bind:set.

Razor kenmerkbinding hoofdlettergevoelig is:

• @bind, @bind:eventen @bind:after geldig zijn.
• @Bind / @bind:Event / @bind:aftEr (hoofdletters) of @BIND/@BIND:EVENT/@BIND:AFTER (alle hoofdletters) zijn ongeldig.

Gebruik @bind:get/@bind:set modificaties en vermijd gebeurtenis-handlers voor tweerichtingsgegevensbinding.

Gegevensbinding in twee richtingen is niet mogelijk om te implementeren met een gebeurtenis-handler. Gebruik @bind:get/@bind:set modifiers voor gegevensbinding in twee richtingen.

❌ Overweeg de volgende disfunctionele benadering voor gegevensbinding in twee richtingen met behulp van een gebeurtenishandler:

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

De OnInput gebeurtenishandler verandert de waarde van inputValue naar Long! nadat er een vierde teken is ingevoerd. De gebruiker kan echter tekens blijven toevoegen aan de elementwaarde in de gebruikersinterface. De waarde van inputValue is niet gekoppeld aan de waarde van het element bij elke toetsaanslag. Het voorgaande voorbeeld is alleen geschikt voor gegevensbinding in één richting.

De reden voor dit gedrag is dat Blazor niet weet dat uw code de waarde van inputValue in de gebeurtenis-handler wil wijzigen. Blazor probeert geen DOM-elementwaarden en .NET-variabelewaarden overeen te laten komen, tenzij deze zijn gebonden aan @bind syntaxis. In eerdere versies van Blazorwordt gegevensbinding in twee richtingen geïmplementeerd door het element aan een eigenschap te binden en de waarde van de eigenschap te beheren met de setter. In ASP.NET Core in .NET 7 of hoger wordt @bind:get/@bind:set wijzigingssyntaxis gebruikt om gegevensbinding in twee richtingen te implementeren, zoals in het volgende voorbeeld wordt gedemonstreerde.

✔️ Overweeg de volgende juiste benadering met het gebruik van @bind:get/@bind:set voor gegevensbinding in twee richtingen:

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

Het gebruik van @bind:get/@bind:set modifiers bepaalt zowel de onderliggende waarde van inputValue via @bind:set en verbindt de waarde van inputValue met de waarde van het element via @bind:get. In het voorgaande voorbeeld ziet u de juiste benadering voor het implementeren van gegevensbinding in twee richtingen.

Binden aan een eigenschap met C# get en set toegangsfuncties

C# get en set accessors kunnen worden gebruikt om een aangepast bindingsformaatgedrag te maken, zoals in het volgende DecimalBinding onderdeel wordt gedemonstreerd. Het onderdeel verbindt een positieve of negatieve decimaal met maximaal drie decimalen aan een <input> element via een string eigenschap (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);
            }
        }
    }
}

Notitie

Bij meerdere componenten vereist tweerichtingsbinding met een eigenschap met get/set accessors het negeren van de Task die door EventCallback.InvokeAsync in de setter van de eigenschap worden geretourneerd. Voor gegevensbinding in twee richtingen raden we u aan @bind:get/@bind:set modifiers te gebruiken. Zie de @bind:get/@bind:set richtlijnen eerder in dit artikel voor meer informatie.

Zie het NestedChild van de Bind in meer dan twee onderdelen sectie in de .NET 6-versie van dit artikelvoor een voorbeeld van hoe de Task die door EventCallback.InvokeAsync worden geretourneerd, wordt verwijderd in .NET 6 of @bind:get/@bind:set eerder.

Selectie van meerdere opties met <select> elementen

Binding ondersteunt multiple optieselectie met <select> elementen. De @onchange gebeurtenis biedt een matrix van de geselecteerde elementen via gebeurtenisargumenten (ChangeEventArgs). De waarde moet zijn gebonden aan een matrixtype.

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; } = [];
    public string[] SelectedCities { get; set; } = [ "bal", "sea" ];

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

Zie de opties Binding <select> element voor C#-object null waarden voor informatie over hoe lege tekenreeksen en null waarden worden verwerkt in gegevensbinding.

Opties voor <select> element binden aan C#-object null waarden

Er is geen verstandige manier om een waarde van een optie van een <select>-element als een null-waarde van een C#-object weer te geven, omdat:

• HTML-kenmerken kunnen geen null waarden hebben. Het dichtstbijzijnde equivalent van null in HTML is het ontbreken van het HTML-value kenmerk van het <option>-element.
• Wanneer u een <option> zonder kenmerk value selecteert, behandelt de browser de waarde als de tekstinhoud van dat <option>element.

Het Blazor-framework probeert het standaardgedrag niet te onderdrukken, omdat dit betrekking zou hebben op:

• Een keten van omzeiloplossingen voor speciale gevallen maken in het framework.
• Ingrijpende wijzigingen in het huidige frameworkgedrag.

Het meest plausibele null equivalent in HTML is een lege tekenreeksvalue. Het Blazor-framework verwerkt null naar lege string-conversies voor tweerichtingsbinding met de waarde van een <select>.

Onleesbare waarden

Wanneer een gebruiker een onherstelbare waarde aan een gegevensgebonden element levert, wordt de onherstelbare waarde automatisch teruggezet naar de vorige waarde wanneer de bindingsgebeurtenis wordt geactiveerd.

Houd rekening met het volgende onderdeel, waarbij een <input> element is gebonden aan een int type met een initiële waarde van 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;
}

Binding is van toepassing op de onchange gebeurtenis van het element. Als de gebruiker de waarde van de invoer van het tekstvak naar 123.45 wijzigt en de focus verandert, wordt de waarde van het element teruggezet naar 123 wanneer onchange wordt uitgevoerd. Wanneer de waarde 123.45 wordt geweigerd ten gunste van de oorspronkelijke waarde van 123, begrijpt de gebruiker dat de waarde niet is geaccepteerd.

Voor de oninput-gebeurtenis (@bind:event="oninput") vindt een waardeherversie plaats na elke toetsaanslag die een niet-parseerbare waarde introduceert. Bij het instellen van de oninput-gebeurtenis met een int-gebonden type, wordt voorkomen dat een gebruiker een punt (.) teken typt. Een puntteken (.) wordt onmiddellijk verwijderd, zodat de gebruiker direct feedback ontvangt dat alleen gehele getallen zijn toegestaan. Er zijn scenario's waarin het terugdraaien van de waarde bij de oninput-gebeurtenis niet ideaal is, zoals wanneer de gebruiker een onparceerbare <input>-waarde mag wissen. Alternatieven zijn:

• Gebruik de gebeurtenis oninput niet. Gebruik de standaardgebeurtenis onchange, waarbij een ongeldige waarde niet wordt teruggezet totdat het element de focus verliest.
• Bind aan een null-type, zoals int? of string, en gebruik @bind:get/@bind:set modifiers (zoals eerder in dit artikel beschreven) of binden aan een eigenschap met aangepaste get en set accessorlogica om ongeldige vermeldingen te verwerken.
• Gebruik een invoeronderdeel, zoals InputNumber<TValue> of InputDate<TValue>, met formuliervalidatie. Invoeronderdelen samen met formuliervalidatieonderdelen bieden ingebouwde ondersteuning voor het beheren van ongeldige invoer:
  • Hiermee staat u de gebruiker toe ongeldige invoer op te geven en validatiefouten te ontvangen op de bijbehorende EditContext.
  • Validatiefouten weergeven in de gebruikersinterface zonder dat de gebruiker aanvullende webformuliergegevens invoert.

Tekenreeksen opmaken

Gegevensbinding werkt met een enkele DateTime notatiereeks met behulp van @bind:format="{FORMAT STRING}", waarbij de plaatsaanduiding {FORMAT STRING} de notatiereeks is. Andere notatie-expressies, zoals valuta- of getalnotaties, zijn momenteel niet beschikbaar, maar kunnen in een toekomstige release worden toegevoegd.

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

In de voorgaande code wordt het veldtype (type kenmerk) van het <input> element standaard ingesteld op text.

Nullable System.DateTime en System.DateTimeOffset worden ondersteund:

private DateTime? date;
private DateTimeOffset? dateOffset;

Het opgeven van een indeling voor het date veldtype wordt niet aanbevolen omdat Blazor ingebouwde ondersteuning heeft voor het opmaken van datums. Ondanks de aanbeveling gebruikt u alleen de yyyy-MM-dd datumnotatie voor binding om correct te functioneren als er een indeling wordt opgegeven met het date veldtype:

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

Binding met onderdeelparameters

Een veelvoorkomend scenario is het binden van een eigenschap van een kindcomponent aan een eigenschap in het oudercomponent. Dit scenario wordt een gekoppelde binding genoemd omdat er meerdere bindingsniveaus tegelijk plaatsvinden.

U kunt geen gekoppelde bindingen implementeren met @bind syntaxis in een onderliggend onderdeel. Een gebeurtenishandler en -waarde moeten afzonderlijk worden opgegeven om het bijwerken van de eigenschap te ondersteunen in de bovenliggende component vanuit het onderliggende component. Het oudercomponent maakt nog steeds gebruik van @bind-syntaxis om gegevensbinding met het kindcomponent in te stellen.

Het volgende ChildBind onderdeel heeft een Year componentparameter en een EventCallback<TValue>. Volgens de conventie moet de EventCallback<TValue> voor de parameter worden benoemd als de parameternaam van het onderdeel met het achtervoegsel 'Changed'. De naamgevingsyntaxis is {PARAMETER NAME}Changed, waarbij de tijdelijke aanduiding {PARAMETER NAME} de parameternaam is. In het volgende voorbeeld heeft de EventCallback<TValue> de naam YearChanged.

EventCallback.InvokeAsync roept de gemachtigde aan die is gekoppeld aan de binding met het opgegeven argument en verzendt een gebeurtenismelding voor de gewijzigde eigenschap.

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

Zie het gedeelte EventCallback van het artikel ASP.NET Core Blazor event handling voor meer informatie over gebeurtenissen en EventCallback<TValue>.

In het volgende Parent1-onderdeel is het year-veld gebonden aan de parameter Year van het kindonderdeel. De parameter Year kan worden gebonden omdat deze een bijbehorende YearChanged gebeurtenis heeft die overeenkomt met het type Year parameter.

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

Onderdeelparameterbinding kan ook @bind:after gebeurtenissen activeren. In het volgende voorbeeld wordt de methode YearUpdated asynchroon uitgevoerd nadat de parameter van het Year-onderdeel is gekoppeld.

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

@code {
    ...

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

Volgens de conventie kan een eigenschap worden gebonden aan een bijbehorende eventhandler door een @bind-{PROPERTY}:event kenmerk op te geven dat is toegewezen aan de handler, waarbij {PROPERTY} de eigenschap vertegenwoordigt. <ChildBind @bind-Year="year" /> is gelijk aan het schrijven van:

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

In een geavanceerder en realistischer voorbeeld, het volgende PasswordEntry-component:

• Hiermee stelt u de waarde van een <input> element in op een password veld.
• Hiermee worden wijzigingen van een Password eigenschap zichtbaar gemaakt aan een bovenliggende component met een EventCallback die de huidige waarde van het password veld van de onderliggende component doorgeeft als argument.
• Gebruikt de onclick-gebeurtenis om de methode ToggleShowPassword te activeren. Zie ASP.NET Core Blazor event handlingvoor meer informatie.

Waarschuwing

Sla geen app-geheimen, verbindingsreeksen, referenties, wachtwoorden, persoonlijke identificatienummers (PINCODE's), persoonlijke C#/.NET-code of persoonlijke sleutels/tokens op in code aan de clientzijde. Dit is altijd onveilig. In test- en productieomgevingen moeten server-side Blazor code en web-API's beveiligde authenticatiestromen gebruiken die voorkomen dat credentials in projectcode of configuratiebestanden worden opgeslagen. Buiten het testen van lokale ontwikkeling raden we u aan het gebruik van omgevingsvariabelen voor het opslaan van gevoelige gegevens te vermijden, omdat omgevingsvariabelen niet de veiligste benadering zijn. Voor het testen van lokale ontwikkeling wordt het hulpprogramma Secret Manager aanbevolen voor het beveiligen van gevoelige gegevens. Zie Gevoelige gegevens en referenties veilig onderhoudenvoor meer informatie.

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

Het PasswordEntry-onderdeel wordt gebruikt in een ander onderdeel, zoals het volgende PasswordBinding onderdeelvoorbeeld.

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

Wanneer het PasswordBinding-onderdeel in eerste instantie wordt weergegeven, wordt de password waarde van Not set weergegeven in de gebruikersinterface. Na de initiële rendering geeft de waarde van password wijzigingen weer die zijn aangebracht in de parameterwaarde van het Password onderdeel in het PasswordEntry-onderdeel.

Notitie

In het voorgaande voorbeeld wordt het wachtwoord in één richting van het onderliggende PasswordEntry-onderdeel gekoppeld aan het bovenliggende PasswordBinding-onderdeel. Dit scenario vereist geen binding in twee richtingen als het doel is dat de app een gedeeld wachtwoordinvoercomponent heeft voor hergebruik binnen de app, dat eenvoudigweg het wachtwoord aan de parent doorgeeft. Zie het voorbeeld van de component in de sectie Binden over meer dan twee onderdelen van dit artikel voor een benadering die tweerichtingsbinding toestaat zonder rechtstreeks naar deparameter van het onderliggende onderdeel te schrijven.

Voer controles uit of vang fouten op in de handler. Het volgende herziene PasswordEntry onderdeel geeft de gebruiker onmiddellijk feedback als er een spatie wordt gebruikt in de waarde van het wachtwoord.

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

Binden tussen meer dan twee onderdelen

U kunt parameters binden via een willekeurig aantal geneste onderdelen, maar u moet de gegevensstroom in één richting respecteren:

• Wijzigingsmeldingen gaan omhoog in de hiërarchie.
• Nieuwe parameterwaarden vloeien door de hiërarchie.

Een veelvoorkomende en aanbevolen benadering is om alleen de onderliggende gegevens op te slaan in het bovenliggende onderdeel om verwarring te voorkomen over welke status moet worden bijgewerkt, zoals wordt weergegeven in het volgende voorbeeld.

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

In het volgende NestedChild-onderdeel, het NestedGrandchild-onderdeel:

• Hiermee wijst u de waarde van ChildMessage toe aan GrandchildMessage met @bind:get syntaxis.
• Werkt GrandchildMessage bij wanneer ChildMessageChanged wordt uitgevoerd met @bind:set syntaxis.

Vóór de release van .NET 7 gebruikt tweerichtingsbinding tussen componenten get/set accessors met een derde eigenschap die de Task die door EventCallback.InvokeAsync in de setter worden geretourneerd, verwijdert. Zie het NestedChild-onderdeel van deze sectie in de .NET 6-versie van dit artikelvoor een voorbeeld van deze benadering voor .NET 6 of eerder voordat @bind:get/@bind:set modifiers een frameworkfunctie werden.

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

Zie ASP.NET Core Blazor state managementvoor een alternatieve benadering die geschikt is voor het delen van gegevens in het geheugen en voor onderdelen die niet noodzakelijkerwijs zijn genest.

Gebonden veld- of eigenschapsexpressiestructuur

Om diepere interacties met een binding te vergemakkelijken, kunt u met Blazor de expressieboom van een gekoppeld veld of eigenschap vastleggen. Dit wordt bereikt door een eigenschap te definiëren waarbij de veld- of eigenschapsnaam wordt voorzien van het achtervoegsel Expression. Voor een bepaald veld of een bepaalde eigenschap met de naam {FIELD OR PROPERTY NAME}heeft de bijbehorende eigenschap van de expressiestructuur de naam {FIELD OR PROPERTY NAME}Expression.

Het volgende ChildParameterExpression onderdeel identificeert het model en de veldnaam van de Year expressie. Een FieldIdentifier, die wordt gebruikt om het model en de veldnaam te verkrijgen, identificeert uniek één veld dat kan worden bewerkt. Dit kan overeenkomen met een eigenschap in een modelobject of kan een andere benoemde waarde zijn. Het gebruik van de expressie van een parameter is handig bij het maken van aangepaste validatieonderdelen, die niet worden gedekt door de documentatie van Microsoft Blazor, maar wordt behandeld door talloze resources van derden.

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

Aanvullende informatiebronnen

• Detectie van parameterwijzigingen en aanvullende richtlijnen voor het weergeven van Razor componenten
• Overzicht van ASP.NET Core Blazor forms
• Koppeling met radioknoppen in een formulier
• InputSelect-opties binden aan C#-object null waarden
• ASP.NET Core Blazor gebeurtenisafhandeling: EventCallback sectie
• Blazor GitHub-repository (dotnet/blazor-samples) (hoe te downloaden)