AliRıza Adıyahşi: ASP.NET MVC DERSLERİ ( 3.7 ) RAZOR VIEW ENGINE

RAZOR NEDİR?

ASP.NET MVC 3 de yayınlanmıştır ve artık varsayılan olarak razor kullanılmaya başlanmıştır. Razor birçok isteği yerine getirmek için çok iyi bir görüntüleme aracıdır. Temiz, hafif ve basit bir kullanım sağlar. Bir çok geliştirici de bunu ister.

Özellikle HTML kodlarını yazdığımız görüntüleme araçları söz dizim olarak okunması ve yazılması zor kodlar içerir. Bu noktada Razor, (MVC ile de birleşince) çok temiz ve anlaşılır kodlar yazmamızı sağlar.

Razor, modern ve akışkan bir kullanım sunar. Kodları olabildiğince azaltır. Kodları azaltır derken, gereksiz operatör kullanımını azaltır. Razor içerisinde kod yazarken, özellikle de intellisense desteği ile çok rahat, sunucu(C#, VB, ...) ve istemci(HTML) taraflı kodları birbiri içerisinde çok fazla düşünmeden rahatça yazabiliriz.

Razor görüntüleme aracının kullanım yapısını anlamak çok rahattır. Hatta öyle ki nasıl yazacağınızı hissedersiniz. HTML kodları ile C# kodları arasında çok hızlı ve akıcı bir geçiş yapabilirsiniz. Bunu daha iyi anlamak için aşağıdaki kod parçasını inceleyebiliriz.

@{
    // burası kod satırları
    // aşağıdaki kodla bir model oluşturuyoruz.
    var items = new string[] {"bir", "iki", "üç"};
}
<html>
    <head><title>Sample View</title></head>
    <body>
        <h1>Listing @items.Length items.</h1>
        <ul>
            @foreach(var item in items) 
            {
                <li>@item . eleman</li>
            }
        </ul>
    </body>
</html>

Yukarıdaki kod C# söz dizimi ile yazılmıştır, dosya uzantısı .cshtml dir. Bunu VB söz dizimi ile de yapabiliriz, böyle olursa dosya uzantısı .vbhtml olacaktır.

Kısacası Razor söz dizimini hiç kafaya takmadan, sadece HTML yazmaya başlayın, kod yazmak gerektiğinde ise cümlenin başına @ işeretini koyun ve kod ile devam edin.

Razor View Engine özellikeri ve kod yapısı : http://alirizaadiyahsi.blogspot.com/2013/01/razor-aspx.html

HTML ENCODING

Kullanıcıdan alınan ve sitede gösterilen bir çok alan vardır. Kullanıcı girdileri, yorumlar, blog yayını ürün özellikleri gibi kullanıcıdan alınan veriler için iyi bir kontrol gerekir. Çünkü Cross-Site Scripting (XSS) denilen saldırılara maruz kalabiliriz. Bu konuyu detaylı olarak ayrı bir başlıkta inceleyeceğiz. Razor otomatik olarak HTML kodlarını çözer.

@{
    string message = "<script>alert('hacklendi!');</script>";
}
<span>@message</span>

Normalde bu kod bir uyarı penceresi açardı. Ama razor bunu engeller ve aşağıdaki şekilde ekranda görünür.

<span><script>alert('haacked!');</script></span>

Bununla birlikte HTML kodlarını sayfamızda göstermek isteyebiliriz. Bunu System.Web.IHtmlString sınıfının nesnesini kullanarak yapabiliriz. Böylece Razor HTML kodlarını çözmeyecektir. Bütün View döndüren metodlar bu sınıftan türemiştir. Çünkü view metodlarının amacı HTML string döndürmektir. İki şekilde HTML gösterebiliriz, HtmlString dondürerek ve ya @Html.Raw helper ı kullanarak.

@{
    string message = "<strong>This is bold!</strong>";
}
<span>@Html.Raw(message)</span>

Sonuç

<span><strong>This is bold!</strong></span>

Bu otomatik HTML encoding XSS saldırıları için iyi bir korumadır. Ama kullanıcı girdilerini JavaScriptle sayfadaki bir elementin içerisinde gösteririrken yine aynı sorun karşımıza çıkar. Yani gelen veriyi direk yukarıdaki gibi değilde JavaScript kullanarak yazdırmak istersek. Örneğin;

<script type="text/javascript">
    $(function () {
        var message = 'Hello @ViewBag.Username';
        $("#message").html(message).show('slow');
    });
</script>

Yukarıdaki kod ViewBag den gelen veriyi JQuery metod ile message isimli HTML elamanının içerisinde yazdıracaktır. Eğer kullanıcı aşağıdaki gibi bir string girerse, uygulamamız saldırıyı yemiş olacaktır.

\x3cscript\x3e%20alert(\x27pwnd\x27)%20\x3c/script\x3e

Bu durumda HTML encoding yeterli olmayacaktır, bundan dolayı JavaScript encoding te yapmalıyız. Kullaıcı girdilerini script ile sayfaya yazdıracaksak @Ajax.JavaScriptStringEncode kodunu kullanmalıyız. Doğru olan aşağıdaki gibidir.

<script type="text/javascript">
    $(function () {
        var message = 'Hello @Ajax.JavaScriptStringEncode(ViewBag.Username)';
        $("#message").html(message).show('slow');
    });
</script>

Güvenlik web sitesi için çok önemli bir konudur. HTML ve JavaScript encoding i iyi anlamak gerekir. Sonraki konularımızda güvenlik konusunu detaylı olarak inceleyeceğiz.

KOD BLOKLARI

Razor ayrıca kod bloklarıda kullanır. Örneklerimizde @ViewBag şeklinde kullandığımız kodu @(item), @{var item="";} gibi kod blokları içerisinde kullanabiliriz. Şimdi birkaç tane kod örneğine bakalım, böylece Razor söz dizimi daha iyi anlaşılacaktır.

Razor Sözdizim Örnekleri

Razor	Web Forms
<span>@model.Message</span>	<span><%: model.Message %></span>
<span>ISBN@(isbn)</span>	<span>ISBN<%: isbn %></span>
<span>@Html.Raw(model.Message)</span>	<span><%: Html.Raw(model.Message) %></span> ve ya <span><%= model.Message %></span>
@{ int x = 123; string y = ˝because.˝; }	<% int x = 123; string y = "because."; %>
@foreach (var item in items) { <span>Item @item.Name.</span> }	<% foreach (var item in items) { %> <span>Item <%: item.Name %>.</span> <% } %>
@if (showMessage) { <text>This is plain text</text> } ve ya @if (showMessage) { @:This is plain text. }	<% if (showMessage) { %> This is plain text. <% } %>
My Twitter Handle is @deneme ve ya My Twitter Handle is @@deneme	<% expression %> marks a code nugget.
@* yorum @if (showMessage) { <h1>@ViewBag.Message</h1> } yorum *@	<%-- yorum <% if (showMessage) { %> <h1><%: ViewBag.Message %></h1> <% } %> yorum --%>
@(Html.SomeMethod<AType>())	<%: Html.SomeMethod<AType>() %>

AliRıza Adıyahşi

Sayfalar

9 Şubat 2013 Cumartesi

ASP.NET MVC DERSLERİ ( 3.7 ) RAZOR VIEW ENGINE

1 yorum: