20 Nisan 2014 Pazar

13:53 Unknown 0

View'lar ve Razor View Engine

Merhaba arkadaşlar, geçen hafta ilk MVC projemizi oluşturmuştuk ve Controller'lara değinmiştik. Oluşturduğumuz Controller'lar saf string döndüren Action'lara sahipti, bunun sonucunda elde ettiğimiz sayfaların içeriğinin tam olarak HTML yapısına sahip olduğu söylenemezdi. Bu yazıda View döndüren Action'lar oluşturarak ayrı bir dosya olarak hazırladığımız View'ların kullanıcıya ulaşmasını sağlayacağız. Aynı zamanda ASP.NET MVC'de View Engine olarak çok tercih edilen Razor View Engine'den bahsedeceğim ve View'larımızı bununla hazırlayacağız.

ActionResult

View'lara geçmeden önce ActionResult'lara değinmek istiyorum. Geçen hafta Controller'lar içinde oluşturduğumuz action'lar basit string'ler döndürüyordu. Çoğu Action metodu ActionResult sınıfından türeyen nesneler döndürür. ActionResult sınıfı bütün action result'ların temelini oluşturur. Ancak Action metodunun görevine göre farklı action result türleri mevcuttur. Örneğin en yaygın action, View metodunu çağırmaktır. View metodu ActionResult'dan türeyen ViewResult sınıfının bir nesnesini döndürür.

Aşağıdaki tablo dahili action result türlerini ve onları döndüren yardımcı metotları gösteriyor:
Action ResultYardımcı MetotAçıklama
ViewResultView Bir view'ı web sayfası olarak oluşturur.
PartialViewResultPartialView Bir view'ın bir kısmını oluşturan, başka bir view içinde tanımlanabilen, kısmi bir view oluşturur.
RedirectResultRedirect Bir action'ın URL'ini kullanarak o action'a yönlendirir.
RedirectToRouteResultRedirectToAction
RedirectToRoute		Başka bir action metoda yönlendirir.
ContentResultContent Kullanıcı tarafından tanımlanmış bir içerik döndürür.
JsonResultJsonJSON nesnesi döndürür.
JavaScriptResultJavaScriptİstemcide çalıştırılabilecek bir script döndürür.
FileResultFile Binary çıktı döndürür.
EmptyResult-Action metodun null bir değer döndürmesi gerektiğinde kullanılan değeri temsil eder.

View'lar

ASP.NET MVC'de kullanıcıya HTML göstermek isteyen controller action'ları ViewResult sınıfının bir nesnesini döndürür. View oluşturulacağı zaman ASP.NET MVC, controller tarafından sağlanan ismi kullanan view'a bakacaktır.

Mesela HomeController'daki Index action'ına bakarsak: 
namespace MerhabaMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ViewBag.Message = "Deneme mesajı.";
            return View();
        }

    }
}
Bu action View() metodu ile bir ViewResult oluşturur. Bu örnekte olduğu gibi View metodu hiçbir parametre almadan çağrılırsa, ASP.NET MVC o controller action'ı ile aynı isme sahip bir view arayacaktır. Bu örnekte ASP.NET MVC Index isimli bir view'a bakacaktır.

ASP.NET MVC'de uygulamanın view'ları Views klasörü içinde yer alır. ASP.NET MVC view'ların kendisiyle ilgili olan controller'ın adına sahip klasörler içinde olmasını bekler. Yani yukarıdaki örnekte HomeController içindeki Index action'ına ait view için framework, /Views/Home klasörünün içinde Index ismine sahip bir dosyaya bakacaktır. Eğer controller'ın Views klasöründe aranılan view bulunamazsa, ASP.NET MVC birden fazla controller tarafından paylaşılan view'ların tutulduğu /Views/Shared klasörüne bakacaktır.

Bir Controller Action'ına View Eklenmesi

Bir controller action'ına view eklemek için o action'a ait metodun sınırları içinde sağ tıklayıp Add View seçeneğini seçiyoruz.



Daha sonra karşımıza çıkan pencereden şu an belirlediğimiz bir layout ya da master page olmadığı için "Use a layout or master page" seçimini kaldırıyoruz, daha sonra Add düğmesine basıyoruz.



Bunun sonucunda aşağıdaki gibi Index.cshtml adlı bir dosya elde ediyoruz: 
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>
Görüldüğü gibi dosya neredeyse tamamen HTML'den oluşuyor. Yalnızca en üstte @ ile başlayan kısım dikkatimizi çekiyor.

Razor View Engine

Razor, kodun ve içeriğin akıcı ve etkili bir şekilde birleştirilmesini sağlayan bir sözdizimidir. Yeni semboller ve anahtar kelimeler içeriyor olmasına rağmen yeni bir dil değildir. Tam aksine Razor, daha önceden bildiğiniz dillerle kod yazımını sağlar. Razor'u öğrenmek çok kolaydır çünkü yeni bir dil öğrenmeyi gerektirmektense var olan bilginizle çalışmanızı sağlar. Bu yüzden HTML ve C# biliyorsanız kolay bir şekilde aşağıdakini yazabilirsiniz:
<div>Bu sayfa @DateTime.Now tarihinde oluşturuldu.</div>
Bu aşağıdaki gibi bir HTML çıktısı verir: 
<div>Bu sayfa 20.04.2014 22:48:54 tarihinde oluşturuldu.</div>
Bu örnekte @ karakteri .NET'deki DateTime sınıfının Now özelliğine erişmek için kullanılmıştır. @ ile başlayan küme parantezleri arasına c# kodu yazılabilir. Bu kod bloğunda tanımlanan değişkenlere de @DegiskenAdi şeklinde erişilebilir: 
@{ var message = "Merhaba, Razor.";}
Mesaj : @message
Razor View Engine'i kullanarak koşul tabanlı dinamik sayfalar oluşturabiliriz. Bir kod bloğu içinde ya da dışında koşul tanımlayabiliriz. if ifadesi diğer dillerde olduğu gibidir: 
@{
    var isValid = true;
    if(isValid)
    {
        //Kod bloğu içinde if ifadesi
    }
    else
    {
        //Kod bloğu içinde else ifadesi
    }
}

@if(true)
{
    //if bloğu
}
Bütün döngüler diğer dillerdeki gibidir. Bir döngüyü bir kod bloğunun dışında ya da içinde tanımlayabiliriz. Örneğin bir foreach döngüsü aşağıdaki gibi oluşturulabilir: 
@{
    string[] nameArray = {"Ali", "Ahmet", "Mehmet"};
}

@foreach(var name in nameArray) {
    <span>Your name is : @name</span><br />
}
Bu yazımda MVC'de sayfayı oluşturmakla sorumlu olan View'ları anlatmaya çalıştım. Haftaya Model-View-Controller'ın son katmanı olan Model'lardan bahsedeceğim. Haftaya görüşmek üzere...

Kaynaklar:

0 yorum :