Asp.Net MVC

Asp.Net MVC Layout Kullanımı

Merhaba, bu makalemde Asp.Net MVC'de Layout kullanımını işleyeceğiz. Eğer Asp.Net MVC hakkında bilginiz yok ise Model View Controller (MVC) Nedir? ve Asp.Net MVC’ye Giriş – İlk Projem makalesini mutlaka okumalısınız. 

 

1.Layout Ne işe Yarar ?

Razor'da Layout'lar, tutarlı bir görünüm sağlamaya yardımcı olmanın yanında bir çok View arasında görüntülenir, kullanılırlar. Eğer daha önceden Asp.Net Web Form ile çalıştıysanız veya çalışıyorsanız daha iyi anlayacaksınız ki MVC'de ki Layout'un karşılığı Web Form'da Master Page'dir. Aynı amaca hizmet ederler. Fakat MVC'de bu olay daha kolay yazımı ve esnekliği ile ön plana çıkmıştır.

Layout kullanan projelerinizde arayüzün istediğiniz bölümünü View'lerde ortak kullanıma açabilir, geri kalan yerleri ise yine View'lerde değişiklik gösterebilirsiniz. Layout içerisinde istediğiniz kadar Section( ContentPlaceHolder ) tanımlayabilir, içeriğini istediğiniz View'de değiştirebilirsiniz.

2.Layout Nasıl Kullanılır ? (Teknik) 

Bir resimle açıklamak gerekirse eğer şu şekilde olacaktır. Resim 1

 

Resim 1

Resim 1 de gördüğünüz ilk "_Layout.cshtml"  kısmındaki arayüz "content" div'i içerisinde "@RenderBody()" kullanılmıştır. Bu Web Form'daki Content Place Holder'a eşittir.Bu Layout'u kullanarak oluşturduğunuz Index View'i içerisinde "Layout="_Layout.cshtml";" kodunu görürsünüz. Layout'a yazdığınız RenderBody kodu ile, Index View'inin içerisine yazdığınız tüm kodlar Layout'ta bulunan RenderBody'nin yerine geçiçektir. Böylelikle Index View'in yerine başka bir View kullandığınız zaman RenderBody değişerek farklı bir sayfa oluşturma kolaylığına ulaşacaksınız. Layout kullanmak sizi tekrarlanmış kodlardan uzak tutar.

3.Layout Nasıl Kullanılır ? 

Bir de projede nasıl kullanıldığını görelim.

1.Layout Oluşturma

  İlk olarak Empty Asp.Net MVC 4 Web Application projesi oluşturun. Ardından "Views" klasörüne sağ tıklayıp "Add"a ve "MVC 4 Layout Page (Razor)"a tıklayın. Resim 2

Resim 2

Açılan küçük isim penceresinde dilediğiniz ismi yazdıktan sonra okey'e tıklayıp  Layout Page'i ekleyin. "Views" klasörü içerisine verdiğiz ad ile ve uzantısı ".cshtml" olan bir dosya geldi. Eğer uzantısı ".cshtml" değilse C# projesi oluşturduğunuza emin olun. Dosyayı açın ve içerisindeki kodlara göz gezdirin.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

"<title></title>" etiketi içerisinde View'den gelecek olan Title ismi bir deger gibi tanımlanıyor ve "<body></body>" etiketi içerisine "@RenderBody()" kodu eklenerek View'den gelecek kodları çekiyorsunuz. 

2.Layout Kullanan View Oluşturma

İlk olarak bir Controller oluşturmanız gerekiyor. Bunu bir önceki makalemden bakarak oluşturabilirsiniz. Dikkat etmeniz gereken yer "Add View" penceresinde bir Layout seçmek. Resim 3

Resim 3

View'i açıp içerisindeki kodları inceleyin.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/_Layout.cshtml";
}
<h2>Index</h2>

Buradaki "ViewBag.Title = "Index";" içerisinde yazan Index, Layout'a giderek "<title></title>" etiketleri arasına yerleşiyor. "Layout = "~/Views/_Layout.cshtml";" kısmında Layout kullanıp kullanmadığını ve hangi Layout'u kullandığını görebilirsiniz.

"<h2>Index</h2>" kısmıda _Layout.cshtml dosyamızda bulunan "@RenderBody()" yerine geçiyor. Projeniz çalışır durumda. Startlayarak çıktısını görebilirsiniz. 

Resim 4

4.Layout İçerisinde Section Kullanımı

Bir nevi birden fazla RenderBody kullanımı yerine geçmektedir. Kodlar şu şekilde;

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <header>@RenderSection("Header",false)</header>
    <div>
        @RenderBody()
    </div>
    <footer>@RenderSection("Footer", false)</footer>
</body>
</html>

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/_Layout.cshtml";
}
@section Header 
{
    <h2>Header</h2>
}
<h2>Index</h2>
@section Footer
{
    <h2>Footer</h2>
}

5.Neler Öğrendik ? 

Bu makalemde Asp.Net MVC'de Layout'un, ne işe yaradığını, kullanımının teknik kısımlarını,  proje üzerinde nasıl kullanıldığını, nasıl oluşturulduğunu, Layout kullanan bir View'in nasıl eklendiğini ve Section özelliğinin nasıl kullanıldığını öğrenmiş olduk.

Bir sonraki makalemde görüşmek üzere.. 

2 thoughts on “Asp.Net MVC Layout Kullanımı”

  1. Layoutun içine veri tabanındaki bilgilerimi nasıl aktarabilirim(örnegin kategoriler olacak ve bunları her sayfada görmem gerekiyo,kategori isimleri de veritabanından cekilecek )

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir