Blazor ile C# kullanarak web arayüzü kurmak: bileşenden uygulamaya

Blazor nedir ve web arayüzü geliştirmede neyi değiştirir?

Blazor, web arayüzünü JavaScript yerine C# ile yazmanızı sağlayan bir ASP.NET Core çerçevesidir. Arayüz, Razor bileşenleri denen yeniden kullanılabilir parçalardan kurulur. Bir bileşen, HTML işaretlemesi ile C# kodunu aynı dosyada birleştirir. Microsoft belgesinin vurguladığı nokta, bileşenleri yazma biçiminin barındırma modelinden bağımsız olmasıdır: aynı bileşen farklı modellerde değişmeden çalışabilir.

Bu, özellikle .NET bilen ekipler için anlamlıdır. Sunucu tarafındaki modeller, doğrulama kuralları ve yardımcı kodlar arayüzde de kullanılabilir; ön yüz ve arka yüz için ayrı dil ve ayrı beceri seti gerekmez. Bedeli ise ekosistemin farkıdır: JavaScript kütüphanelerinin geniş dünyası yerine .NET bileşen kütüphaneleri ve gerektiğinde JavaScript birlikte çalışabilirliği kullanılır.

Blazor farklı şekillerde barındırılabilir: sunucuda çalışan Blazor Server, tarayıcıda WebAssembly üzerinde çalışan Blazor WebAssembly ve yerel mobil ya da masaüstü uygulamasının içinde çalışan Blazor Hybrid. Yeni sürümlerde Blazor Web App yaklaşımı, bileşenlerin hangi biçimde işleneceğini bileşen düzeyinde belirleyen bir işleme modu (render mode) kavramıyla düşünülmesini önerir. Bu seçimi anlamak, öğrenmenin ilk ve en önemli adımıdır.

Hangi barındırma modeli seçilmeli?

Seçim, uygulamanın ihtiyaçlarına göre yapılır. Microsoft belgesindeki karşılaştırmanın özeti şöyledir.

Blazor Server: Bileşenler sunucuda çalışır, arayüz güncellemeleri ve olaylar SignalR bağlantısı üzerinden taşınır. Avantajı küçük indirme boyutu, hızlı ilk yükleme, tam .NET API uyumluluğu ve kodun sunucuda kalmasıdır. Sınırlamaları ise her etkileşimde ağ gecikmesi, çevrimdışı çalışamama ve çok kullanıcıda sunucu kaynağı gereksinimidir.

Blazor WebAssembly: Bileşenler ve .NET çalışma zamanı tarayıcıya indirilir. Avantajı bağımsız (standalone) uygulamada sunucu bağımlılığının bitmesi, işin istemciye devredilmesi ve statik dosya olarak barındırılabilmesidir. Sınırlamaları daha büyük indirme boyutu, tarayıcının yetenekleriyle sınırlı kalma ve istemciye gönderilen kodun korunamamasıdır.

Blazor Hybrid: Yerel uygulama içinde bileşenleri çalıştırır; cihaz özelliklerine tam erişim sağlar, ancak her platform için ayrı uygulama dağıtımı gerektirir.

Karar için pratik sorular: • Uygulama kurumsal ağ içinde, güvenilir bağlantıyla mı kullanılacak? Server uygun olabilir. • Çevrimdışı kullanım ya da statik barındırma gerekli mi? WebAssembly öne çıkar. • Gizli iş mantığı istemciye indirilmemeli mi? Sunucu tarafı veya sunucu API'si gerekir. • Mobil ve masaüstü uygulamada kod paylaşımı hedefleniyor mu? Hybrid düşünülür.

İşleme modu bileşen bazında seçilebildiği için aynı uygulamada karma çözüm de mümkündür.

İlk Razor bileşeni nasıl yazılır?

Bir bileşen, .razor uzantılı dosyadır. Yönlendirilebilir (sayfa olan) bileşen @page yönergesiyle bir adres alır. Durum ve davranış @code bloğunda tutulur. Microsoft belgesindeki sayaç örneğinin sadeleştirilmiş hâli şöyledir:

@page "/counter"

<strong>Sayaç</strong> <p>Geçerli değer: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Artır</button>

@code { private int currentCount;

private void IncrementCount() => currentCount++; }

Burada temel mekanizmalar görülür. @page ile bileşene bir yol atanır. @currentCount ifadesi C# alanını işaretlemeye yazar. @onclick ise düğme tıklamasını C# metoduna bağlar. Metot çalışıp durum değişince Blazor arayüzü yeniden işler.

Rota parametresi de benzer şekilde tanımlanır; yol içinde süslü parantezle verilen bölüm, bileşende aynı adlı bir özelliğe aktarılır. Örneğin bir ürün sayfası ürün kimliğini adresten alabilir.

Başlangıç için önerilen yol, hazır proje şablonundan bir uygulama oluşturmak ve şablondaki sayaç ile veri listeleme sayfalarını okuyup değiştirmektir. Küçük bir değişikliği (yeni bir düğme, ek bir alan) kendi başınıza yapmak, bileşen mantığını hızla oturtur.

Parametre, alt içerik ve veri bağlama nasıl kullanılır?

Gerçek uygulamada arayüz, küçük bileşenlerin birleşiminden oluşur. Bileşenler arasında veri akışı parametrelerle sağlanır. Alt bileşende [Parameter] özniteliğiyle işaretli bir özellik tanımlanır, üst bileşen bunu özniteliği gibi doldurur:

Panel.razor:

<div class="card"> <strong>@Title</strong> <div class="card-body">@ChildContent</div> </div>

@code { [Parameter] public string? Title { get; set; }

[Parameter] public RenderFragment? ChildContent { get; set; } }

Kullanım:

<Panel Title="Açık siparişler"> <p>Burada sipariş listesi gösterilir.</p> </Panel>

Belgeye göre parametreler, get ve set içinde özel mantık olmayan otomatik özellikler olmalıdır. ChildContent adlı RenderFragment özelliği, bileşenin etiketleri arasına yazılan içeriği alır; bu ad gelenek gereği ChildContent olmalıdır.

Form girdilerinde çift yönlü bağlama için @bind kullanılır:

<input @bind="aranan" /> <p>Aranan: @aranan</p>

@code { private string? aranan; }

Bileşen örneğine kod üzerinden erişmek gerekirse @ref ile alan atanabilir. Ancak bu nadir bir ihtiyaçtır; çoğu etkileşim parametreler ve olaylarla çözülür.

İyi bir alışkanlık, bir bileşeni tek bir işe odaklı tutmaktır. Sayfa hem veri çekiyor, hem listeliyor, hem düzenleme formunu yönetiyorsa parçalara bölmek test edilebilirliği ve okunabilirliği artırır.

Veri erişimi, kimlik doğrulama ve gerçek zamanlı özellikler nasıl eklenir?

Blazor uygulaması çoğunlukla bir veri kaynağına bağlanır. Sunucu tarafında çalışan bileşenlerde Entity Framework Core kullanırken dikkat edilecek nokta bağlam ömrüdür. Microsoft belgesi, Blazor Server için fabrika desenini önerir: bir kullanıcı devresi (circuit) boyunca tek bir kapsamlı bağlam yaşar ve bu bağlam uzun süre kullanılırsa sorun çıkar. AddDbContextFactory ile kaydedilen fabrika, her işlem için ayrı bağlam üretmeyi sağlar ve üretilen bağlamı uygulamanın bırakması gerekir.

WebAssembly modelinde bileşenler tarayıcıda çalıştığı için veritabanına doğrudan erişemez. Bu durumda sunucuda bir Web API yazılır, bileşen bu API'yi çağırır. API'nin yetkilendirmesi ve güvenliği ayrıca ele alınmalıdır; istemciye indirilen kod her zaman incelenebilir kabul edilir.

Gerçek zamanlı güncellemelerde (bildirim, canlı pano, sohbet) SignalR kullanılabilir. Blazor Server zaten arayüz güncellemelerini SignalR bağlantısı üzerinden yürütür; ayrıca uygulama düzeyinde bir hub tanımlayıp bileşenlerden bağlanmak da mümkündür. Bu konu ayrı bir becerinin parçasıdır.

Kimlik doğrulama modele göre farklı kurulur. Sunucu tarafı modellerde çerçevenin sunucu kimlik doğrulaması kullanılır, WebAssembly'de ise belirteç tabanlı akışlar ve güvenli API çağrıları gerekir. Hangi yolun seçileceği, uygulamanın hosting modeline ve kimlik sağlayıcıya bağlıdır; bu konuda resmî ASP.NET Core güvenlik belgelerinin sürüme uygun kısmı izlenmelidir.

Blazor geliştirirken en sık yapılan hatalar nelerdir?

• Modeli ihtiyaca bakmadan seçmek: Server'ı seçip bağlantı kesintisi ve gecikmeyi hesaba katmamak ya da WebAssembly'yi seçip ilk yükleme boyutunu görmezden gelmek yaygındır.

• Gizli bilgiyi istemci koduna koymak: WebAssembly'de tarayıcıya inen her şey kullanıcı tarafından incelenebilir. Gizli anahtarlar ve kritik iş kuralları sunucuda kalmalıdır.

• Büyük, tek parça bileşenler: Çok uzun sayfa dosyaları bakım zorluğu yaratır. Bileşenleri parçalayın.

• Durum yönetimini düşünmemek: Birden fazla bileşenin paylaştığı veri için ortak bir hizmet kullanmak, parametre zincirlerinden daha temiz sonuç verir. Hizmetin ömrü modele göre farklı davranır; kapsam kavramını anlamak gerekir.

• Veritabanı bağlamını yanlış ömürle kullanmak: Yukarıda anlatıldığı gibi sunucu tarafında bağlamı uzun yaşatmak sorun çıkarır.

• Yalnızca varsayılan şablonla yetinmek: Şablon çalışır ama gerçek uygulamada hata yönetimi, yükleniyor göstergesi, form doğrulama ve erişilebilirlik düşünülmelidir.

• Sürüm farkını yok saymak: Blazor'un bazı yönergeleri sürümden sürüme değişti. Eski öğreticilerdeki hosting modeli anlatımı, güncel sürümlerdeki işleme modu yaklaşımıyla birebir örtüşmeyebilir. Her zaman kullandığınız .NET sürümüne uygun belgeyi izleyin.

Bu beceri Mindset programlarında nerede çalışılır?

Mindset kataloğundaki ".NET ile Web Uygulamaları" eğitimi, C# ile web uygulaması geliştirmek isteyen yazılımcılar ve kurumsal .NET ekipleri için tasarlanmıştır. Modül başlıkları .NET ve ASP.NET Core ekosistemi, MVC mimarisi ve Web API tasarımı, Entity Framework Core ile veri katmanı, kimlik doğrulama ve güvenlik, "Blazor ile Modern Frontend", gerçek zamanlı iletişim ile test ve Azure dağıtımını kapsar.

Bu sayfadaki konular özellikle Blazor modülü ile veri katmanı ve Web API modüllerinin kesişiminde çalışılır; bu sayede arayüz, API ve veri erişimi aynı projede bir bütün olarak ele alınabilir. Dönem ve içerik ayrıntıları ürün sayfasında yer alır.