ASP.NET Core ile modern ve dinamik web uygulamaları geliştirmenin temel taşlarından biri olan Razor, C# kodunu HTML içine sorunsuzca yerleştirmeyi sağlayan güçlü bir şablon motorudur. Bu sayede, sunucu taraflı mantığı doğrudan arayüz elemanlarıyla birleştirerek, okunabilirliği yüksek ve bakımı kolay kodlar yazmak mümkün hale gelir. Razor, karmaşık veri yapılarını ekrana basmaktan, kullanıcı etkileşimlerine göre arayüzü şekillendirmeye kadar geniş bir yelpazede esneklik sunar. Bu rehber, Razor sözdiziminin temellerine odaklanarak, @Model direktifinin kullanımını, if-else gibi koşul ifadelerini, foreach döngülerini ve en önemlisi C# ile HTML arasındaki zarif entegrasyonu pratik örneklerle ele alacaktır. Ayrıca, uygulama genelinde tutarlı bir görünüm sağlamak için kritik öneme sahip olan Layout ve _ViewStart dosyalarının işlevlerini de detaylı bir şekilde inceleyeceğiz.
Razor’un temelleri ve C# entegrasyonu
Razor’un kalbinde @ karakteri yer alır. Bu karakter, Razor’a HTML içerisinden C# koduna geçiş yapılacağını bildirir. Bu geçiş, tek bir ifade için veya kapsamlı bir kod bloğu için olabilir. Razor, C# kodunun nerede bittiğini ve HTML’nin nerede başladığını akıllıca anlar, bu da kodu temiz ve okunabilir kılar.
Tek satırlık ifadeler doğrudan @ ile başlar. Örneğin, sunucunun o anki tarihini yazdırmak için:
Şu anki tarih ve saat: @DateTime.Now
Birden fazla satır içeren veya daha karmaşık mantık gerektiren durumlar için ise @{ … } kod bloğu kullanılır. Bu bloğun içine yazılan her şey C# kodu olarak yorumlanır.
@{
var ad = "Ahmet";
var soyad = "Yılmaz";
var tamAd = ad + " " + soyad;
}
Kullanıcının tam adı: @tamAd
Razor, kod blokları içindeki HTML etiketlerini otomatik olarak tanır. Örneğin bir döngü içinde HTML oluşturmak son derece basittir. Ancak bazen Razor’un metin ile HTML’i ayırt edemediği durumlar olabilir. Bu gibi durumlarda, metin olduğunu açıkça belirtmek için <text> etiketi veya @: sözdizimi kullanılır.
@if (Model.Products.Count == 0)
{
@: Bu kategoride henüz ürün bulunmamaktadır.
}
Veri yönetimi: @model direktifi
Statik sayfalar yerine dinamik içerik oluşturmak için view’ların veri alması gerekir. Razor’da bu işlem, @model direktifi (küçük ‘m’ ile) ve @Model özelliği (büyük ‘M’ ile) aracılığıyla yönetilir. Sayfanın en üstünde yer alan @model direktifi, bu view’ın hangi türde bir veri modeli (class veya koleksiyon) beklediğini tanımlar. Bu, güçlü tip denetimi (strongly-typed) sağlar ve geliştirme sırasında IntelliSense desteği ile hataları en aza indirir.
Örneğin, bir ürün detay sayfasının bir Product nesnesi beklediğini şu şekilde belirtiriz:
@model MyApp.Models.Product
Bu tanımlamadan sonra, Controller’dan view’a gönderilen Product nesnesine sayfanın herhangi bir yerinden @Model özelliği ile erişebiliriz. @Model, tanımlanan tipin bir örneğidir (instance).
@Model.Name
Açıklama: @Model.Description
Fiyat: @Model.Price TL
Eğer view’a bir liste gönderilecekse, model tanımı buna uygun şekilde yapılır. Örneğin, bir ürün listesi için:
@model IEnumerable<MyApp.Models.Product>
Bu durumda @Model, bir Product nesneleri koleksiyonu haline gelir ve bir sonraki bölümde göreceğimiz döngülerle kolayca işlenebilir.
Kontrol yapıları: if-else ve foreach döngüleri
Razor, C#’taki temel kontrol yapılarını view katmanında kullanmamıza olanak tanır. Bu sayede, gelen veriye göre arayüzü dinamik olarak şekillendirebiliriz. En sık kullanılan yapılar if-else blokları ve foreach döngüleridir.
if-else yapıları, belirli koşullara bağlı olarak farklı HTML bloklarını render etmek için kullanılır. Örneğin, bir ürünün stokta olup olmamasına göre farklı bir mesaj gösterebiliriz:
@if (Model.UnitsInStock > 0)
{
Stokta Var
}
else
{
Tükendi
}
foreach döngüsü ise koleksiyonlar üzerinde gezinmek için idealdir. Bir önceki bölümde tanımladığımız ürün listesi modelini kullanarak tüm ürünleri bir tablo içinde listeleyelim:
@foreach (var product in Model){}
| Ürün Adı | Fiyat | Stok Adedi |
|---|---|---|
| @product.Name | @product.Price TL | @product.UnitsInStock |
Bu örnekte, @foreach bloğu Model koleksiyonundaki her bir product için bir <tr> satırı oluşturur. Razor, döngü içindeki HTML’i ve C# ifadelerini sorunsuz bir şekilde birleştirir.
Sayfa yapısı ve düzeni: _ViewStart ve Layout sayfaları
Web uygulamalarında sayfaların büyük bir kısmı (örneğin üst menü, alt bilgi, kenar çubuğu) genellikle aynıdır. Bu tekrarı önlemek ve merkezi bir yönetim sağlamak için Razor, Layout sayfalarını sunar. _Layout.cshtml dosyası, tüm sayfalar için ortak bir şablon görevi görür.
Tipik bir _Layout.cshtml dosyası, temel HTML yapısını içerir ve @RenderBody() adında özel bir metot barındırır. Bu metot, her bir alt sayfanın kendine özgü içeriğinin nereye yerleştirileceğini belirtir.
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<header>
<p>Burası tüm sayfalarda ortak olan Header bölümü.</p>
</header>
<main>
@RenderBody() <!-- Her sayfanın kendi içeriği buraya gelecek -->
</main>
<footer>
<p>Burası tüm sayfalarda ortak olan Footer bölümü.</p>
</footer>
</body>
</html>
Peki, her view dosyası bu layout’u kullanacağını nasıl anlar? İşte bu noktada _ViewStart.cshtml dosyası devreye girer. Views klasörünün köküne yerleştirilen bu dosya, o klasördeki ve alt klasörlerindeki tüm view’lar çalıştırılmadan önce otomatik olarak çalışır. Genellikle tek bir görevi vardır: varsayılan Layout dosyasını ayarlamak.
@{
Layout = "_Layout";
}
Bu basit yapı sayesinde, her view dosyasına tek tek hangi layout’u kullanacağını belirtmek zorunda kalmayız. _ViewStart.cshtml, bu işi merkezi olarak yöneterek kod tekrarını engeller ve projenin bakımını kolaylaştırır.
Sonuç olarak, Razor sözdizimi, ASP.NET Core geliştiricilerine C# ve HTML’i bir araya getirerek güçlü ve dinamik web sayfaları oluşturma imkanı sunar. Bu rehberde, @ karakterinin C# koduna geçişi nasıl sağladığını, @model direktifiyle view’lara nasıl veri aktarıldığını ve bu verilerin @Model özelliğiyle nasıl kullanıldığını inceledik. if-else blokları ve foreach döngüleri gibi kontrol yapıları sayesinde, gelen veriye göre içeriği dinamik olarak nasıl şekillendirebileceğimizi gördük. Son olarak, _Layout.cshtml ile site genelinde tutarlı bir şablon oluşturmanın ve _ViewStart.cshtml ile bu şablonu tüm sayfalara otomatik olarak uygulamanın ne kadar pratik olduğunu öğrendik. Bu temel kavramlar, veri odaklı, bakımı kolay ve esnek web uygulamaları geliştirmek için sağlam bir zemin oluşturur ve Razor’un .NET ekosistemindeki vazgeçilmez yerini pekiştirir.
Resim Sahibi: Pixabay
https://www.pexels.com/@pixabay