Blazor C#'ta HTML Girişinden Değişken Nasıl Elde Edilir

Blazor, JavaScript yerine C# ile etkileşimli web uygulamaları oluşturmaya yönelik güçlü bir çerçevedir. Blazor'un temel özelliklerinden biri, C# kodunu HTML öğeleriyle bağlayarak kullanıcı girişlerini yakalamayı ve bunları uygulamanızda kullanmayı kolaylaştırmasıdır. Bu makalede, hem Blazor Server hem de Blazor WebAssembly uygulamalarında Blazor'daki bir HTML giriş öğesinden nasıl değişken alınacağını inceleyeceğiz.

Blazor'un İki Yönlü Veri Bağlamaya Giriş

Blazor, kullanıcı arayüzündeki (UI) değişikliklerin temel C# değişkenini otomatik olarak güncellemesine (veya bunun tersi) olanak tanıyan "iki yönlü veri bağlama" olarak bilinen bir özellik sunar. Kullanıcı tarafından bir HTML giriş alanına girilen verileri yakalamak ve bu değişiklikleri C# kodunuza anında yansıtmak istediğinizde bu son derece kullanışlıdır.

Başlarken

HTML giriş alanından bir değişken almak için birkaç temel bileşene ihtiyacınız vardır:

1. HTML Girişi : Kullanıcının veri girdiği giriş alanıdır.
2. C# Değişken : Girişten gelen verileri saklayan C# değişkeni.
3. Veri Bağlama : Giriş alanı ile C# değişkeni arasındaki bağlantı, genellikle Blazor'daki @bind yönergesi aracılığıyla.

Aşağıdaki bölümlerde bunun nasıl çalıştığını göstermek için çeşitli örnekleri inceleyeceğiz.

Örnek 1: Basit Metin Girişi Bağlama

Bir kullanıcının girdisini yakalamanın en basit yolu @bind yönergesini kullanmaktır. Bu, bir HTML giriş öğesini otomatik olarak bir C# değişkenine bağlar.

Kod Örneği (Tıraş Makinesi Bileşeni)

 @page "/input-example" <h3>Simple Input Binding in Blazor</h3> <label for="userName">Enter your name:</label> <input type="text" @bind="userName" /> <p>Hello, @userName!</p> @code { private string userName = string.Empty; }

Açıklama:

1. @bind yönergesi, input öğesini C#'taki userName değişkenine bağlar. Kullanıcı giriş alanına her yazı yazdığında userName değişkeni otomatik olarak güncellenir.
2. <p>Hello, @userName!</p> paragrafı, userName değerini dinamik olarak görüntüler ve kullanıcı yazarken güncellenen metni gerçek zamanlı olarak gösterir.

Bu örnekte, userName değişkeni giriş alanına bağlanmıştır ve Blazor'un iki yönlü bağlaması, kullanıcı metni değiştirdiğinde userName değerinin gerçek zamanlı olarak güncellenmesini sağlar.

Örnek 2: Düğme Tıklatıldığında Giriş Alma ve Kullanma

Bazen kullanıcı tarafından girilen veriler üzerinde, değeri göndermek veya daha fazla işlemek için bir düğmeye tıklamak gibi eylemler gerçekleştirmeniz gerekir. Bu Blazor'da da kolaylıkla başarılabilir.

Kod Örneği (Tıraş Makinesi Bileşeni)

 @page "/submit-input" <h3>Submit Input in Blazor</h3> <label for="age">Enter your age:</label> <input type="number" @bind="age" /> <button @>Submit</button> <p>You entered: @age</p> @code { private int age; private void SubmitAge() { // Do something with the age variable (eg, validation, submission, etc.) Console.WriteLine($"User's age is {age}"); } }

Açıklama:

1. @bind="age" direktifi giriş alanını age değişkenine bağlar.
2. @ düğmenin click olayını SubmitAge yöntemine bağlar.
3. Kullanıcı butona tıkladığında girilen yaşı konsola yazdıran SubmitAge metodu çağrılır.

Bu örnekte kullanıcı yaşını girebilmektedir ve “Gönder” butonuna tıkladığında SubmitAge metodu age değişkeni ile bir işlem gerçekleştirmek üzere tetiklenmektedir.

Örnek 3: Giriş Doğrulaması

Blazor, veri bağlamayı <EditForm> gibi form bileşenleriyle birleştirerek giriş doğrulamasını kolayca gerçekleştirmenize olanak tanır.

Kod Örneği (Tıraş Makinesi Bileşeni)

 @page "/validation-example" <h3>Input Validation in Blazor</h3> <EditForm Model="@person" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <label for="firstName">First Name:</label> <InputText @bind-Value="person.FirstName" /> <ValidationMessage For="@(() => person.FirstName)" /> <button type="submit">Submit</button> </EditForm> <p>You entered: @person.FirstName</p> @code { private Person person = new Person(); private void HandleValidSubmit() { // Process the valid input Console.WriteLine($"First Name: {person.FirstName}"); } public class Person { [Required] public string FirstName { get; set; } } }

Açıklama:

1. <EditForm> bileşeni, giriş alanlarını sarmak ve doğrulama gerçekleştirmek için kullanılır.
2. @bind-Value="person.FirstName" giriş alanını person nesnesinin FirstName özelliğine bağlar.
3. DataAnnotationsValidator bileşeni, girişi doğrulamak için veri ek açıklamalarını ( [Required] gibi) kullanır.
4. Giriş geçerliyse ve form gönderilirse, verileri işleyen HandleValidSubmit yöntemi çağrılır.

Doğrulama:

• Kullanıcı bir ad girmezse ( [Required] ek açıklamasından dolayı), doğrulama mesajı görünür ve giriş geçerli olana kadar form gönderilmez.

Diğer Giriş Türleriyle Gelişmiş Bağlama

Blazor, metin kutuları, onay kutuları, radyo düğmeleri, açılır menüler vb. gibi çok çeşitli giriş türlerini destekler. Değişkenleri bu öğelerden herhangi birine benzer şekilde bağlayabilirsiniz.

Örnek: Onay Kutusu Bağlama

 @page "/checkbox-example" <h3>Checkbox Binding in Blazor</h3> <label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" @bind="isSubscribed" /> <p>You are @(isSubscribed ? "subscribed" : "not subscribed") to the newsletter.</p> @code { private bool isSubscribed = false; }

Bu örnekte onay kutusu isSubscribed değişkenine bağlıdır ve kullanıcı kutuyu işaretlediğinde veya kutunun işaretini kaldırdığında isSubscribed değeri otomatik olarak güncellenir.

Çözüm

Blazor'un güçlü iki yönlü veri bağlama özelliği sayesinde, Blazor'da bir HTML girişinden değişken almak kolay ve etkilidir. @bind yönergesini kullanarak, giriş alanlarını hızlı bir şekilde C# değişkenlerine bağlayabilir, kullanıcı arayüzündeki değişikliklerin kodunuza yansıtılmasını veya tam tersini sağlayabilirsiniz.

İster basit formlar ister karmaşık giriş doğrulama mantığı oluşturuyor olun, Blazor'un veri bağlama yetenekleri kullanıcı girişleriyle çalışma sürecini basitleştirir. Blazor, metin kutularından onay kutularına kadar HTML ve C# arasındaki entegrasyonu sorunsuz bir şekilde yönetir ve bu da onu etkileşimli web uygulamaları oluşturmak için mükemmel bir seçim haline getirir.