Asp.Net MVC 3 Razor View Engine Giriş

16.06.2012Okunma Sayısı: 8257Kategori: ASP.NET MVC

Asp.Net’in gelişmesi ile birlikte ileri seviye bir dil oldu. Microsoft daha basite indirgemek için yeni bir framework oluşturmaktadır : Asp.Net Web Pages. Kodlaması PHP gibi HTML ile serverside kodlar birarada bulunmaktadır. Yeni başlayanlar için güzel bir başlangıç sağlayacaktır.

Peki Asp.Net Web Pages’in klasik Asp.Net’ten en büyük farkı ne dediğimizde dikkatimizi çeken en büyük nokta, aspx sayfalarının yerini C# için cshtml, VB.Net için vbhtml dosyalarıdır. Codebehind OLMAKSIZIN tek dosya içinde hem clientside hem serverside işlemler gerçekleştiriliyor. Bu yapının ismine Razor (View Engine) diyoruz.

Serverside kodları yineC# ya da VB.Net kullanılıyor. Sadece serverside kodlarımızı Razor’un kendi Syntax’ına uygun yazmamız isteniyor.

Razor, MVC 3’ün varsayılan View Engine’ı olduğu için MVC’de çok önemli bir yere sahiptir.

MVC3’te Razor View Engine’i bir örnek uygulama üzerinde inceleyelim. Visual Studio 2010’da yeni bir ASP.NET MVC 3 Web Application oluşturalmı.

Oluşturduğumuz projenin View engine’ini Razor seçelim ve Empty bir MVC3 projesi oluşturalım.

Projemizi oluşturduk.Empty MVC 3 Web Application oluşturduğumuzda Solution Explorer’ın görüntüsü aşağıdaki gibi olacaktır.

$Description: C:\Users\ugur\Desktop\Makale 2011 04 25\Asp_Net_MVC_Razor_Nedir\Asp_Net_MVC_Razor_Nedir_4.jpg$

Empty MVC 3 uygulamasında Shared klasörünün içinde 2 tane cshtml dosyası görüyoruz.

1. _Layout.cshtml : MasterPage’imiz

2. Errror.cshtml : Hatayla karşılaşıldığında görünecek sayfa

Bu iki sayfanın kodlarına göz atalım.

_Layout.cshtml

 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
 
<body>
    @RenderBody()
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
 
<body>
    @RenderBody()
</body>
</html>

Error.cshtml

 
@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Error</title>
</head>
<body>
    <h2>
        Sorry, an error occurred while processing your request.
    </h2>
</body>
</html>

@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Error</title>
</head>
<body>
    <h2>
        Sorry, an error occurred while processing your request.
    </h2>
</body>
</html>

Viiews klasörünün altında _ViewStart.cshtml dosyası da yer almaktadır. Projemiz çalıştığında ilk çalışan cshtml dosyamız burasıdır. Layout parametresi olarak belirlediği, hangi sayfanın MasterPage olacağıdır.

_ViewStart.cshtml

 
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Uygulamamıza kaldığımız yerden devam edelim. Projemizde Controller’a sağ tıklayalım Add->Controller ile yeni bir controller ekleyelim.

Controller’ımızın ismi RazorController olsun.

Add butonuna tıklayalım ve Controller’ı oluşturalım. Index() methodumuza sağ tıklayıp Add View diyelim ve Razor/Index.cshtml dosyamızı (View’ımızı) oluşturalım.

Add View dedikten sonra View’ımızın yapılandırmasını yapacağımız ekran açıldı. Burada dikkat etmemiz gereken en önemli nokta, View engine seçeneğinde hem Razor hem ASPX’in yer almasıdır. Bu da MVC 3 web uygulamamızda başlangıçta hangi View Engine’i seçersek seçelim proje içerisinde her iki view engine’i de kullanabiliyoruz (ASPX ve Razor).

Index.cshtml dosyamız, Razor klasörünün altında oluştu. Şimdi Index dosyamıza göz atalım.

Index.cshtml

 
@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>

@{
    ViewBag.Title = "Index";
}
 
<h2>Index</h2>

Dikkat ederseniz ASPX’teki <% %> yerine @{} yazımı bulunmaktadır. Razor View Engine’in yazım kuralının temelinde @ sembolü yatmaktadır. Razor Syntax’ına sonraki makalelerimizde daha detaylı değineceğiz.

Şimdi ekranda server tarafından aldığımız bazı verileri yazdıralım. Bunun için RazorController.cs’ye gidelim ve Index() methodumuzun kodunu şu şekilde düzenleyelim.

RazorController.cs

 
public ActionResult Index()
{
    ViewBag.Yazar = "Veysel Uğur KIZMAZ";
    ViewBag.MakaleSayisi = 105;
 
    return View();
}

        public ActionResult Index()
        {
            ViewBag.Yazar = "Veysel Uğur KIZMAZ";
            ViewBag.MakaleSayisi = 105;
 
            return View();
        }

Şimdi Razor/Index.cshtml dosyamıza gidelim ve buradaki kodumuzu aşağıdaki gibi düzenleyelim.

Index.cshtml

 
@{
    ViewBag.Title = "Başlık";
}
 
@{
    <h1>@ViewBag.Yazar</h1>
    <br />
    <h3>Makale Sayısı : @ViewBag.MakaleSayisi</h3>
}

@{
    ViewBag.Title = "Başlık";
}
 
@{
    <h1>@ViewBag.Yazar</h1>
    <br />
    <h3>Makale Sayısı : @ViewBag.MakaleSayisi</h3>
}

ASPX’te bir değişken değerini yazdırmak için <%= %> kullanıyorduk. Burada değişkenimziin başına @ yazarak benzer işlemi gerçekleştiriyoruz.

Projemizi çalıştıralım ve Razor/Index linkine gidelim (http://localhost:xxxx/Razor/Index)

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com