Veri bağlama ve olaylar

Tamamlandı

Şimdi bileşen işleme mantığını tanımlamayı ve kullanıcı arabirimi olaylarını işlemeyi inceleyelim.

C# ifade değerlerini işleme

Razor'da bir C# ifadesinin değerini işlemek istediğinizde, baştaki @ karakteri kullanırsınız. Örneğin, bir Counter bileşen alanının değerini currentCount şu şekilde işleyebilir:

<p role="status">Current count: @currentCount</p>

Razor genellikle bir C# ifadesinin ne zaman sona erip html yazmaya geri dönebileceğinizi anlayabilir. Ancak parens kullanarak ifadenin başlangıcı ve bitişi hakkında da açık olabilirsiniz.

<p role="status">Current count: @(currentCount)</p>

Denetim akışı ekleme

Normal C# deyimlerini kullanarak bileşen işleme mantığınıza denetim akışı ekleyebilirsiniz. Örneğin, aşağıdaki gibi bir C# if-deyimi kullanarak bazı içeriği koşullu olarak işleyebilirsiniz:

@if (currentCount > 3)
{
    <p>You win!</p>
}

C# kullanarak veriler arasında döngü yapabilir ve öğe listesini işleyebilirsiniz:

<ul>
    @foreach (var item in items)
    {
        <li>@item.Name</li>
    }
</ul>

Olayları işleme

Blazor bileşenleri genellikle kullanıcı arabirimi olaylarını işler. Kullanıcı arabirimi öğesinden bir olay için bir olay geri çağırma belirtmek için, ile @on başlayan ve olay adıyla biten bir öznitelik kullanırsınız. Örneğin, özniteliğini IncrementCount kullanarak @onclick düğme tıklama olayı için işleyici olarak yöntemini belirtebilirsiniz, örneğin:

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

, gibi @onchange@oninputdiğer HTML olayları için de C# olay işleyicileri belirtebilirsiniz. Olay işleme yöntemleri zaman uyumlu veya zaman uyumsuz olabilir. C# lambda ifadelerini kullanarak satır içi olay işleyicileri de tanımlayabilirsiniz:

<button class="btn btn-primary" @onclick="() => currentCount++">Click me</button>

Olay işleyicisi yöntemleri isteğe bağlı olarak olay hakkında bilgi içeren bir olay bağımsız değişkeni alabilir. Örneğin, aşağıdaki gibi değişen bir giriş öğesinin değerine erişebilirsiniz:

<input @onchange="InputChanged" />
<p>@message</p>

@code {
    string message = "";

    void InputChanged(ChangeEventArgs e)
    {
        message = (string)e.Value;
    }
}

Olay işleyicisi çalıştırıldıktan sonra Blazor bileşeni yeni durumuyla otomatik olarak işler, bu nedenle giriş değiştikten sonra ileti görüntülenir.

Veri bağlama

Genellikle ui öğesinin değerinin koddaki belirli bir değere bağlı olmasını istersiniz. UI öğesinin değeri değiştiğinde kod değeri değişmeli ve kod değeri değiştiğinde ui öğesi yeni değeri görüntülemelidir. Blazor'ın veri bağlama desteği, bu tür iki yönlü veri bağlamayı ayarlamayı kolaylaştırır.

Özniteliğini kullanarak bir UI öğesini koddaki belirli bir değere @bind bağlarsınız. Örneğin:

<input @bind="text" />
<button @onclick="() => text = string.Empty">Clear</button>
<p>@text</p>

@code {
    string text = "";
}

Girişin değerini değiştirdiğinizde, text alan yeni değerle güncelleştirilir. Temizle düğmesine tıklayarak alanın değerini text değiştirdiğinizde, girişin değeri de temizlenir.

Razor yönergeleri

Razor yönergeleri, Razor söz diziminde Razor dosyasının nasıl derlendiğini etkileyen ayrılmış anahtar sözcüklerdir. Razor yönergeleri her zaman karakteriyle @ başlar. Bazı Razor yönergeleri ve @pagegibi @code yeni bir satırın başında görünürken, diğerleri gibi @bindöğelere öznitelik olarak uygulanabilen özniteliklerdir. Razor yönergelerinin tam listesini Razor söz dizimi başvurusunda bulabilirsiniz.

Etkileşimi etkinleştirme

Bir bileşenden ui olaylarını işlemek ve veri bağlamayı kullanmak için bileşenin etkileşimli olması gerekir. Varsayılan olarak Blazor bileşenleri sunucudan statik olarak işlenir; bu da isteklere yanıt olarak HTML oluşturdukları ve ui olaylarını işleyemeyecekleri anlamına gelir. Yönergesini kullanarak @rendermode etkileşimli bir işleme modu uygulayarak bir bileşeni etkileşimli hale getirirsiniz.

Yönergesini @rendermode bir bileşen tanımına uygulayabilirsiniz:

@rendermode InteractiveServer

Veya bir bileşen örneğine:

<Counter @rendermode="InteractiveServer" />

Bileşen Counter şu anda uygulamamızdaki tek etkileşimli bileşendir ve etkileşimli sunucu işlemeyi kullanır. Etkileşimli sunucu işleme, tarayıcıyla bir WebSocket bağlantısı üzerinden sunucudan kullanıcı arabirimi olaylarını işler. Blazor, uygulamanın bileşenlerinin bunları işleyebilmesi için kullanıcı arabirimi olaylarını bu bağlantı üzerinden sunucuya gönderir. Blazor daha sonra tarayıcı DOM'sini işlenen güncelleştirmelerle güncelleştirir.

Alternatif olarak Blazor bileşenleri, istemciden etkileşimli olarak işlemek için işleme modunu kullanabilir InteractiveWebAssembly . Bu modda, bileşen kodu tarayıcıya indirilir ve WebAssembly tabanlı .NET çalışma zamanı kullanılarak istemci tarafı çalıştırılır.

Kullanmayı seçtiğiniz etkileşimli işleme modu, uygulamanızın gereksinimlerine bağlıdır. Şu anda Blazor projemiz yalnızca sunucu tabanlı işleme için ayarlanmıştır, bu nedenle bu modülde statik ve etkileşimli sunucu işleme ile devam ediyoruz.