Blazor'e Giriş Eğitimi

Eğitim Hakkında

Blazor ile C# kullanarak etkileşimli web arayüzü geliştirme: bileşenler, durum, kimlik ve dağıtım

Blazor'e Giriş, C# ile web arayüzü geliştirmek isteyenler için temel bir başlangıçtır. Server ve WebAssembly modelleri, Razor bileşen sözdizimi, parametre ve olaylar, @bind ile veri bağlama, EditForm doğrulama, sayfa yönlendirme, servislerin enjeksiyonu ve küçük bir API'den veri gösteren örnek uygulama iki günde uygulamalı işlenir.

Süre ve Format

2 Gün. Her gün dört modül; anlatımı canlı bileşen geliştirme laboratuvarları takip eder.

Seviye

Başlangıç Seviye — 8 uygulamalı modülde Blazor barındırma modelleri, Servisler, HttpClient ve durum yönetimi ve Blazor ile uygulama geliştirme projesi gibi konuları kapsar.

Öğrenme Metodu

Her konu çalışan bir Blazor uygulaması üzerinde canlı kodlanır; bileşenler, form doğrulama ve API entegrasyonu birlikte laboratuvarda geliştirilir.

Neden Bu Eğitim?

🧱Bileşen odaklı düşünme

UI'yı yeniden kullanılabilir Razor bileşenlerine bölmeyi, parametre ve olay akışını kodlayarak öğrenirsiniz.

🔁Tek dil, iki dünya

İstemci ve sunucu tarafında C# kullanarak JavaScript bağımlılığını azaltır, gerektiğinde JS interop ile kütüphaneleri entegre edersiniz.

🚀Doğru model seçimi

Server, WebAssembly ve Hybrid modellerinin gecikme, boyut ve ölçek yönünden farklarını ölçerek karar verirsiniz.

Anahtar Konular

blazor'e giriş eğitimiblazor eğitimiblazor webassemblyblazor serverrazor componentc# frontendblazor form doğrulamablazor authenticationsignalrasp.net core blazor

“Arayüz, birbirine doğru bağlanmış küçük bileşenlerin toplamıdır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

C# bilgisi

Sınıf, async/await ve LINQ konularında temel C# bilgisi.

2

HTML ve CSS

Temel HTML yapısı ve CSS seçicilerine aşinalık.

3

Kurulu ortam

Güncel .NET SDK ve Visual Studio 2022 veya VS Code kurulu bilgisayar.

4

Web temelleri

HTTP, REST ve JSON kavramlarına genel hakimiyet.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı gün sonunda Blazor barındırma modelleri, Bileşenler ve yaşam döngüsü, Veri bağlama ve formlar ve Yönlendirme ve gezinme başlıklarını çalışan örnek kod üzerinde uygulayarak "Blazor mimarisi, bileşenler ve formlar" konusunda bağımsız çalışabilir hale gelir.

Modül 1

Blazor barındırma modelleri

Blazor Server, WebAssembly, Hybrid ve .NET 8 interactive render mode'ları
.razor bileşen dosyası yapısı, @code bloğu ve kod-arkası (partial class)
SignalR devresi (circuit) ve Blazor Server bağlantı yaşam döngüsü
Proje şablonları, Program.cs ve App.razor yönlendirici
wwwroot, _Imports.razor ve statik varlıklar
Hangi modelin ne zaman seçileceği: gecikme, ölçek, çevrimdışı gereksinimi

Modül 2

Bileşenler ve yaşam döngüsü

[Parameter], [EditorRequired] ve bileşenler arası veri akışı
EventCallback<T> ile çocuktan ebeveyne olay bildirimi
RenderFragment ve ChildContent ile kapsayıcı bileşenler
Yaşam döngüsü: OnInitializedAsync, OnParametersSet, OnAfterRender, Dispose
CascadingValue ve CascadingParameter
@ref ile bileşen referansı ve StateHasChanged

Modül 3

Veri bağlama ve formlar

@bind, @bind:event ve @bind:after ile iki yönlü bağlama
EditForm, EditContext ve model tabanlı form yönetimi
DataAnnotationsValidator, ValidationMessage ve ValidationSummary
InputText, InputNumber, InputSelect, InputDate ve InputFile bileşenleri
Özel doğrulama niteliği ve FieldCssClassProvider
Dosya yükleme ve büyük dosyalar için akış okuma

Modül 4

Yönlendirme ve gezinme

@page yönergesi, rota parametreleri ve kısıtlamalar (:int, :guid)
NavigationManager.NavigateTo ve LocationChanged olayı
NavLink ve aktif bağlantı eşleştirme
Layout bileşenleri, MainLayout ve iç içe layout
Sorgu dizesi parametreleri ([SupplyParameterFromQuery])
Yönlendirme kilidi (NavigationLock) ve kaydedilmemiş değişiklik uyarısı

Günün hedefiKatılımcı gün sonunda Servisler, HttpClient ve durum yönetimi, JavaScript birlikte çalışabilirliği, Blazor kimlik doğrulama ve yetkilendirme ve Blazor ile uygulama geliştirme projesi başlıklarını çalışan örnek kod üzerinde uygulayarak "Servisler, JS interop, kimlik ve mini proje" konusunda bağımsız çalışabilir hale gelir.

Modül 1

Servisler, HttpClient ve durum yönetimi

DI yaşam süreleri: Server'da Scoped = devre, WASM'de Scoped = uygulama
Typed HttpClient ile REST API çağrıları
State container deseni ve olay tabanlı durum paylaşımı
localStorage / sessionStorage ve ProtectedBrowserStorage
Fluxor ile Redux benzeri durum yönetimi
Önbellekleme ve gereksiz API çağrılarını azaltma

Modül 2

JavaScript birlikte çalışabilirliği

IJSRuntime, InvokeAsync ve InvokeVoidAsync
DotNetObjectReference ve [JSInvokable] ile JS'ten .NET çağrısı
JavaScript modülleri (IJSObjectReference) ve izole yükleme
JSImport / JSExport (WASM) ile doğrudan birlikte çalışma
Üçüncü taraf kütüphane entegrasyonu: grafik, harita, editör
Prerendering sırasında JS çağrısı hataları ve OnAfterRender çözümü

Modül 3

Blazor kimlik doğrulama ve yetkilendirme

AuthenticationStateProvider ve CascadingAuthenticationState
AuthorizeView, [Authorize] ve rol/policy tabanlı erişim
WASM'de OIDC kimlik doğrulaması (Entra ID / IdentityServer)
Access token alma ve HttpClient'a AuthorizationMessageHandler ekleme
Blazor Server'da cookie kimlik doğrulaması ve devre güvenliği
Güvenlik notları: istemci tarafı kodun güvenilmez olması

Modül 4

Blazor ile uygulama geliştirme projesi

Proje gereksinimleri ve bileşen ağacı tasarımı
Liste / detay / düzenleme ekranlarının bileşenlere bölünmesi
API entegrasyonu ve hata durumları için yükleniyor / hata arayüzleri
Form doğrulama ve kullanıcı geri bildirimi
Kimlik doğrulama ve sayfa koruma
Yayınlama: Azure Static Web Apps veya IIS

Eğitim Kazanımları

Program sonunda katılımcılar:

🧩

Bileşen geliştirme

Parametre, EventCallback ve RenderFragment ile esnek bileşenler yazabilirsiniz.

📋

Formlar

EditForm ve doğrulama ile güvenli veri girişi ekranları oluşturabilirsiniz.

🧭

Yönlendirme

Layout, rota parametresi ve NavigationManager ile uygulama içi gezinmeyi kurgulayabilirsiniz.

🌐

API entegrasyonu

Typed HttpClient ile REST API'lerden veri çekip yönetebilirsiniz.

🔐

Kimlik doğrulama

AuthorizeView ve OIDC ile sayfa ve bileşen koruması yapabilirsiniz.

🔌

JS interop

IJSRuntime ile JavaScript kütüphanelerini güvenli şekilde entegre edebilirsiniz.

⚡

Performans

Yeniden çizimi azaltıp büyük listeleri sanallaştırarak performansı iyileştirebilirsiniz.

📦

Yayınlama

Blazor uygulamasını IIS, Azure veya statik barındırmada yayınlayabilirsiniz.

Kimler İçin Uygundur?

Web geliştirmeye yeni başlayan C# programcıları
Blazor'u değerlendirmek isteyen ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Web geliştirmeye yeni başlayan C# programcıları ve Blazor'u değerlendirmek isteyen ekipler için uygundur.

Blazor için JavaScript bilmem gerekir mi?

Hayır; temel JS bilgisi yararlıdır ancak eğitim ağırlıkla C# ve Razor ile ilerler. JS interop ayrı bir modülde işlenir.

Blazor Server mı WebAssembly mi öğretiliyor?

İkisi de ele alınır; render modları, ölçek ve güvenlik farkları karşılaştırmalı olarak gösterilir.

Örnek projeler hazır mı?

Başlangıç iskeleti sağlanır, bileşenleri birlikte yazarak geliştirirsiniz.

Eğitim sonunda sertifika alacak mıyım?

Eğitimi tamamlayan katılımcılara Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir. Üçüncü taraf kurumların resmi sınavları (varsa) ayrı olup başvurusu ve ücreti ilgili kuruma aittir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

BLAZOR'E GİRİŞ EĞİTİMİ