ASP.NET Core Blazor databindning

Den här artikeln beskriver databindningsfunktioner för Razor komponenter och DOM-element i Blazor appar.

Bindningsfunktioner

Razor komponenter tillhandahåller databindningsfunktioner med @bindRazor-direktivattributet med ett fält, en egenskap eller ett Razor uttrycksvärde.

Följande exempelbindningar:

• Ett <input> elementvärde i fältet C# inputValue.
• Ett andra <input> elementvärde till egenskapen C# InputValue.

När ett <input> element förlorar fokus uppdateras dess bundna fält eller egenskap.

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

Textrutan uppdateras endast i användargränssnittet när komponenten återges, inte som svar på att ändra fältets eller egenskapens värde. Eftersom komponenterna återges efter att händelsehanterarkoden har körts återspeglas vanligtvis fält- och egenskapsuppdateringar i användargränssnittet omedelbart efter att en händelsehanterare har utlösts.

Som en demonstration av hur databindning består i HTML binder följande exempel egenskapen InputValue till det andra <input>-elementets attribut value och onchange (change). Det andra <input> elementet i följande exempel är en konceptdemonstration och är inte avsedd att föreslå hur du ska binda data i Razor komponenter.

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

När komponenten BindTheory återges kommer value för HTML-demonstrationselementet <input> från egenskapen InputValue. När användaren anger ett värde i textrutan och ändrar elementfokus utlöses onchange händelsen och egenskapen InputValue anges till det ändrade värdet. I själva verket är kodkörningen mer komplex eftersom @bind hanterar fall där typkonverteringar utförs. I allmänhet associerar @bind det aktuella värdet för ett uttryck med attributet value för <input> och hanterar ändringar med hjälp av den registrerade hanteraren.

Binda en egenskap eller ett fält på andra DOM-händelser genom att inkludera ett @bind:event="{EVENT}"-attribut med en DOM-händelse för platshållaren för {EVENT}. I följande exempel binder egenskapen InputValue till <input>-elementets värde när elementets oninput händelse (input) utlöses. Till skillnad från den onchange händelsen (change), som utlöses när elementet förlorar fokus, utlöses oninput (input) när värdet för textrutan ändras.

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

Om du vill köra asynkron logik efter bindning använder du @bind:after="{DELEGATE}", där platshållaren {DELEGATE} är ett C#-ombud (metod). En tilldelad C#-delegering verkställs inte förrän det bundna värdet har tilldelats synkront.

Det går inte att använda en händelseåteranropsparameter (EventCallback/EventCallback<T>) med @bind:after. Skicka i stället en metod som returnerar en Action eller Task till @bind:after.

I följande exempel:

• Varje <input>-elements value är bundet till searchText-fältet synkront.
• Metoden PerformSearch körs asynkront:
  • När den första rutan förlorar fokus (onchange händelse) efter att värdet har ändrats.
  • Efter varje tangenttryckning (oninput händelse) i den andra rutan.
• PerformSearch anropar en tjänst med en asynkron metod (FetchAsync) för att returnera sökresultat.

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

Ytterligare exempel

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

Mer information om komponenten InputText finns i ASP.NET Core Blazor-indatakomponenter.

Komponenter stöder dubbelriktad databindning genom att definiera ett par @bind attribut med antingen en :get eller :set modifierare . Platshållaren {PARAMETER} i följande exempel används för att binda en komponentparameter:

• @bind:get / @bind-{PARAMETER}:get: Anger värdet som ska bindas.
• @bind:set / @bind-{PARAMETER}:set: Anger ett återanrop för när värdet ändras.

De :get och :set modifierare används alltid tillsammans.

Med :get/:set bindning kan du reagera på en värdeändring innan den tillämpas på DOM och du kan ändra det tillämpade värdet om det behövs. Med @bind:event="{EVENT}" attributbindning, där {EVENT} platshållare är en DOM-händelse, får du meddelandet efter att DOM har uppdaterats och det finns ingen kapacitet att ändra det tillämpade värdet under bindningen.

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

Mer information om komponenten InputText finns i ASP.NET Core Blazor-indatakomponenter.

Ett annat exempel på användning av @bind:get och @bind:setfinns i avsnittet Bind över fler än två komponenter senare i den här artikeln.

Razor attributbindning är skiftlägeskänslig:

• @bind, @bind:eventoch @bind:after är giltiga.
• @Bind / @bind:Event / @bind:aftEr (versaler) eller @BIND/@BIND:EVENT/@BIND:AFTER (alla versaler) är ogiltiga.

Använd @bind:get/@bind:set modifierare och undvik händelsehanterare för dubbelriktad databindning

Dubbelriktad databindning är inte möjligt att implementera med en händelsehanterare. Använd @bind:get/@bind:set modifierare för dubbelriktad databindning.

❌ Överväg följande dysfunktionella metod för dubbelriktad databindning med hjälp av en händelsehanterare:

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

Händelsehanteraren för OnInput uppdaterar värdet för inputValue till Long! efter att ett fjärde tecken har angetts. Användaren kan dock fortsätta att lägga till tecken i elementvärdet i användargränssnittet. Värdet för inputValue är inte bundet tillbaka till elementets värde med varje tangenttryckning. Det föregående exemplet har endast förmåga till envägsbindning av data.

Orsaken till det här beteendet är att Blazor inte är medveten om att koden avser att ändra värdet för inputValue i händelsehanteraren. Blazor försöker inte tvinga DOM-elementvärden och .NET-variabelvärden att matcha om de inte är bundna med @bind syntax. I tidigare versioner av Blazor, implementeras dubbelriktad databindning genom att använda , som binder elementet till en egenskap och styr egenskapens värde med dess setter. I ASP.NET Core i .NET 7 eller senare används @bind:get/@bind:set modifierarsyntax för att implementera dubbelriktad databindning, vilket visas i nästa exempel.

✔️ Överväg följande korrekt metod med hjälp av @bind:get/@bind:set för dubbelriktad databindning:

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

Med hjälp av @bind:get/@bind:set-modifierare styr båda det underliggande värdet för inputValue via @bind:set och binder värdet för inputValue till elementets värde via @bind:get. Föregående exempel visar rätt metod för att implementera dubbelriktad databindning.

Bindning till en egenskap med C#-accessormetoderna get och set

C# get- och set--accessor kan användas för att skapa ett anpassat bindningsformatbeteende, vilket visas i följande DecimalBinding-komponenten. Komponenten binder en positiv eller negativ decimal med upp till tre decimaler till ett <input> element genom en string egenskap (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);
            }
        }
    }
}

Note

För flera komponenter kräver dubbelriktad bindning till en egenskap med get/set-accessorer att man kastar bort Task som returneras av EventCallback.InvokeAsync i egenskapens setter. För dubbelriktad databindning rekommenderar vi att du använder @bind:get/@bind:set modifierare. Mer information finns i @bind:get/@bind:set vägledning tidigare i den här artikeln.

Om du vill se ett exempel på hur Task som returneras av EventCallback.InvokeAsync ignoreras i .NET 6 eller tidigare innan @bind:get/@bind:set modifierare blev en ramverksfunktion kan du läsa NestedChild komponenten i Bind över fler än två komponenter avsnittet i .NET 6-versionen av den här artikeln.

Flera alternativval med <select> element

Bindning stöder val av multiple alternativ med <select> element. Händelsen @onchange innehåller en matris med de markerade elementen via händelseargument (ChangeEventArgs). Värdet måste vara bundet till en matristyp.

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

Information om hur tomma strängar och null-värden hanteras i databindning finns i avsnittet om -bindningens alternativ för <select>-element till C#-objektvärden null i-sektionen.

Binda alternativ för <select>-elementet till värden i C#-objekt null

Det finns inget vettigt sätt att representera ett <select> elementalternativvärde som ett C#-objekt null värde, eftersom:

• HTML-attribut kan inte ha null värden. Den närmaste motsvarigheten till null i HTML är avsaknad av HTML-value-attributet från <option>-elementet.
• När du väljer ett <option> utan value-attribut behandlar webbläsaren värdet som textinnehållet till elementet <option>.

Det Blazor ramverket försöker inte undertrycka standardbeteendet eftersom det skulle innebära:

• Skapa en kedja med lösningar för specialfall i ramverket.
• Brytande ändringar av ramverksbeteende.

Den mest sannolika null motsvarigheten i HTML är en tom strängvalue. det Blazor ramverket hanterar null till tomma strängkonverteringar för dubbelriktad bindning till ett <select>värde.

Värden som inte kan särskiljas

När en användare ger ett värde som inte går att komma åt till ett databundet element återställs det oförstörbara värdet automatiskt till det tidigare värdet när bindningshändelsen utlöses.

Tänk på följande komponent, där ett <input>-element är bundet till en int typ med ett initialt värde på 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;
}

Bindning gäller för elementets onchange händelse. Om användaren uppdaterar värdet för textrutans post till 123.45 och ändrar fokus, återställs elementets värde till 123 när onchange utlöses. När värdet 123.45 avvisas till förmån för det ursprungliga värdet för 123förstår användaren att deras värde inte accepterades.

För händelsen oninput (@bind:event="oninput") inträffar en värdeåterversion efter en tangenttryckning som introducerar ett värde som inte kan särskiljas. När du riktar in dig på oninput händelsen med en int-bound-typ hindras en användare från att skriva ett punkttecken (.) . Ett punkttecken (.) tas bort omedelbart, så användaren får omedelbar feedback om att endast heltal tillåts. Det finns scenarier där det inte är idealiskt att återställa värdet på den oninput händelsen, till exempel när användaren ska tillåtas att rensa ett <input> värde som inte går att komma åt. Alternativen är:

• Använd inte händelsen oninput. Använd standardhändelsen onchange, där ett ogiltigt värde inte återställs förrän elementet förlorar fokus.
• Binda till en nullbar typ, till exempel int? eller string och använd antingen @bind:get/@bind:set modifierare (beskrivs tidigare i den här artikeln) eller binda till en egenskap med anpassade get och set accessorlogik för att hantera ogiltiga poster.
• Använd en indatakomponent, till exempel InputNumber<TValue> eller InputDate<TValue>, med formulärverifiering. Indatakomponenter tillsammans med formulärverifieringskomponenter ger inbyggt stöd för att hantera ogiltiga indata:
  • Tillåt att användaren anger ogiltiga indata och får valideringsfel på den associerade EditContext.
  • Visa valideringsfel i användargränssnittet utan att störa användaren som anger ytterligare webbformulärsdata.

Formatera strängar

Databindningen fungerar med en enda DateTime formatsträng med hjälp av @bind:format="{FORMAT STRING}", där platshållaren {FORMAT STRING} är formatsträngen. Andra formatuttryck, till exempel valuta- eller talformat, är inte tillgängliga just nu, men kan läggas till i en framtida version.

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

I föregående kod har <input>-elementets fälttyp (type-attributet) som standardvärde text.

Nullbara System.DateTime och System.DateTimeOffset stöds:

private DateTime? date;
private DateTimeOffset? dateOffset;

Det rekommenderas inte att ange ett format för date fälttyp eftersom Blazor har inbyggt stöd för att formatera datum. Trots rekommendationen använder du endast yyyy-MM-dd datumformat för bindning för att fungera korrekt om ett format har angetts med date fälttyp:

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

Bindning med komponentparametrar

Ett vanligt scenario är att binda en egenskap för en underordnad komponent till en egenskap i föräldrakomponenten. Det här scenariot kallas för en länkad bindning eftersom flera bindningsnivåer sker samtidigt.

Du kan inte implementera länkade bindningar med @bind syntax i en underordnad komponent. En händelsehanterare och ett värde måste anges separat för att stödja uppdatering av egenskapen i föräldern från barnkomponenten. Den överordnade komponenten använder fortfarande @bind syntax för att konfigurera databindning med den underordnade komponenten.

Följande ChildBind komponent har en Year komponentparameter och en EventCallback<TValue>. Enligt konventionen måste EventCallback<TValue> för parametern namnges som komponentparameterns namn med suffixet "Changed". Namngivningssyntaxen är {PARAMETER NAME}Changed, där platshållaren {PARAMETER NAME} är parameternamnet. I följande exempel heter EventCallback<TValue>YearChanged.

EventCallback.InvokeAsync anropar ombudet som är associerat med bindningen med det angivna argumentet och skickar ett händelsemeddelande för den ändrade egenskapen.

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

Mer information om händelser och EventCallback<TValue>finns i avsnittet EventCallback i artikeln ASP.NET Core Blazor händelsehantering.

I komponenten Parent1 nedan är fältet year bundet till parametern Year i den underordnade komponenten. Parametern Year kan bindas eftersom den har en tillhörande YearChanged händelse som matchar typen av parametern 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);
}

Komponentparameterbindning kan också utlösa @bind:after händelser. I följande exempel körs metoden YearUpdated asynkront efter att Year-komponentparametern har bindts.

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

@code {
    ...

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

Enligt konventionen kan en egenskap bindas till en motsvarande händelsehanterare genom att inkludera ett @bind-{PROPERTY}:event attribut som tilldelats hanteraren, där {PROPERTY} platshållare är egenskapen. <ChildBind @bind-Year="year" /> motsvarar att skriva:

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

I ett mer sofistikerat och verkligt exempel, den följande PasswordEntry-komponenten:

• Anger värdet för ett <input> element till ett password fält.
• Exponerar ändringar av en Password-egenskap för en överordnad komponent med en EventCallback som skickar det aktuella värdet för det underordnade fältet password som argument.
• Använder händelsen onclick för att utlösa metoden ToggleShowPassword. Mer information finns i ASP.NET Core Blazor händelsehantering.

Varning

Lagra inte apphemligheter, anslutningssträngar, autentiseringsuppgifter, lösenord, personliga identifieringsnummer (PIN),privat C#/.NET-kod eller privata nycklar/token i kod på klientsidan, vilket är alltid osäker. I test-/mellanlagrings- och produktionsmiljöer bör Blazor kod på serversidan och webb-API:er använda säkra autentiseringsflöden som undviker att underhålla autentiseringsuppgifter i projektkod eller konfigurationsfiler. Förutom testning av lokal utveckling rekommenderar vi att du undviker användning av miljövariabler för att lagra känsliga data, eftersom miljövariabler inte är den säkraste metoden. För testning av lokal utveckling rekommenderas verktyget Secret Manager för att skydda känsliga data. Mer information finns i På ett säkert sätt underhålla känsliga data och autentiseringsuppgifter.

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

Komponenten PasswordEntry används i en annan komponent, till exempel följande PasswordBinding komponentexempel.

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

När PasswordBinding-komponenten första gången återges, visas password-värdet av Not set i användargränssnittet. Efter den första återgivningen återspeglar värdet för password ändringar som gjorts i Password komponentparametervärdet i komponenten PasswordEntry.

Notera

Föregående exempel binder lösenordet envägs från den underordnade PasswordEntry komponenten till den överordnade PasswordBinding komponenten. Dubbelriktad bindning är inte ett krav i det här scenariot om målet är att appen ska ha en lösenordsinmatningskomponent för gemensamt bruk som kan återanvändas över hela appen och som enkelt vidarebefordrar lösenordet till föräldrakomponenten. En metod som tillåter dubbelriktad bindning utan att skriva direkt till den underordnade komponentens parameterfinns i NestedChild komponentexemplet i avsnittet Bind över fler än två komponenter i den här artikeln.

Utför kontroller eller fånga fel i hanteringsmekanismen. Följande reviderade PasswordEntry komponent ger omedelbar feedback till användaren om ett blanksteg används i lösenordets värde.

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

Binda över fler än två komponenter

Du kan binda parametrar genom valfritt antal kapslade komponenter, men du måste respektera enkelriktat dataflöde:

• Ändringsmeddelanden flödar upp i hierarkin.
• Nya parametervärden flödar ned i hierarkin.

En vanlig och rekommenderad metod är att endast lagra underliggande data i den överordnade komponenten för att undvika förvirring om vilket tillstånd som måste uppdateras, enligt följande exempel.

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

I den följande komponenten NestedChild, komponenten NestedGrandchild:

• Tilldelar värdet för ChildMessage till GrandchildMessage med @bind:get syntax.
• Uppdaterar GrandchildMessage när ChildMessageChanged körs med @bind:set syntax.

Före utgåvan av .NET 7 använde man dubbelriktad bindning mellan komponenter med hjälp av get/set-accessorer och en tredje egenskap som tar bort Task som returneras av EventCallback.InvokeAsync i dess setter. Ett exempel på den här metoden för .NET 6 eller tidigare innan @bind:get/@bind:set modifierare blev en ramverksfunktion finns i NestedChild komponenten i det här avsnittet i .NET 6-versionen av den här artikeln.

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

En alternativ metod som lämpar sig för att dela data i minnet och mellan komponenter som inte nödvändigtvis är kapslade finns i ASP.NET Core Blazor state management.

Bundet fält eller egenskapsuttrycksträd

För att underlätta djupare interaktioner med en bindning kan du Blazor fånga in uttrycksträdet för ett bundet fält eller en egenskap. Detta uppnås genom att definiera en egenskap med fältet eller egenskapsnamnet med suffixet Expression. För ett visst fält eller en egenskap med namnet {FIELD OR PROPERTY NAME}heter motsvarande uttrycksträdsegenskap {FIELD OR PROPERTY NAME}Expression.

Följande ChildParameterExpression-komponent identifierar Year-uttryckets modell- och fältnamn. Ett FieldIdentifier, som används för att hämta modell- och fältnamnet, identifierar unikt ett enda fält som kan redigeras. Detta kan motsvara en egenskap på ett modellobjekt eller vara något annat namngivet värde. Användning av ett parameteruttryck är användbart när du skapar anpassade valideringskomponenter, som inte omfattas av Microsoft Blazor-dokumentationen, men som hanteras av många resurser från tredje part.

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

Ytterligare resurser

• Detektering av parameterändringar och ytterligare vägledning för Razor komponentrendering
• ASP.NET Core Blazor formuläröversikt
• Bindning till alternativknappar i ett formulär
• Binda InputSelect alternativ till C#-objekt null värden
• ASP.NET Core Blazor händelsehantering: EventCallback avsnitt
• Blazor exempel på GitHub-lagringsplats (dotnet/blazor-samples) (hur du laddar ned)