ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 14 – Razor Nedir? Web Form ile Kullanım Farklılıkları Neler? Implicit Code Expression, Explicit Code Expression

Merhaba MVC Severler,

Önceki yazımda ViewData, ViewBag ve TempData hakkında bilgi verdim. Bu yazımda View Engine olarak Razor’un nasıl bir yapıya sahip olduğunu, Web Form ile arasındaki farklarını anlatacağım. Ayrıca HTML Encoding, Implicit ve Explicit Code Expression kavramlarından bahsedeceğim.

Hazırlık

Uygulamamızı Visual Studio 2010 Ultimate sürümünde ASP.NET MVC 3 Empty Template üzerinde yapacağız.

Giriş

Razor View Engine hakkında kısaca daha önceki yazımda bahsettim. Razor View Engine ASP.NET MVC 3 ile birlikte gelen ve default view engine olarak gelmektedir. Yazımı kolay, Web Forms View Engine’deki  fazla olan ve  yazıya anlamsız bir görüntü görünümü veren bir sürü parantezi içermez. Bir çok developer view içerisiğini okurken, karmaşıkları çözmek için gerçekten oldukça zorlanıyor. Fakat tüm bu sorunlar ASP.NET MVC 3 ile birlikte gelen Razor View Engine ile ortadan tamamen kalktı. Razor Visual Basic dili ile de kullanılabilmektedir. MVC’de C# kullanırsanız View uzantılarınız .cshtml.com, Visual Basic kullanırsanız .vbhtml olacaktır.

Razor ile fazladan kullanılacak karakterler ortadan kalktı. Daha fazla teorik bilgi vermeden örneklere geçelim.

Uygulama

Razor’un kullanımı ve Web Forms View ile farkları. 

Öncekikl Home adında bir Controller oluşturdum ve içerisinde Index adında bir View oluşturdum. View içeği:

Ekran çıktısı:

Razor’a geçiş yapmak için kullandığımız özel karakter “at işareti” (@ ). @ işareti HTML kodundan C# koduna geçiş için kullanılmaktadır. Yukarıdaki kullanımda:

        <h3> @kisiler.Length kişi listeniyor </h3>

@kisiler.Length kullanımı implicit code expression dır ve ekranda çıktı olarak 3 gösterilir. Razor ile birlikte herhangi bir kapatma ifadesi kullanmaya gerek yoktur.  Web Forms View ile yukarıdaki örneği sadece explicit code expression ile yapabiliriz. Örneğin;

        <h3> <%: kisiler.Length %> kişi listeniyor </h3>

Razor boşluk karakterinden sonra normal HTML’e dönüş yapıldığını anlayacak kadar akılldır.

Örnekte kullandığım ordered (sıralı) list içerisinde bulunan li (list item) elementleri içerisinde @kisi ifadesinden sonra li elementi kapatıldığı için geçerli karakter olarak algılanmıştır Razor tarafından.

        <li>@kisi.</li> ifadesi Render edildiğinde çıktısı <li>Steven Paul Jobs.</li> şeklinde olacaktır.

Yukarıdaki kullanımda Razor hangisinin HTML kodu olduğunu hangisinin C# kodu olduğunu anlamaktadır. Peki ya aşağıdaki kullanımın ekran çıktısı ne olacaktır:

@{
string kisaIsim = "mcansozeri";
}
<span>Web Sitem => @kisaIsim.com</span>

Çıktı olarak <span> mcansozeri.com </span> olmasını bekliyorsunuz ama maalesef aşağıdaki hatayı alırsınız:

Bu hatanın alınma nedeni string’in “com” diye metotu olmasından dolayı. Razor burada bizim hangi amaçla kullandığımızı anlayamadı. Fakat Razor aynı zamanda parantezlere alarak explicit code expression’ida desteklemektedir. Aşağıdaki kod sorunsuz olarak çalışacaktır:

<span>Web Sitem => @(kisaIsim).com</span>

Yukarıdaki kullanımda paranteze aldığınızda artık Razor’a .com’un bir text olduğunu ve kod kısmından tamamen bağımsız olduğunuzu söylemiş oluyoruz.

Email adresi yazarken:

Email adresimizi göstermek istediğimizde doğal olarak aşağıdaki gibi ifade kullanırız:

<span>mcs@mcansozeri.com</span>

Normalde yukarıkida kullanımdan hata alacağımızı düşünürüz fakat Razor bu ifadesinin email paternine sahip olduğunu anlamaktadır ve bu yüzden hata almayız.

Rzor bir ifadenin email olup olmadığına karar verirken oldukça basit bir algoritma kullanmaktadır. Fakat bunun anlamı bu algoritmanın kusursuz olduğu anlamına gelmez. Bazı durumlarda @ işaretinin yerine  @@ işareti kullanacağız.

Aşağıdaki kullanımda hata alacağız:

        <p>
            Takip edilesi bir kaç hesap:
            <br />
            @nuricankaya, @scottgu, @bilgeadam, @BillGates
        </p>

Hata almamak ve geçerli şekilde kullanabilmek için:

        <p>
            Takip edilesi bir kaç hesap:
            <br />
            @@nuricankaya, @@scottgu, @@bilgeadam, @@BillGates
        </p>

        veya 

        <p>
            Takip edilesi bir kaç hesap:
            <br />
            @nuricankaya, @scottgu, @bilgeadam, @BillGates
        </p>

Razor Söz Dizilimi Örnekleri

Implicit Code Expression

         @{string mesaj = "Implicit Code Expression";}

Razor <span>@mesaj</span>
Web Forms <span><%: mesaj %></span>

Explicit Code Expression

         @{ string numara = "9781430210085";}

Razor <span>ISBN@(numara)</span>
Web Forms <span>ISBN<%: numara %></span>

Unencoded Code Expression

Örneğin bir blog uygulaması yazıyorsunuz. Blog yayınlama yerinde bir çok HTML elementi olacaktır. Bu HTML elementlerinin yazı olarak değilde HTML olarak ekranda gösterilmesi için HTML.Raw kullanılmaktadır.

    @{string html = "<a href='http://www.mcansozeri.com'><b>Mahmut Can Sözeri</b></a> <br />";}

Razor <span>@Html.Raw(html)</span>
Web Forms <span><%: Html.Raw(html) %></span>
veya 
<span><%= html %></span>

Blok Kod Kullanımı

Razor blok olarak kod yazmak oldukça basit ve kolaydır.

Razor @{
int kurulus = 1997;
string isim = "Bilge Adam";
}
Web Forms <%
int kurulus = 1997;
string isim = "Bilge Adam";
%>

HTML ve C# İç İçe

        Razor
        @for (int i = 1; i < 11; i++)
        {
        <p>Sayı @i</p>
        }

        Web Forms
        <% for (int i=1; i < 11; i++) { %> 
        <p> Sayı <%: i %></span> 
        <% } %>

Karmaşık Kod ve Yalın Metin

        @{bool isOnline = true;}

        Razor
        @if (isOnline)
        {
            <text>Hoşgeldiniz.</text>
        }
        veya
        @if (isOnline)
        { 
            @:Hoşgeldiniz.
        }

 Web Forms 
       <% if (isOnline) { %>
       Hoşgeldiniz.
       <% } %>

Server Side Yorum

Razor @*
Multiline server side yorum.
         @if (isOnline)
         { 
         @:Hoşgeldiniz
         }
Yorumun bittiği yer.
*@
Web Forms <%--
Multiline server side yorum.
        <% if (isOnline) { %>
        Hoşgeldiniz.
        <% } %>
Yorumun bittiği yer.
--%>

İndirme

Yazı için yapmış olduğum örneklere bu linkten indirebilirsiniz.

Umarım faydalı bir yazı olmuştur.

İyi çalışmalar

MVC ile kalın.