Blazor bileşeninden verilere erişme
- 7 dakika
İlgi çekici web sitelerinin sürekli değişebilecek dinamik içerik görüntülemesi gerekir. Veritabanı veya web hizmeti gibi dinamik bir kaynaktan veri almayı öğrenmek, web geliştirmede temel bir tekniktir.
Müşteriye yönelik güncelleştirilmiş web sitesinde bir pizza teslimat firması için çalıştığınızı varsayalım. Blazor bileşenleri olarak düzenlenmiş ve tasarlanmış bir dizi web sayfanız var. Şimdi bu sayfaları bir veritabanından almak istediğiniz pizzalar, topping'ler ve siparişler hakkında bilgilerle doldurmak istiyorsunuz.
Bu ünitede verilere erişmeyi ve kullanıcıya görüntülenmek üzere HTML işaretlemesi içinde işlemeyi öğreneceksiniz.
Kayıtlı veri hizmeti oluşturma
Kullanıcılara değişen bilgileri gösteren dinamik bir web sitesi oluşturmak istiyorsanız, bu verileri bir yerden almak için kod yazmanız gerekir. Örneğin, şirketinizin sattığı tüm pizzaları depolayan bir veritabanınız olduğunu varsayalım. Pizzalar her zaman değiştiğinden, bunları web sitesi HTML'sine kodlamak kötü bir fikirdir. Bunun yerine, veritabanını sorgulamak için C# kodu ve Blazor kullanın ve ardından kullanıcının sık kullanılanlarını seçebilmesi için ayrıntıları HTML olarak biçimlendirin.
Blazor Server uygulamasında, bir veri kaynağını temsil etmek ve ondan veri almak için kayıtlı bir hizmet oluşturabilirsiniz.
Note
Blazor uygulamasında kullanabileceğiniz veri kaynakları arasında ilişkisel veritabanları, NoSQL veritabanları, web hizmetleri, çeşitli Azure hizmetleri ve diğer birçok sistem bulunur. Bu kaynakları sorgulamak için Entity Framework, HTTP istemcileri ve ODBC (Açık Veritabanı Bağlantısı) gibi .NET teknolojilerini kullanabilirsiniz. Bu teknikler bu modülün kapsamı dışındadır. Burada, bu kaynaklardan ve teknolojilerden birinden elde ettiğiniz verileri biçimlendirmeyi ve kullanmayı öğreneceksiniz.
Kayıtlı hizmet oluşturma işlemi, özelliklerini tanımlayan bir sınıf yazarak başlar. Bir pizzayı temsil etmek için yazabileceğiniz bir örnek aşağıda verilmişti:
namespace BlazingPizza.Data;
public class Pizza
{
public int PizzaId { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public decimal Price { get; set; }
public bool Vegetarian { get; set; }
public bool Vegan { get; set; }
}
sınıfı pizzanın özelliklerini ve veri türlerini tanımlar. Bu özelliklerin veri kaynağındaki pizza şemasıyla eşleştiğinden emin olmanız gerekir. Bu sınıfı projenizin Data klasöründe oluşturmak ve Data adlı bir üye ad alanı kullanmak mantıklıdır. İsterseniz, diğer klasörleri ve ad alanlarını seçebilirsiniz.
Ardından, hizmeti tanımlarsınız:
namespace BlazingPizza.Data;
public class PizzaService
{
public Task<Pizza[]> GetPizzasAsync()
{
// Call your data access technology here
}
}
Hizmetin verilere erişmek ve Pizza nesneleri koleksiyonu döndürmek için zaman uyumsuz bir çağrı kullandığına dikkat edin. Veri kaynağı Blazor kodunun çalıştığı sunucudan uzak olabilir. Bu durumda, zaman uyumsuz bir çağrı kullanın. Daha sonra veri kaynağı yavaş yanıt verirse, diğer kod yanıt beklerken çalışmaya devam edebilir.
Add Services to the container dosyasındaki bölüme bir satır ekleyerek hizmeti kaydedebilirsiniz:
...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...
Veri almak için hizmet kullanma
Şimdi bir Blazor bileşeninde çağırarak ve veri alarak tanımladığınız hizmeti kullanırsınız. Aşağıdaki bileşen kodunuz olduğunu ve içinde pizzaları görüntülemek istediğinizi varsayalım:
@page "/pizzas"
<h1>Choose your pizza</h1>
<p>We have all these delicious recipes:</p>
Hizmeti enjekte etme
Bileşeninden hizmeti çağırabilmeniz için önce hizmeti eklemek için bağımlılık ekleme kullanmanız gerekir.
@page yönergesinin arkasına aşağıdaki kodu ekleyerek hizmeti ekleyin:
@using BlazingPizza.Data
@inject PizzaService PizzaSvc
Genellikle, bileşen ve hizmet farklı ad alanı üyelerindedir, bu nedenle @using yönergesini eklemeniz gerekir. Bu yönerge, C# kod dosyasının en üstündeki using deyimiyle aynı şekilde çalışır.
@inject yönergesi hizmeti geçerli bileşene ekler ve bunun bir örneğini başlatır. yönergesinde hizmet sınıfının adını belirtin. Bu bileşendeki hizmetin örneği için kullanmak istediğiniz adı ekleyin.
OnInitializedAsync yöntemini geçersiz kılma
Hizmeti çağırmak ve veri almak için OnInitializedAsync yöntemi iyi bir yerdir. Bu olay, bileşenin başlatılması tamamlandığında ve ilk parametrelerini aldığında, ancak sayfa işlenip kullanıcıya görüntülenmeden önce tetiklenir. Olay Blazor bileşeninin temel sınıfında tanımlanır. Bu örnekte olduğu gibi bir kod bloğunda geçersiz kılabilirsiniz:
protected override async Task OnInitializedAsync()
{
\\ Call the service here
}
Verileri almak için hizmeti çağırma
Hizmeti çağırdığınızda, çağrı zaman uyumsuz olduğundan await anahtar sözcüğünü kullanın:
private Pizza[] todaysPizzas;
protected override async Task OnInitializedAsync()
{
todaysPizzas = await PizzaSvc.GetPizzasAsync();
}
Kullanıcıya veri görüntüleme
Hizmetten bazı veriler aldıktan sonra kullanıcıya göstermek istersiniz. Pizzalar örneğinde hizmetin, kullanıcıların seçebileceği pizzaların listesini döndürmesini bekliyoruz. Blazor, bu verileri kullanıcının gördüğü sayfaya eklemek için kullanabileceğiniz zengin bir yönerge kümesi içerir.
Verileri denetleme
İlk olarak, pizzalar yüklenmeden önce sayfanın ne görüntüleneceğini, koleksiyonun todaysPizzasnullolup olmadığını denetleyerek belirleriz. Blazor bileşeninde koşullu işleme kodu çalıştırmak için @if yönergesini kullanın:
@if (todaysPizzas == null)
{
<p>We're finding out what pizzas are available today...</p>
}
else
{
<!-- This markup will be rendered once the pizzas are loaded -->
}
@if yönergesi, işaretlemeyi yalnızca C# ifadesi truedöndürdüğünde ilk kod bloğunda işler. Ayrıca, diğer testleri çalıştırmak ve doğruysa işaretlemeyi görüntülemek için bir else if kod bloğu da kullanabilirsiniz. Son olarak, önceki koşullardan hiçbiri true döndürmediyse kodu işlemek için bir else kod bloğu belirtebilirsiniz. Kod bloğunu null denetleyerek, Blazor'ın hizmetten veri alınmadan önce pizza ayrıntılarını görüntülemeye çalışmadığından emin olun.
Note
Blazor, birden çok değer döndürebilecek bir teste dayalı olarak işaretlemeyi işlemeye yönelik @switch yönergesini de içerir.
@switch yönergesi C# switch deyimine benzer şekilde çalışır.
Nesne koleksiyonunu render etme
Blazor önceki kodda else deyimini yürütürse, hizmetten bazı pizzaların alınmış olduğunu anlarsınız. Sonraki görev, bu pizzaları kullanıcıya görüntülemektir. Şimdi verilerin basit bir HTML tablosunda nasıl görüntüleneceğini inceleyelim.
Bu sayfayı kodlarken kaç pizza olduğunu bilmiyoruz.
@foreach koleksiyonundaki tüm nesneler arasında döngü yapmak ve her biri için bir satır işlemek için todaysPizzas yönergesini kullanabiliriz:
<table>
<thead>
<tr>
<th>Pizza Name</th>
<th>Description</th>
<th>Vegetarian?</th>
<th>Vegan?</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var pizza in todaysPizzas)
{
<tr>
<td>@pizza.Name</td>
<td>@pizza.Description</td>
<td>@pizza.Vegetarian</td>
<td>@pizza.Vegan</td>
<td>@pizza.Price</td>
</tr>
}
</tbody>
</table>
Büyük olasılıkla bu örnekte gösterilen düz tablodan daha zengin bir pizza görüntüsü istiyorsunuzdur. Fiyatı ve diğer değerleri biçimlendirmek isteyebilirsiniz. Daha ilgi çekici bir kullanıcı arabirimi geliştirmek için grafik tasarımcılarınızla birlikte çalışın. Örneğin, her pizzanın resimlerini ekleyin.
Note
Blazor, @for, @whileve @do whilegibi diğer döngü yönergelerini içerir. Bu yönergeler yinelenen işaretleme blokları döndürür. Eşdeğer C# for, whileve do...while döngülerine benzer şekilde çalışırlar.
Sonraki ünitede kendi veri hizmetinizi kaydedeceksiniz!