Blazor bileşenleriyle kullanıcı arabirimi oluşturma

Tamamlandı

Blazor bileşenleri, .NET kodu kullanarak dinamik içerik içeren HTML web sayfalarını veya bölümlerini tanımlamanıza olanak sağlar. Blazor'da JavaScript yerine C# kullanarak dinamik içerik formüle edebilirsiniz.

Yeni bir modern web sitesi oluşturmak için bir pizza teslimat şirketinde çalıştığınızı varsayalım. Çoğu site kullanıcısının giriş sayfası olacak bir karşılama sayfasıyla başlıyorsunuz. Bu sayfada özel fırsatlar ve popüler pizzalar görüntülemek istiyorsunuz.

Bu ünitede Blazor'da bileşenler oluşturmayı ve bu bileşenlerde dinamik içerik işleyen kod yazmayı öğreneceksiniz.

Blazor bileşenlerini anlama

Blazor, geliştiricilerin C# kodu yazarak zengin bir etkileşimli kullanıcı arabirimi (UI) oluşturmak için kullanabileceği bir çerçevedir. Blazor ile, hem sunucu tarafı hem de istemci tarafı tüm kodunuz için aynı dili kullanabilirsiniz. Mobil cihazlardaki tarayıcılar da dahil olmak üzere birçok farklı tarayıcıda görüntülenmek üzere işleyebilirsiniz.

Note

Blazor uygulamalarında kod için iki barındırma modeli vardır:

• Blazor Server: Bu modelde, uygulama bir ASP.NET Core uygulaması içinde web sunucusunda yürütülür. İstemci tarafında kullanıcı arabirimi güncelleştirmeleri, olaylar ve JavaScript çağrıları, istemci ile sunucu arasında bir SignalR bağlantısı üzerinden gönderilir. Bu modülde bu modelin kodunu ele alacağız.
• Blazor WebAssembly: Bu modelde, Blazor uygulaması, bağımlılıkları ve .NET çalışma zamanı tarayıcıda indirilir ve çalıştırılır.

Blazor'da, kullanıcı arabirimini bileşenleri olarak adlandırılan kodun bağımsız bölümlerinden oluşturursunuz. Her bileşen HTML ve C# kodunun bir karışımını içerebilir. Bileşenler, kodun yönergesiyle işaretlendiği @codeRazor söz dizimi kullanılarak yazılır. Değişkenlere erişmek, değerlere bağlanmak ve diğer işleme görevlerini gerçekleştirmek için diğer yönergeler kullanılabilir. Uygulama derlendiğinde, HTML ve kod bir bileşen sınıfına derlenir. Bileşenler, uzantılı .razor dosyalar olarak yazılır.

Note

Razor söz dizimi web sayfalarına .NET kodu eklemek için kullanılır. ASP.NET MVC (Model-View-Controller) uygulamalarında, .cshtml uzantısına sahip dosyaları kullanabilirsiniz. Blazor'da bileşenleri yazmak için Razor söz dizimi kullanılır. Bu bileşenler bunun yerine uzantıya .razor sahiptir ve denetleyicilerle görünümler arasında kesin bir ayrım yoktur.

Blazor bileşeninin basit bir örneği aşağıda verilmişti:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}

Bu örnekte kod, welcomeMessageadlı bir dize değişkeninin değerini ayarlar. Bu değişken HTML'deki <p> etiketleri içinde işlenir. Bu ünitenin devamında daha karmaşık örnekleri inceleyeceğiz.

Blazor bileşenleri oluşturma

blazor komut satırı arabiriminde (CLI) şablonu kullanarak bir Blazor uygulaması oluşturduğunuzda, varsayılan olarak birkaç bileşen eklenir:

dotnet new blazor -o BlazingPizzaSite

Varsayılan bileşenler Index.razor giriş sayfasını ve Counter.razor demo bileşenini içerir. Bu bileşenlerin her ikisi de Sayfalar klasörüne yerleştirilir. Bu görünümleri gereksinimlerinize uyacak şekilde değiştirebilir veya silip yeni bileşenlerle değiştirebilirsiniz.

Mevcut bir web uygulamasına yeni bir bileşen eklemek için şu komutu kullanın:

dotnet new razorcomponent -n PizzaBrowser -o Pages

• -n seçeneği, eklenecek bileşenin adını belirtir. Bu örnek PizzaBrowser.razor adlı yeni bir dosya ekler.
• seçeneği, -o yeni bileşeni içermesini istediğiniz klasörü belirtir.

Important

Blazor bileşeninin adı büyük harf karakterle başlamalıdır.

Bileşeni oluşturduktan sonra Visual Studio Code ile düzenlemek üzere açabilirsiniz:

code Pages/PizzaBrowser

Blazor bileşeninde kod yazma

Blazor'da bir kullanıcı arabirimi oluşturduğunuzda, statik HTML ve CSS işaretlemesini genellikle aynı dosyada bulunan C# koduyla karıştırırsınız. Bu kod türlerini ayırt etmek için Razor söz dizimini kullanırsınız. Razor söz dizimi C# kodunu, yönlendirme parametrelerini, bağlı verileri, içeri aktarılan sınıfları ve diğer özellikleri sınırlandıran @ simgesiyle önekli yönergeleri içerir.

Bu örnek bileşeni yeniden ele alalım:

@page "/index"

<h1>Welcome to Blazing Pizza</h1>

<p>@welcomeMessage</p>

@code {
  private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}

<h1> ve <p> etiketleriyle HTML işaretlemesini tanıyabilirsiniz. Bu işaretleme, kodunuzun dinamik içerik eklediği sayfanın statik çerçevesidir. Razor işaretlemesi şunlardan oluşur:

• yönergesi@page: Bu yönerge Blazor'a bir yol şablonu sağlar. Çalışma zamanında Blazor, bu şablonu kullanıcının istediği URL ile eşleştirerek işlenmek üzere bir sayfa bulur. Bu durumda, http://yourdomain.com/indexbiçimindeki bir URL ile eşleşebilir.
• yönergesi@code: Bu yönerge, aşağıdaki bloktaki metnin C# kodu olduğunu bildirir. Bir bileşene ihtiyacınız olan sayıda kod bloğu koyabilirsiniz. Bu kod bloklarında bileşen sınıfı üyeleri tanımlayabilir ve hesaplama, veri arama işlemleri veya diğer kaynaklardan değerlerini ayarlayabilirsiniz. Bu durumda kod, welcomeMessage adlı tek bir bileşen üyesini tanımlar ve dize değerini ayarlar.
• Üye erişim yönergeleri: İşleme mantığınıza bir üyenin değerini eklemek istiyorsanız, simgeyi @ ve ardından üyenin adı gibi bir C# ifadesi kullanın. Bu durumda, @welcomeMessage yönergesi welcomeMessage etiketlerindeki <p> üyesinin değerini işlemek için kullanılır.