MVC3 ile birlikte Razor ViewEngine geldiğinde tamda yeni bir projeye başlıyordum fakat Spark ile devam etmeyi düşünüyordum. Spark ile Razor arasında ufak bir kararsızlıktan sonra hem ekosistemi hemde devamlılığı olacağını düşündüğümdem Razor’u seçtim. Alışana kadar biraz sıkıntılıydı çünkü bazı temel işlemleri yapmak için ufak tefek ipuçlarını bilmek gerekiyordu araştırırken öğrendiğim bu ipuçlarını derleyip böyle bir Tutorial hazırladım. Okuyun ;)
String atraksiyonlarında <text/>
Razor direkt HTML ile iç, içe kullanılabildiğinden bazı durumlarda C#’ın içinden string çıktısı vermek gerekebiliyor. Böyle durumlarda başvurabileceğiniz akıllı bir kaçış tag’ı olarak <text> işe yarıyor
Çıktı:
$(‘#1’).text(‘Deneme 1’);
$(‘#2’).text(‘Deneme 2’);
$(‘#3’).text(‘Deneme 3’);
$(‘#4’).text(‘Deneme 4’);
…
@: Blok’u
Akıcı bir Razor sytax’ı için kullanılabilecek bir özellikte @: işaretlemesi. Bu işaretleme <text> ile eşdeğerdir tek farkı tek satır olarak kullanılmaktadır. <text> ise birden fazla satırda string çıktısı vermek için kullanılır ve bu tagların arasındaki işaretlemeler ViewEngine tarafından render edilmez. @: kullanımına örnek;
Çıktı:
İşlem Gerçekleşti
Comment’ler nasıl olacak peki?
Razor’da da her ViewEngine’de olduğu gibi kod içine açıklama eklemek için kullanabileceğiniz işaretlemeler vardır, tabi klasik olarak bildiğimiz \ veya ‘ olarak değil onun yerine @* … *@ şeklinde. Bu işaretlemeyi kullanılarak sunucu taraflı kod yorumları ekleyebiliryorsunuz.
Tek satır için
gibi. Burda ki güzellik hem tek satır hemde çoklu satırda aynı işaretlemeyi kullanıyor oluşumuz.
Strongly-Typed View
Klasik ASP.NET ViewEngine’inde View’i belirli bir Model ile kullanmak istediğimizde sayfanın en üstünde attributes’lerden oluşan uzunca bir tag eklemek gerekiyordu. Razor’da bu @model işareti ile kolayca gerçekleştirebileceğiniz bir işlem.
Örneğin:
@Html.Raw
HTML’i Encode ederek ekrana veren güzel bir özelliktir. Klasik ASP.NET’de ki Server.HtmEncode() fonksiyonuna benzer. Aynı işi gören diğer bir yardımcı komut ise HtmlString().
Kullanımı basittir:
Çıktısı:
<h1>Deneme</h1>
olacaktır.
Namespace’leri nasıl kullanabiliyoruz?
Örneğin Razor sayfasının içinde System.IO namespace’i altından bir Class kullanmak istiyoruz. Bunun için sayfasnın @model çağrısının altına @using çağrısını yapmanız yeterli.
@using System.IO
gibi.
Sayfa içinde @function
Kullanışlı özelliklerden bir taneside Razor sayfası içinde sadece o sayfaya özel fonksiyonlar üretip, kolaylıkla kullanabilmemiz. Örneğin: Verdiğiniz string’i ekrana kırmızı yazan bir sayfa içi function yazmak istersek.
şeklinde yazabiliriz. IHtmlString döndürdüğüne dikkat etmişsinizdir Razor bunu render edilecek html string’i olarak algılayacak ve browser’a yorumlaması için gönderecektir.
Koşullar (Conditions) nasıl yazılyor?
Razor içinde ?:, switch, if.. koşulları yazmak doğal olarak mümkün bunun için @() işaretlemesi kullanılıyor.
Örneğin ?: condition’ına örnek vermek gerekirse.
Model.Status değeri true olduğu için ekrana direkt Tamam yazılacaktır.
If konuşulu için ise;
Burda dikkat edilmesi gereken nokta @: kullanıldığı için satır atlamalarının zorunlu olduğu. Diğer bir If koşulu örneği ise;
Burda HTML tag’ı ile string’i yazıdıryoruz fakat bu her zaman istenen bir durum değil o nedenle <text> ile’de kullanılması mümkün.
text ile kullandığınızda sadece “Tamam” string’i ekrana basılır.
Razor Delegate
Razor Delegate’leri kullanarak daha temiz, okunaklı kodlama yapılması mümkün. Bazı durumlarda ise karmaşıklığı ve işleri oldukça kolaylaştırıyor. Hemen örnek vereyim;
İhtiyacınıza göre genişletmeniz mümkün, parametre dynamic olduğu için kendi tipleriniz içinde çeşitli fonksiyonlar geliştirip daha kullanışlı fonksiyonlar üretebilirsiniz tabi.
@Helper
Razor bünyesinde bir çok yardımcı method barındırmasına rağmen ihtiyacınıza uygun Helper methodları yazmanız kaçınılmazdır. Bu methodlarıda sadece Razor sayfas içerisinde oluşturup, diğer sayfalarda da kullanabilmek isteyebilirsiniz işte bunun için @Helper işaretlemesi ile oluşturacağınız method’ları kullanabilirsiniz. Şöyle ki;
Çıktısı:
118,00 TL
Burdaki trick ise KdvDahil fonksiyonunu yazdığınız Razor sayfasını Projenizde ki App_Code sayfasının altına gönderdiğinizde KdvDahil fonksiyonuna her Razor sayfasından ulaşabiliyor olmanızdır. Örneğin KdvDahil fonksiyonunun yazılı olduğu Razor dosyasının ismi Fiyatlar.cshtml olsun. KdvDahil fonksiyonuna diğer Razor sayfalarından ulaşmak için Fiyatlar.KdvDahil() şeklinde kullanabilmeniz mümkün.
HTML data-* ve Class Attributes
@Html.ActionLink methodu içinde HTML5 ile birlikte gelen data-* attributes’ini kullanmak isteyebilirsiniz MVC3 bunun için Anonymous Type’lerden yararlanıyor fakat HTML’e göndereceğiniz attributes syntax’ı Anonymous Type’larda kullanılan cinsten değil. Örnekle açıklayalım.
<a href=”/Home/Delete” data-id=”45″>Database</div>
çıktısını ActionLink kullanabilmek için aşağıdaki şekilde yazmalısınız.
dikkat ederseniz data_id olarak yazdık fakat HTML’e data-id olarak yansıdı buda ActionLink methodunun akıllı özelliklerinden bir tanesi.
ActionLink için verebileceğimiz diğer bir ipucuda class kullanımı. class .Net’de bir özel bir kelime olduğundan, herhangi bir değişkene’de class ismini verirken bunun değişken olduğunu belirtmelisiniz;
<a href=”/Home/Delete” data-id=”45″ class=”shadow-text”>Database</div>
çıktısını alabilmeniz için ActionLink aşağıdaki şekilde olmalıdır.
@ burda bir çeşit escape karakter olarak kullanılabiliyor.
@section
Section’lar genel şablonlar oluşturulmasında kullanılan son derece yararlı bir Razor fonksiyonudur. MasterPage’de belirleyeceğiniz ve isimlendirdiğiniz section’ı herhangi bir Razor sayfasında özel olarak kullanabilirsiniz.
Önce _Layout.cshtml içinde bir section tanımlamalısınız.
Daha sorna Layout eklenmiş bir sayfada bu section’ı çağırabilirsiniz.
@section jquery{
$(‘#body’).append(‘Section Çağırıldı’);
}
gibi. Burdaki örneğimizde Razor sayfamıza jquery’i tekrar initialize etmeden _Layout üzerinden çalıştıdık.
@Html.RenderPartial
Kendi oluşturduğunuz kontrolleri veya PartialView’leri Razor içinden çağırmanız mümkün. Aşağıdaki şekilde;
Burda dikkat etmeniz gereken “;” noktalı virgül. Çünkü {..} parantezleri açtığnızda C# moduna girmiş oluyorsunuz. Menu.cshtml, PartialView’imiz ~/Views/Shared/ dizini altında olmak zorunda çünkü Razor ViewEngine’inde bu path’ler default olarak aranıyor. Fakat bu Path’lerin dışında da PartialView’lerinizi Render etmeniz mümkün,
PartialView’inizi herhangi bir Model ile kullanacaksanız bu Model’i parametre geçmek için aşağıdaki syntax’ı kullanabilirsiniz.
İki @@, Bir @ eder
Bazı durumlarda Razor’dan string geriye döndürürken @ işareti geçen string’ler döndürmeniz olası bu durumda @@ olarak verirseniz Razor bunu algılayıp normal string gibi işleyecektir.
Normal string olarak algılanır.
@Deneme String@
Razor Syntax’ı olarak algılanır.
Ek olarak e-posta adreslerini Razor otomatik algılar ve ona göre davranır yani email adreslerinde böyle bir harekete gerek yok, direkt yazabilirsiniz.
@Url.Action
Url.Action, Controller’de oluşturduğunuz Action’ların sadece adresini verir. Ben genelde JavaScript’in içinde ajax çağrılarında kullanıyorum.
Burda çıktı /Home/Index/1 şeklinde geliyor.
Razor içinden SQL
Şimdiye kadar hiç kullanmadım fakat aklımızda bulunsun. Razor’da @{..} blogu içinde C# moduna geçtiğimizi daha önce söylemiştik, e madem C# moduna geçiyoruz o halde class içinde kullandığımız tüm atraksiyonlarıda kullanabilmemiz normal. Aşağıda Razor sayfasından sql sorgusunun çalıştırılmasına dair bir örnek var.
bildiğimiz PHP gibi…
Şimdilik bu kadar, yeni fonksiyonlar tecrübe ettikçe buraya ekliyor olacağım…
Kolay Gelsin ;)