Asp.Net Mvc Razor View Engine Bölüm 1 (Asp.Net Mvc Yazı Dizisi – 8)

Asp.net mvc Razor view engine

Önceki Yazı : Asp.Net Mvc Layout Sayfaları – Partial View (Asp.Net Mvc Yazı Dizisi – 7)

Merhaba Arkadaşlar,

Önceki yazılarımızda Mvc'yi genel olarak tanımış, daha sonra da Layout sistemini öğrenmiştik. Bu yazımızda ise Asp.Net Mvc'deki View Engine'lere kısaca değinip, en yaygun kullanıma sahip olanı olan Razor'a geçiş yapacağız. Öncelikle View Engine nedir? Kısa bir tanım yapalım.

View Engine : Html sayfalarının içerisine, sunucu taraflı kodlar gömmemizi sağlayan (C#, Vb.Net gibi), bu kodları istemciye gönderilmeden ayrıştırıp, gerekli şekilde işleyen, görüntüleme ve işleme motorudur.

Aslında bu yapı, klasik Asp yapılarında, JSF'de ve Php'de kullanılmaktadır.Bu noktada diğer yapılara karşılık farkettiğim avantaj, Asp.Net Mvc'nin tamamen html tagları üzerinden çalışabilmesidir. 

Yeniden Asp.Net tarafına dönecek olursak, ilk 2 Mvc sürümünde Asp.Net Web Forms'ta da kullanılan, Aspx kodlama yapısı kullanılmış olup, 3. sürümüyle birlikte Razor sistemi tanıtılmıştır. Bunların haricinde 3. parti olarak yüklenebilecek Spark, Nhaml gibi View Engine'ler de bulunmaktadır.

Razor sistemi Aspx yapısınıdan sonra, kodlamayı çok kolaylaştıran, çok sadeleştiren ve çok hızlandıran (tuş kombinasyonları açısından) bir yapıdır. Microsoft şu an, tamamen bu yapıya yatırım yapmaktadır. Zamanla yeni sürümler çıkarmaktadır. Şahsi olarak, kesinlikle Razor'u tavsiye ediyorum. Şimdi sistemin biraz daha kod yapısına dönelim.

Herhangi bir Mvc projesi açıp, bir View sayfasına girelim.(Nasıl yapılacağına şu yazımızdan bakabilirsiniz.)

Razor sisteminde, sunucu taraflı kod yazdığımızda, sayfa tarayıcıya gönderilmeden önce, Razor sayfayı inceler ve sunucu taraflı kısımlarla ilgili işlemleri sunucu tarafında yapar. (Henüz tarayıcıya bir gönderim yapılmadı.) Sunucu işlemleri bitirdikten sonra, (bu noktada sunucu işlemleri neticesinde, html içerik üretilip, sayfanın çeşitli yerlerine yerleştirilebilir) halihazırda bulunan ve sonradan eklenen html içeriği tarayıcıya gönderilir. Tarayıcı, sunucu taraflı kodları hiç bir şekilde göremez.

@ Operatörü

Elimizde html standartlarına uygun bir View sayfası olduğundaiz bu sayfaya sunucu taraflı kod yazacağımız zaman, bunu Razor'a bildirmemiz gerekmektedir. Bunun için @ işaretini koyarak sunucu kodumuzu yazmaya başlarız. @ operatörünü gören Razor devam eden kısmın sunucu taraflı kod olduğunu algılayarak, sunucu taraflı olarak değerlendirir.

Örneğin sayfanın herhangi bir kısmına

@DateTime.Now

satırını ekleyip, sayfayı çalıştırırsak, o kısımda o anki tarihin çıktığını görürüz. Dikkat edileceği üzere aslında o kısma yazdığımız kod C# kodu idi. Bu kod satırı ile ilgili bir diğer önemli nokta, yazılan tarih sunucunun tarihi olacaktır, tarayıcının tarihi değil. Çünkü bu satır sunucuda çalışacaktır (ki burası çok önemli bir noktadır) .

Dikkat çeken bir diğer önemli nokta, kodun yalnızca başlangıcını belirtmemizin yeterli olup, bitişini belirtmemize gerek kalmamasıdır. (Tek satırlık kodlar için geçerlidir.) Aspx ile yazacak olsaydık;

<%:DateTime.Now%>

şeklinde yazacaktık ki bu ekstra kod yazımı olacaktı.

Tek Satırlı Kod Bloğu

Yukarıda ki kod kısmında tek bir değişken kullanmıştık. Değişken bitişik bir yazıma sahipti. Bu yüzden başına sadece @ koyarak yazımımızı yapabilmiştik.

@string yazimDili="Php";

şeklinde bir yazım da bulunursak, hata ile karşılaşacağız. Çünkü kod satırı bitişik değil. Bunun çözümü için;

@{string yazimDili="Php";}

şeklinde yazarsak, hiç bir hata ile karşılaşmayacağız. Yani kodumuzu @{...} arasına yazmamız gerekmektedir.

Çok Satırlı Kod Blokları

Birden çok satıra sahip kodlar yazacağımız zaman aşağıdaki yazımı kullanmalıyız;

@{
string yazimDili="Php";
string asilDil=yazimDili;
}

Dikkat edileceği üzere, @{…} kısımları arasına kullandığımız dilde (C#, Vb.Net vb.) , sanki kod arkası kısımda yazar gibi rahatlıkla kodlarımızı yazabiliyoruz.

Kod blokları içerisinde bulunan boşluk karakteri, sistemin çalışmasını etkilemez.

@{
string ad
=
"abdurrahman";
}

bu tarz bir yapı, herhangi bir hata vermeden çalışacaktır.

Değişkenler

Sistemde tanımladığımız sunucu taraflı değişkenleri, sayfanın istenilen alanlarında kullanmakta özgürüz. Aşağıdaki örneği inceleyelim;

@{
byte adet=5;
int toplam=adet*5;
}
<h3>Sayfa Adeti</h3>
<span>@toplam</span>

yukarıdaki kod bloğunu incelediğimiz zaman, bir matematik işlemi sonucunda toplam değişkenine bir değer aktarılıyor. Daha sonra araya bir <h3> tagı giriyor ve ardından <span> tagı içerisinde @toplam değişkeni ekrana bastırılıyor. @toplam değişkeni hafızada olduğu için, herhangi bir yerde çağırıldığı an, ekrana yazdırılıyor.

@ simgesini görsel olarak kullanmak istediğimiz durumlarda, (örneğin e-posta adresi yazarken) @ işaretini 2 kere koymamız gerekmektedir.

deneme@@deneme.com gibi.

Razor'un bize sunduğu kolaylıklardan bir diğeri ise, 

@(2+2)

gibi işlemlerin sonucunu otomatik olarak hesaplayıp, tanımlandığı yere eklemesidir.

Yorum Satırları

Sunucu taraflı olarak yazdığımız yorum satırlarında, kullandığımız dilin (C#, Vb.Net vb.) kuralları aynen geçerlidir.

Örneğin;

@{
/*
Bu kısım renk atamalarını gösterir
*/
string renk="mavi"; //Burada renk ataması yapıldı
}

şeklinde yazılan yorum satırları, hata vermeden çalışacaktır.

Bir yazımızın daha sonuna geldik. Sonraki dersimizde ise Razor View Engine Bölüm 2 konusunu işleyeceğiz. 

Hepinize kolaylıklar diliyorum.