Vytvoření vazby ovládacích prvků k datům v aplikacích Blazor

  • 7 min

Blazor umožňuje svázat ovládací prvky HTML s vlastnostmi, aby se změny hodnot automaticky zobrazovaly v uživatelském rozhraní.

Předpokládejme, že vyvíjíte stránku, která shromažďuje informace od zákazníků o jejich předvolbách pizzy. Chcete načíst informace z databáze a umožnit zákazníkům provádět změny, například zaznamenávat oblíbené zastavení. Když dojde ke změně uživatele nebo aktualizace v databázi, chcete, aby se nové hodnoty zobrazovaly v uživatelském rozhraní co nejrychleji.

V této lekci se dozvíte, jak pomocí datové vazby v Blazoru svázat prvky uživatelského rozhraní s datovými hodnotami, vlastnostmi nebo výrazy.

Co je datová vazba?

Pokud chcete, aby element HTML zobrazoval hodnotu, můžete napsat kód, který změní zobrazení. Když se hodnota změní, budete muset napsat další kód, který aktualizuje zobrazení. V Blazoru můžete pomocí datové vazby propojit element HTML s polem, vlastností nebo výrazem. Tímto způsobem se při změně hodnoty element HTML automaticky aktualizuje. Aktualizace obvykle probíhá rychle po změně a nemusíte psát žádný aktualizační kód.

K vytvoření vazby ovládacího prvku byste použili direktivu @bind :

@page "/"

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

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

Na předchozí stránce se hodnota aktualizuje vždy, když customerEmail proměnná změní její hodnotu <input> .

Poznámka:

Ovládací prvky, například <input>, aktualizují zobrazení pouze v případě, že se komponenta vykreslí, a ne při změně hodnoty pole. Vzhledem k tomu, že se komponenty Blazor vykreslují po spuštění kódu obslužné rutiny události, obvykle se aktualizace zobrazují rychle.

Vytvoření vazby prvků na konkrétní události

Direktiva @bind je inteligentní a rozumí ovládacím prvkům, které používá. Když například svážete hodnotu s textovým polem <input>, vytvoří vazbu atributu value . Zaškrtávací políčko <input> HTML má checked místo atributu value atribut. Atribut @bind místo toho automaticky používá tento checked atribut. Ve výchozím nastavení je ovládací prvek vázán na událost MODELU DOM onchange . Představte si například tuto stránku:

@page "/"

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

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

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

Při vykreslení stránky se výchozí hodnota Margherita zobrazí v <h1> prvku i v textovém poli. Když do textového pole zadáte novou oblíbenou pizzu, prvek se nezmění, <h1> dokud nezadáte tabulátor z textového pole nebo vyberete Enter , protože se onchange událost DOM aktivuje.

Často to je chování, které chcete. Předpokládejme ale, že chcete, <h1> aby se prvek aktualizoval hned po zadání libovolného znaku do textového pole. Tento výsledek můžete dosáhnout vazbou oninput na událost MODELU DOM. Chcete-li vytvořit vazbu k této události, musíte použít direktivy @bind-value a @bind-value:event direktivy:

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

V tomto případě se název změní hned po zadání libovolného znaku do textového pole.

Formátování vázaných hodnot

Pokud uživateli zobrazíte data, můžete chtít použít lokalizovaný formát dat. Předpokládejme například, že napíšete stránku speciálně pro uživatele Spojeného království, kteří dávají přednost zápisu kalendářních dat s prvním dnem. Direktivu @bind:format můžete použít k zadání jednoho řetězce formátu data:

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

Poznámka:

V době psaní jsou formátovací řetězce podporovány pouze s hodnotami kalendářních dat. Formáty měn, formáty čísel a další formáty mohou být přidány v budoucnu. Nejnovější informace o formátech vazeb najdete v dokumentaci k Blazoru v tématu Formátovací řetězce.

Jako alternativu k použití @bind:format direktivy můžete napsat kód jazyka C#, který formátuje vázanou hodnotu. Použijte objekty get a set přístupové objekty v definici člena, jak je znázorněno v tomto příkladu:

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

V další lekci použijete to, co jste se naučili.