Blazor uygulamalarında veri ile denetim bileşenlerini bağlamak

Tamamlandı

Blazor, değişen değerlerin kullanıcı arabiriminde (UI) otomatik olarak görüntülenmesi için HTML denetimlerini özelliklere bağlamanıza olanak tanır.

Müşterilerden pizza tercihleri hakkında bilgi toplayan bir sayfa geliştirdiğinizi varsayalım. Bilgileri bir veritabanından yüklemek ve müşterilerin sık kullandıkları toppingleri kaydetme gibi değişiklikler yapmalarını sağlamak istiyorsunuz. Kullanıcıdan veya veritabanında bir güncelleştirmeden bir değişiklik olduğunda, yeni değerlerin kullanıcı arabiriminde mümkün olan en kısa sürede görüntülenmesini istersiniz.

Bu ünitede Blazor'da kullanıcı arabirimi öğelerini veri değerlerine, özelliklere veya ifadelere bağlamak için veri bağlamayı kullanmayı öğreneceksiniz.

Veri bağlama nedir?

HTML öğesinin bir değer görüntülemesini istiyorsanız, görüntüyü değiştirmek için kod yazabilirsiniz. Değer değiştiğinde görüntüyü güncelleştirmek için ek kod yazmanız gerekir. Blazor'da, bir HTML öğesini bir alana, özelliğe veya ifadeye bağlamak için veri bağlamayı kullanabilirsiniz. Bu şekilde, değer değiştiğinde HTML öğesi otomatik olarak güncelleştirilir. Güncelleştirme genellikle değişiklik sonrasında hızlı bir şekilde gerçekleşir ve herhangi bir güncelleştirme kodu yazmanız gerekmez.

Bir denetimi bağlamak için şu yönergeyi @bind kullanabilirsiniz:

@page "/"

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

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

Önceki sayfada, customerEmail değişkeni değerini her değiştirdiğinde, <input> değeri güncellenir.

Note

gibi <input>denetimler, yalnızca bileşen işlendiğinde ve alanın değeri değiştiğinde değil, görüntülerini güncelleştirir. Blazor bileşenleri herhangi bir olay işleyicisi kodu yürütülürken işlendiğinden, pratikte güncelleştirmeler genellikle hızlı bir şekilde görüntülenir.

Öğeleri belirli olaylara bağlama

yönergesi @bind akıllıdır ve kullandığı denetimleri anlar. Örneğin, bir metin kutusuna <input> bir değer bağladığınızda, value özniteliğini bağlar. HTML onay kutusunun <input> özniteliği yerine checked özniteliği vardır. @bind özniteliği yerine otomatik olarak bu checked özniteliği kullanır. Varsayılan olarak, denetim DOM onchange olayına bağlıdır. Örneğin, şu sayfayı göz önünde bulundurun:

@page "/"

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

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

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

Sayfa işlendiğinde, varsayılan değer Margherita hem <h1> öğesinde hem de metin kutusunda görüntülenir. Metin kutusuna yeni bir favori pizza girdiğinizde, siz metin kutusundan çıkana veya <h1>'ı seçene kadar öğesi değişmez çünkü onchange DOM olayı o zaman tetiklenir.

Çoğu zaman, istediğiniz davranış bu olur. Metin kutusuna herhangi bir karakter girdiğiniz anda <h1> öğesinin güncellenmesini istediğinizi varsayalım. Bunun yerine DOM olayına oninput bağlanarak bu sonuca ulaşabilirsiniz. Bu olaya bağlanmak için @bind-value ve @bind-value:event yönergelerini kullanmanız gerekir.

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

Bu durumda, metin kutusuna herhangi bir karakter yazdığınızda başlık değişir.

Bağlı değerleri biçimlendirme

Kullanıcıya tarihleri görüntülerseniz, yerelleştirilmiş bir veri biçimi kullanmak isteyebilirsiniz. Örneğin, özellikle İngiltere kullanıcıları için bir sayfa yazdığınızı ve ilk günle tarih yazmayı tercih ettiğinizi varsayalım. Yönergesini @bind:format kullanarak tek bir tarih biçimi dizesi belirtebilirsiniz:

@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

Yazma sırasında, biçim dizeleri yalnızca tarih değerleriyle desteklenir. Para birimi biçimleri, sayı biçimleri ve diğer biçimler gelecekte eklenebilir. Bağlama biçimleriyle ilgili en son bilgileri denetlemek için Blazor belgelerindeki Dizeleri biçimlendirme bölümüne bakın.

yönergesini @bind:format kullanmaya alternatif olarak, ilişkili bir değeri biçimlendirmek için C# kodu yazabilirsiniz. get ve set erişimcilerini, bu örnekte olduğu gibi üye tanımında kullanın.

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

Sonraki ünitede, denetim bağlama hakkında öğrendiklerini verilere uygulayacaksınız.