Blazor ile Hello World Uygulaması

Blazor, browser üzerinde WebAssembly teknolojisini kullanarak, ASP.NET Core üzerinde C#, Razor ve HTML kodları ile client-side uygulamalar yapabileceğimiz bir framework olarak tanımlayabiliriz.

Eğer .NET geliştirici olarak hayatını sürdürüyor iseniz, ASP.NET MVC’den aşina olduğunuz Razor sytanxı ve C# dilini kullanarak kolay bir şekilde Blazor uygulamaları geliştirebilme imkânına sahipsiniz. Bunu Angular, ReactJS, VueJS gibi JavaScript frameworklerine benzetmek oldukça mümkün. Tek fark geliştirmelerinizi JavaScript olarak değil C# dili ile geliştiriyorsunuz. Bunun için ise herhangi bir eklenti kurmanıza da gerek yok.

Nelere ihtiyacımız var?

Öncelikle bilgisayarınızda Visual Studio 2019 kurulu olması gerekiyor. Eğer kurulu değil ise bunu yükleyerek başlayabilirsiniz. Eğer kurulumu yeni yapıyor iseniz .NET Core 3.1 SDK’sını da yüklemenizi tavsiye ederim. VS 2019 kurulu ama .NET Core 3.1 SDK‘sı yüklü değil ise buraya tıklayarak yükleme işlemini gerçekleştirebilirsiniz.

Daha sonra komut satırı yardımı ile aşağıdaki kodu çalıştırmanız gerekiyor.

Bu işlemden sonra artık Blazor ile geliştirme yapmaya hazırsınız. Proje açmak için ise VS 2019 editörünü açtıktan sonra aşağıdaki adımları izleyebilirsiniz.

Blazor projesi nasıl başlatılır?

  • Create a new project diyerek proje oluşturma ekranına gelin.
  • Açılan sayfada üstte arama bölümüne Blazor yazarak veya altta arama bölümünde Blazor’ı bulup Next diyerek ilerleyelim.
  • Açılan pencerede ise solution name ve proje ismini verdikten sonra Create diyerek projemizi oluşturalım.

Projemizi oluşturduktan sonra Solution Explorer‘dan projeyi inceleyelim.

  • wwwroot, css ve meta dosyalarını içerir.
  • Pages, sayfa yapılarımızın barındırılacağı klasörümüz. .razor uzantılı olan Razor Component‘lerimizin her biri bizim sayfalarımızı temsil etmektedir.
  • Shared, sayfalarımızı barındıran temel .razor dosyalarını içerir.
  • _Imports.razor varsayılan bağımlılıkları ayarlar. Evet, bir web sitesindeki .NET bağımlılıkları.
  • Gelecekte kaldırılacağından App.razor yoksayılabilir.
  • global.json proje bilgisi içeriyor.
  • Program.cs programın giriş noktasıdır, çerçeveye Startup.cs’yi kullanmasını söyler.
  • Startup.cs, uygulama başladığında çalıştırılacak bir mantık içeriyor, örneğin bileşenleri kaydedebilir veya kütüphaneleri buradan yükleyebilirsiniz.

Oluşturduğumuz projeyi çalıştırdığımızda ise sol tarafta bir menü ve sağ tarafta içeriği değişen bir sayfa ile bizi karşılıyor.

Blazor - Ana sayfa

Index.razor sayfası karşımıza “Hello, world!” ekranı ile çıkıyor. Kod bölümünü incelediğimizde aşağıdaki ekran karşımıza çıkıyor.

Bu sayfada ek dikkat çeken yer SurveyPrompt bölümü. Burada farklı bir komponent bu sayfaya ekleniyor. O komponenti ise Shared klasörü altındaki SurveyPrompt.razor dosyasını ziyaret ederek görüntüleyebilirsiniz.

SurveyPrompt.razor sayfasına göz attığımızda ise parametre olarak aldığı @Title değişkeni komponentte ilgili yere yazıyor. Böylece komponentler arası veri taşıma işlemi gerçekleştirilmiş oluyor.

Counter sayfasına geçtiğinizde ise sizi yukarıdaki gibi bir ekran karşılıyor. Bir sayfa başlığı, altında değişkenin yazacağı bir değer ve bir buton yer alıyor. Kod bölümüne geçtiğimizde ise sizi aşağıdaki gibi bir ekran karşılıyor.

@page tanımlaması sayfada routing amacıyla kullanılıyor. Her sayfanın başında @page değişkeni ile sayfanın adresini tanımlamak gerekiyor. Butona tıklandığında ise kod bölümünde olan IncrementCount fonksiyonu tetikleniyor ve fonksiyonda yapılan işlem sayfada global olarak tanımlı olan currentCount değerine aktarılıyor. Böylece ekrandaki Current count yazısı önündeki değer birer birer artıyor.

Blazor - Weather forecast

Son olarak Weather forecaset sayfası ise bir servisden ya da json’dan çekilen hava bilgisinin, ekrana basıldığı örnek bir razor sayfası.

Sayfada örnek olarak sample-data klasörü içerisindeki weather.json dosyasında bulunan veriler çekilerek listeleme işlemi yapılmaktadır. İlk olarak json dosyasındaki alanlar WeatherForecast classı olarak tanımlanıyor. Daha sonra ise sayfa yüklendiğinde veriler aşağıdaki gibi liste olarak forecasts değişkenine aktarılıyor.

Sayfada ise foreach döngüsü ile dönerek json dosyası içerisindeki veriler sayfada listeleniyor.

Blazor hakkında daha detaylı bilgiye buraya tıklayarak ulaşabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir