• Turkce TR
  • English En

    Blazor Nedir

    Blazor Nedir?

    Blazor = Browser + Razor

    Microsoft’un geliştirdiği bu framework iki ana modda çalışır:

    1. Blazor Server → Kod sunucuda çalışır, SignalR ile tarayıcıya UI güncellemeleri gönderilir.

    2. Blazor WebAssembly (WASM) → C# kodu tarayıcıda (client-side) çalışır.

    Sen C# geliştiricisi olduğun için, ASP.NET MVC veya WinForms’a benzer şekilde düşün:

    • Razor sayfalar = View + Controller karışımı bileşenlerdir.

    • Kod tarafı .razor.cs dosyasında olur.

     

    Klasör Yapısı (Blazor Server Örneği)

    MyBlazorApp/
    │
    ├── Pages/
    │   ├── Index.razor
    │   ├── Counter.razor
    │   └── FetchData.razor
    │
    ├── Shared/
    │   ├── MainLayout.razor
    │   ├── NavMenu.razor
    │   └── SurveyPrompt.razor
    │
    ├── Data/
    │   └── WeatherForecastService.cs
    │
    ├── App.razor
    ├── Program.cs
    └── _Imports.razor

     

    Program.cs – Giriş Noktası  

    var builder = WebApplication.CreateBuilder(args);

    // Service kayıtları
    builder.Services.AddRazorComponents()
                    .AddInteractiveServerComponents(); // Server mode

    builder.Services.AddSingleton();

    var app = builder.Build();

    app.MapRazorComponents()
       .AddInteractiveServerRenderMode();

    app.Run();

     

    Bu, MVC’deki Startup.cs gibidir.
    Servisleri kaydedersin, uygulamayı başlatırsın.

     

    Bir Blazor Sayfası (Razor Component)

    Counter.razor

    @page "/counter"

     

    Sayacı Arttır

     

     

    Güncel Sayı: @count

     

    +1

    @code {
        int count = 0;

        void Arttir()
        {
            count++;
        }
    }

     

    @code { } bloğu içinde C# kodu yazıyorsun.
    @onclick → event binding (JavaScript gerekmez).
    Her değişiklikte UI otomatik güncellenir.

    Veri Bağlama (Data Binding)

    İki yönlü binding WinForms’taki TextBox.Text = ... gibidir:

    @page "/form"

     

    Kullanıcı Bilgisi

     

    Merhaba, @ad!

     

    @code {
        string ad = "";
    }

     
    Ne yazarsan, aynı anda ekranda görünür

     

    Lifecycle (Yaşam Döngüsü)

    Componentlerin bazı eventleri vardır:

    @code {
        protected override void OnInitialized()
        {
            // Component ilk açıldığında
        }

        protected override async Task OnInitializedAsync()
        {
            // async başlatma işlemleri
        }

        protected override void OnParametersSet()
        {
            // Parametre değiştiğinde
        }
    }

     

    API veya Veritabanı Entegrasyonu

    Bir WeatherForecastService servisinden veri çekme örneği:

    WeatherForecastService.cs

    public class WeatherForecastService
    {
        private static readonly string[] Summaries = 
        { "Sunny", "Cloudy", "Rainy", "Windy", "Snowy" };

        public Task> GetForecastAsync()
        {
            var rng = new Random();
            var data = Enumerable.Range(1, 5).Select(index =>
                new WeatherForecast
                {
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = rng.Next(-10, 35),
                    Summary = Summaries[rng.Next(Summaries.Length)]
                });
            return Task.FromResult(data);
        }
    }

     

    FetchData.razor

    @page "/weather"
    @inject WeatherForecastService ForecastService

     

    Hava Durumu

     

    @if (forecasts == null)
    {
       

    Yükleniyor...


    }
    else
    {
       
           
           
            @foreach (var f in forecasts)
            {
               
                   
                   
                   
               
            }
           
       
    Tarih Sıcaklık (°C) Durum
    @f.Date.ToShortDateString() @f.TemperatureC @f.Summary

    }

     

    @code {
        IEnumerable forecasts;

        protected override async Task OnInitializedAsync()
        {
            forecasts = await ForecastService.GetForecastAsync();
        }
    }

     

     

    Component İçi İletişim

    Bir component, başka bir component’e parametre geçebilir:

    Sayac.razor

     

    Sayac: @Deger


    +1

     

    @code {
        [Parameter] public int Deger { get; set; }
    }

    Parent.razor

     

     

    Genel Mantık Özetle:

    MVC Karşılığı Blazor Karşılığı Açıklama
    Controller Component (.razor) C# + HTML birlikte
    View Razor template UI tanımı
    ViewBag / Model Parametre + @inject Veri geçişi
    Startup.cs Program.cs Uygulama ayarları
    JavaScript Event binding (@onclick, @bind) C# ile doğrudan etkileşim

    Avantajlar

    JavaScript’siz etkileşimli web arayüzü
    Tam C# dil gücü (LINQ, async/await vs.)
    Kodun hem client hem server’da paylaşımı
    ASP.NET altyapısıyla tam uyum