Makale Özeti

Bu makalemizde ASP.NET MVC 3 ile birlikte gelen Razor View Engine’in sözdizimini (syntax) inceleyeceğiz.

Makale

Razor; ASP.NET üzerine geliştirilmiş ASPX’e alternatif yeni bir View Engine’dir. Genel olarak baktığımızda Razor ile hedeflenen yazılım geliştiricilere daha HTML odaklı ve akışkan bir kodlama deneyimi sunmaktır. Bunu sağlamak için sözdizimi geliştirilirken sunucu taraflı kodlarımızı mümkün olan en az karakter kullanarak yazılabilmesini hedeflemiş.

Razor;  ASPX yapısında olduğu gibi C# ve VB.NET dilleriyle kullanılanabilir. Bu diller ile kodlanmış sayfaların uzantıları sırası ile cshtml ve vbhtml’dir.

Razor kullanım şekilleri

Razor yapısı ile kod geliştirirken; sunucu taraflı kodlarımızın klasik ASPX yapısında olduğu gibi başlangıç ve bitişini işaretlememiz gerekmez. Bunun yerine sadece sunucu taraflı kodların başlangıcı “@” işareti ile belirtilir. Razor parser, sunucu taraflı kodların bitişini otomatik olarak çözer.

Sunucu taraflı kod bloklarında html ve text üretmek

Razor sözdiziminde sunucu taraflı kod bloklarımızı “@{“ ve “}” karakterleri ile işaretleriz. Örneğin:

@{
     var sayi1 = 5;
     var sayi2 = 4;
     var toplam = sayi1 + sayi2;
     var fark = sayi1 – sayi2;
}

Bu kod bloğunu ASPX markup’ı ile karşılaştırdığımızda büyük bir farklılık görmüyoruz. Ancak kod bloğu içerisinde HTML üretmek istediğimizde farklılık ortaya çıkıyor.

@{
     var sayi1 = 5;
     var sayi2 = 4;
     var toplam = sayi1 + sayi2;
     <p> İki sayıyı topladık.</p>
     var fark = sayi1 – sayi2;
}

Html üretmek için ekstradan herhangi bir karakter koymamıza gerek kalmadı. Razor parser kod bloğu içerisindeki html kodunu otomatik olarak çözdü.

Peki html kodumuza sunucu taraflı bir değer eklememiz gerekirse, ne yapacağız.

@{
     var sayi1 = 5;
     var sayi2 = 4;
     var toplam = sayi1 + sayi2;
     <p> İki sayıyı topladık. Toplam @toplam oldu.</p>
     var fark = sayi1 – sayi2;
}

Sunucu taraflı değerin başlangıcını @ karakteri ile işaretlememiz yeterli.

Hatta Razor, kodun içerisinde bulunan nokta işaretinin istemci taraflı koda mı yoksa sunucu taraflı koda mı ait olduğunu da başarı ile çözebilir.

@{
    dynamic nesne = new System.Dynamic.ExpandoObject();
    nesne.Deger = 3;
    var sayi = 5;
    <p>Sayı değer @sayi. Nesne değeri ise @nesne.Deger.</p>
}


Bazı durumlarda ise HTML kodu kullanmadan sadece metin üretmek isteyebiliriz. Bu durumda ise kullanabileceğimiz iki yöntem var. Bunlardan ilki metni <text> </text> tagları arasında belirtmek.

@{
    var sayi1 = 5;
    var sayi2 = 4;
    var toplam = sayi1 + sayi2;
    <text> İki sayıyı topladık. Toplam @toplam oldu.</text>
    var fark = sayi1 - sayi2;
}


Bu taglar arasında gerektiği durumlarda, html markup kullanmamız da mümkün.

<text> İki sayıyı topladık.<br /> <em>Toplam @toplam oldu.</em></text>


Text tagı bize birden fazla satır metin üretmek istediğimiz durumda yardımcı oluyor. Bunun yanı sıra tek satır metin üretmemiz gerektiği durumlarda “@:” operatörünü kullanabiliriz.

@{
    var sayi1 = 5;
    var sayi2 = 4;
    var toplam = sayi1 + sayi2;
    @: İki sayıyı topladık. <em>Toplam @toplam oldu.</em>
    var fark = sayi1 - sayi2;
}

 

Razor ile sunucu taraflı yorum yazmak

Razor ile geliştirdiğiniz sunucu taraflı kodunuzda “@*” ve “*@” tagları arasında yorum satırları eklemeniz mümkün.

@{
    @* Tek satırlık yorum *@
    @* Birden fazla satır 
    içeren yorum *@
}


Bunun yanı sıra kullandığınız dilin yorum satırı ekleme yapısını da kullanabilirsiniz. Örnek olarak C# ile geliştirdiğiniz kodunuzda “/* .. */” ve “//” yapılarını kullanabilirsiniz.

@{
    // Tek satırlık yorum
    /* Birden fazla satır
       içeren yorum */
}


HTML kodu içerisinde sunucu kodu kullanma

Html kodu içerisinde sadece bir değişkenin değerini göstermek istediğimiz durumlarda değişkenin başına @ karakteri eklememiz yeterli olacaktır. Eğer bir expression kullanmamız gerekir ise bunu @(..) şekline yazabiliriz.

<div>
   İki sayının toplamı @toplam.
   Bunun iki katı ise @(toplam *2).
</div>

 

Kontrol yapıları ve döngüler

Son olarak yine sunucu taraflı kod konusuna geri dönüp durumsal operatörleri (if .. else, switch case ) ve döngüleri ele alalım. Razor parser bu şekilde kendi gövdesi olan yapıları sunucu taraflı kod bloğu içerisinde olmasa da anlayabilir.

Örnek vermek gerekirse aşağıdaki kod parçaları sorunsuz çalışacaktır.

@if (kontrol)
{
    <text>Kontrol doğru.</text>
}
else
{
    @:Kontrol yanlış.
}

 

@{
    string[] isimler = new[] { "Ali""Ahmet""Ayşe" };
}
 
@foreach (var isim in isimler)
{ 
    <text>@isim burada.<br /></text>
}

 

@for (int i = 0; i < isimler.Length; i++ )
{ 
    <text>@isimler[i] burada.<br /></text>
}

 

Ancak bu şekilde kullanım kodun okunmasını zorlaştıracağı için bu yapıları yine @{ .. } bloğu içerisinde kullanmanızı öneririm.

@{
    if (kontrol)
    {
    <text>Kontrol doğru.</text>
    }
    else
    {
    @:Kontrol yanlış.
    }
}

 

@{
    string[] isimler = new[] { "Ali""Ahmet""Ayşe" };
    foreach (var isim in isimler)
    { 
    <text>@isim burada.<br /></text>
    }
}

 

@{
    string[] isimler = new[] { "Ali""Ahmet""Ayşe" };
    for (int i = 0; i < isimler.Length; i++)
    { 
    <text>@isimler[i] burada.<br /></text>
    }
}

 

Bu makalemizde ASP.NET MVC 3 ile birlikte gelen Razor sözdizimini inceledik.
Umarım yararlı olur.

Erdem Ergin
http://about.me/erdemergin
http://erdem.ergin.co