İlginizi Çekebilir
  1. Ana Sayfa
  2. C#
  3. .Net Core Blazor Web Apps
kz_g_n

.Net Core Blazor Web Apps

Net-Blazor
1

Merhabalar, bu ilk yazım ve ilk yazımda sizlere benim de yeni öğrendiğim bir konudan bahsetmek istedim. Devam yazılarımda daha teknik konulara değineceğim. Umarım sizler için de faydalı olur.

.Net core 3.x yeni incelemeye başladım. Araştırma yaparken .Net Core Blazor framework‘u ile karşılaştım. İlk önce kabaca özetlemek gerekirse javascript yerine c# yazıbileceğimiz client side web apps oluşturabildiğimiz bir framework. .Net ile web geliştiriyorsanız sizinde ilginizi çekebilir. Ben backend tarafını ön yüzden daha çok sevdiğim için benim ilgimi bu çekti ve araştırmaya başladım diyebilirim. İlk başlarda karışık geldi ama biraz okudukça ya da yazdıkça yavaşça kafamda bir yer edinmeye başladı.

Blazor Nedir?

Öncelikle Blazor tarayıcı üzerinde çalışabilen .Net web framework’dur. Web-Assembly ile çalışan javascript yerine c# kodu kullanabileceğimiz bir Framework. Web assembly web için geliştirilmiş bir byte code formatıdır. Web-Assembly için buradan daha detaylı bilgiye ulaşabilirsiniz.

Blazor daha iyi anlayabilmek için .net in bize sunduğu hazır template üzerinden inceleme yapalım.

  • Visual Studio 2019 – .Net Core 3.1 versiyonu  ile birlikte Blazor App oluşturuyorum.
.Net Blazor
  • Projeyi create olduğunda karşıma .razor uzantılı sayfalar çıktı. Bu sayfaların shared kütüphaneleri  NavMenu.razor ve MainLayout.razor  ile birlikte 3 örnek yapılmış. Bir tanesi welcome sayfası, ikincisi sayı arttırma sayfası diğeri ise dataları çekip tablo görünümünde gösterebildiğimiz bir yapısı olan sayfa.
  •  İlk önce counter kısmına baktım. Buttona tıklatıkça mevcut sayının birer birer arttığını görüyoruz. Burada buttona tıkladığımızda tetiklenen javascript değilde C# kodu ile hazırlağımız methodun çağırıldığını görüyoruz.

 

@code { }  bloğunu içerisinde oluşturulan method onclick anında çağrılan mettottur. Blazor bu c# bloğunu Web Assembly yardımi ile tarayıcı üzerinde çalışabilecek hale getirmektedir.

 

 

Fetch Data kısmındaki örneğe bakalım. Aşağıdaki WeatherForecast objesini GetForecastAsync metotu ile rastgele oluşturulduktan sonra önyüzde bu methodu kullanarak tablo oluşumu sağlanmıştır. Async metotu çağırırken javascript kullanmadan Dependency Injection ile birlikte çağırarak gelen datayı tabloya yazıyoruz.

 

  services.AddSingleton<WeatherForecastService>();

FetchData.razor üzerindeki kullanımı

@inject WeatherForecastService ForecastService

@code bloğu içerisindeki forecasts listesini html içerisinde kullanabiliyoruz.

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

Kısa bir şekilde sizlere .Net Core Blazor framework u tanıtmaya çalıştım. Öneri de bulanacağınız ya da bu konuda hakkında örnek isterseniz yorumlarınızı bekliyorum olacağım.


Diğer C# yazılarımız için buraya tıklayabilirsiniz.

Yorum Yap

Yorum Yap

Yorumlar (1)

  1. 6 ay önce

    Web konusu ile ilgilenenler için çok güzel ve açıklayıcı bir yazı olmuş. Eline sağlık.
    Yazılıma ilk olarak Web ile başlamıştım ama bir süre sonra bana göre olmadığını fark ettim. O yüzden fazla üzerine düşmedim ve bıraktım. 🙂