Blazor
Web uygulamaları oluşturmak için birçok yaklaşım vardır. Yüksek oranda etkileşimli ve hızlı web uygulamaları oluşturmak için genellikle bol miktarda JavaScript kullanırsınız.
Bir diğer yaklaşım da Microsoft'un Blazor çerçevesine yönelik kullanımıdır. Bu, web geliştirmeyle ilgili tüm endişelerinizi işlemek için C# ve .NET'i kullanmanıza olanak tanır.
Blazor nedir?
Blazor, HTML, CSS ve C# ile web sayfaları oluşturmaya yönelik bir çerçevedir. Standart HTML ve CSS kullanarak web sitesinin düzenini ve tasarımını tanımlayabiliriz. Daha sonra web sayfalarının etkileşimli bileşenleri, webAssembly adlı web standart teknolojisi kullanılarak bir sunucuda veya tarayıcıda çalışan C# koduyla yönetilebilir. Blazor, HTML ve C# değerlerinin kullanışlı bir karışımı olan Razor söz dizimini kullanarak web sayfalarımızı ve bileşenlerimizi tanımlamamıza olanak tanır. Blazor bileşenlerini diğer sayfalarda ve bileşenlerde kolayca yeniden kullanabilirsiniz. Bu özellik, uygulamamızın bölümlerini kolayca oluşturup yeniden kullanabileceğimiz anlamına gelir.
WebAssembly nedir?
WebAssembly, kodun JavaScript'e benzer şekilde tarayıcıda çalıştırılmasını sağlayan her modern tarayıcıda kullanılabilen standart bir teknolojidir. C# kodumuzu tarayıcıda WebAssembly uygulaması olarak kullanmak üzere hazırlamak için araçları kullanabiliriz ve bu araçlar .NET SDK'sına dahil edilmiştir.
Sık Erişimli Yeniden Yükleme ile uygulamanızı anında güncelleştirin
Bir uygulama geliştirirken, değişikliklerin uygulamanızı nasıl etkilediğini görebilmek için geliştirici akışınızın hızlı olduğundan emin olmak istersiniz. Değişiklik yapmak, kaydetmek, tüm kaynakları yeniden oluşturmak ve uygulamayı tarayıcıda yeniden dağıtmak zaman alabilir.
Anında Yeniden Yükleme kullanarak bu iş akışını geliştirebilirsiniz. Sık Erişimli Yeniden Yükleme ile, yeniden başlatmak zorunda kalmadan çalışan uygulamaya bir değişiklik uygulayabilirsiniz.
Blazor bileşenleri
Blazor kullanarak uygulama oluşturduğunuzda, uygulamanız her biri kendi sorumluluk alanına sahip birçok bileşenden oluşur. Bileşenleri oluşturmak için .razor uzantısıyla Razor dosyalarını kullanırsınız. Razor nedir?
Razor, HTML söz dizimiyle C# kodunu bir araya getiren bir programlama söz dizimidir. İşte bir örnek:
<div>@product.Name</div>
@code {
Product product = new Product{ Name = "Blazor" }
}
Bu örnekte, @product.Name "Blazor" dizesine dönüştürülür ve ardından div etiketinin içinde işlenir. İşlenen çıkış şöyle görünür:
<div>Blazor</div>
Razor örneğinin üst kısmı, bileşenin çalıştırıldığında işleteceği HTML işaretlemesinden oluşmaktadır.
@ karakterini kullanarak C# ifadelerinin değerini işleyebilirsiniz. Razor, @'dan başlayarak bir etiket tanımlayıp HTML işlemeye devam edene kadar C# kodunu değerlendirmeye devam eder. Parens: @(...)kullanarak C# ifadesinin ne zaman başlayıp ne zaman sona ermesi konusunda açık olabilirsiniz.
@code {} içindeki her şey, oluşturulan bileşen sınıfınızın üyelerini tanımlamak için C# kodu içerir. Razor dosyasını, HTML işleme mantığını tanımlayan bir C# sınıfı tanımlamanın kullanışlı bir yolu olarak düşünebilirsiniz. alanlar, özellikler ve yöntemler gibi bileşen türünüz için C# üyeleri tanımlamak için @code bloğunu kullanırsınız.
Blazor bileşenine stil oluşturma
Blazor bileşenleri HTML'yi işler, böylece normal CSS stil sayfalarını kullanarak Blazor bileşenlerine stil oluşturabilirsiniz. Alternatif olarak Blazor bileşenleri, yalnızca bu bileşenin içeriğine uygulanan stil kuralları oluşturmanıza olanak tanıyan CSS yalıtımı adlı bir özelliğe sahiptir. Blazor, bileşenimizle aynı ada sahip bir dosya oluşturup .css dosya adı uzantısını ekleyerek, bu adlandırmayı YALNıZCA ilgili bileşendeki HTML içeriğine uygulanması gereken stiller olarak tanır.
Blazor bileşenleri, özel bir HeadContent etiketi kullanarak sayfanın HTML başlığına eklenecek içeriği de tanımlayabilir:
<HeadContent>
<style>
...my styles here
</style>
</HeadContent>
Bu style etiketi ve içeriği sayfanın head etiketi içinde gösterilir.
Yönlendirilebilir bileşenler
Home.razor dosyası, web tarayıcısından gidilebilen bir bileşendir. HTML, C# ve diğer Blazor bileşenlerine başvurular içerir. İlk satırda @page "/" yönergesinin bulunması nedeniyle bu dosyayı bir sayfa olarak tanımlayabiliriz. Bu yönerge bileşene "/" yolunu atar ve "/" adresinde varsayılan sayfa istendiğinde Blazor'a bu dosyanın içeriğiyle yanıt vermesini bildirir.