Binda kontroller till data i Blazor-program

Slutförd

Med Blazor kan du binda HTML-kontroller till egenskaper så att ändrade värden visas automatiskt i användargränssnittet (UI).

Anta att du utvecklar en sida som samlar in information från kunder om deras pizzapreferenser. Du vill läsa in informationen från en databas och göra det möjligt för kunder att göra ändringar, till exempel spela in sina favorittoppar. När det sker en ändring från användaren eller en uppdatering i databasen vill du att de nya värdena ska visas i användargränssnittet så snabbt som möjligt.

I den här lektionen får du lära dig hur du använder databindning i Blazor för att koppla gränssnittselement till datavärden, egenskaper eller uttryck.

Vad är databindning?

Om du vill att ett HTML-element ska visa ett värde kan du skriva kod för att ändra visningen. Du måste skriva extra kod för att uppdatera visningen när värdet ändras. I Blazor kan du använda databindning för att ansluta ett HTML-element till ett fält, en egenskap eller ett uttryck. På så sätt uppdateras HTML-elementet automatiskt när värdet ändras. Uppdateringen sker vanligtvis snabbt efter ändringen och du behöver inte skriva någon uppdateringskod.

Om du vill binda en kontroll använder @bind du direktivet:

@page "/"

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

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

När variabeln customerEmail ändrar sitt värde på föregående sida uppdateras värdet <input> .

Note

Kontroller, till exempel <input>, uppdaterar endast deras visning när komponenten återges och inte när ett fälts värde ändras. Eftersom Blazor-komponenter renderas efter att händelsehanterarkoden har körts, visas uppdateringar vanligtvis snabbt.

Binda element till specifika händelser

Direktivet @bind är smart och förstår de kontroller det använder. När du till exempel binder ett värde till en textruta <input>binder det attributet value . En HTML-kryssruta <input> har ett checked attribut i stället för ett value attribut. Attributet @bind använder automatiskt det här checked attributet i stället. Som standard är kontrollen bunden till DOM-händelsen onchange . Tänk till exempel på den här sidan:

@page "/"

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

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

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

När sidan återges visas standardvärdet Margherita i både elementet <h1> och textrutan. När du anger en ny favoritpizza i textrutan ändras inte elementet <h1> förrän du tar en flik ur textrutan eller väljer Retur eftersom det är då onchange DOM-händelsen utlöses.

Ofta är det det beteende du vill ha. Anta dock att du vill att elementet <h1> ska uppdateras så fort du anger något tecken i textrutan. Du kan uppnå det här resultatet genom att binda till oninput DOM-händelsen i stället. Om du vill binda till den här händelsen måste du använda direktiven @bind-value och @bind-value:event :

@page "/"

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

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

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

I det här fallet ändras rubriken så snart du skriver något tecken i textrutan.

Formatera bundna värden

Om du visar datum för användaren kanske du vill använda ett lokaliserat dataformat. Anta till exempel att du skriver en sida specifikt för brittiska användare, som föredrar att skriva datum med dagen först. Du kan använda @bind:format direktivet för att ange en enskild datumformatsträng:

@page "/ukbirthdaypizza"

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

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

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

Note

I skrivande stund stöds formatsträngar endast med datumvärden. Valutaformat, talformat och andra format kan läggas till i framtiden. Information om bindningsformat finns i Formatera strängar i Blazor-dokumentationen.

Som ett alternativ till att använda @bind:format direktivet kan du skriva C#-kod för att formatera ett bundet värde. get Använd åtkomsterna och set i medlemsdefinitionen, som i det här exemplet:

@page "/pizzaapproval"
@using System.Globalization

<h1>Pizza: @PizzaName</h1>

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

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

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

I nästa lektion använder du det du har lärt dig om att binda kontroller till data.