Merhaba MVC Severler,
Önceki yazımda Url Helper’larından Url.Action, Url.Content ve Url.RouteLink’i inceledik. Bu yazımda da Layout’u inceleyeceğız. Nasıl çalışır? Ne amaçlı kullanılır? Uygulamayı sayfanın sonunda indirebilirsiniz.
Layout
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 Web Form’lar ile yani ASP.NET sayfaları ile çalıştıysanız ya da çalışıyorsanız, Layout’lar, Master Page’ler ile aynı amaca hizmet ederler. Fakat hem daha kolay yazımı hem de esnekliği daha fazladır.
Layout kullanarak uygulamanızın istediğiniz bölümleri ortak, geri kalan yerleri ise sayfa bazında değişiklik gösterebilir. Layout içerisinde istediğiniz kadar Section(ContentPlaceHolder) tanımlayabilir, içeriğini istediğiniz View’de değiştirebilirsiniz. Wrox ASP.NET MVC 3 kitabında ki benzetmeyi de paylaşmak istiyorum, View’leriniz için Abstract Class olarak düşünebilirsiniz.
Layout Oluşturma
Views > Shared klasörüne BaseLayout adında aşağıdaki gibi bir Layout oluşturuyorum:
Oluşturduğumuzda, aşağıdaki gibi bir View açılır:
Aslında her zaman oluşturduğumuz standart Razor View’e benziyor. Fakat burada View içerisinde ilgimizi çekmesi gereken bir bölüm var: @RenderBody. @RenderBody, Layout kullanan View’lerinizdeki içeriklerinizin görüntüleceğini bölümdür.
Layout Kullanımı
Öncelikli olarak Controller’im içerisinde ActionResult tipinde Index adındaki metotuma sağ tıklayıp Add View dedikten sonra Use a layout or master page seçeniğini işaretleyip, oradan daha önceden oluşturduğumuz BaseLayout.cshtml‘i seçiyoruz.
Index.cshtml İçeriği:
Layout İçerisinde Kullanımı İnceleyelim:
<!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <div> <h2>Index Sayfası</h2> </div> </body> </html>
Yani burada title tagleri arasındaki bölümü ViewBag.Title’i index sayfasında atayarak yapmış olduk. Ayrıca RenderBody() yazan bölüme Index sayfamdaki geriye kalan herşey yerleşmiştir.
Bu şekilde kullanım olabileceği gibi, birden fazla Section’da ekleyebiliriz.
Bir Çok Section Nasıl Kullanılır?
Öncelikli olarak BaseLayout.cshtml sayfamda aşağıdaki gibi değişiklikler yapıyorum.
Dikkat: Bu şekilde oluşturup Index.cshtml sayfamızda herhangi bir değişiklik yapmazsak aşağıdaki hatayı alırız:
Hatayı gidermek için:
- @RenderSection(“Header”,false) diye tanımlayabilirsiniz. Bu sefer gereklilik belirtmemiş olursunuz. Aksi belirtilmedikçe bu Section’ların tanımlanması zorunludur.
- Index.cshtml içerisinde bu bölümleri tanımlamalısınız.
Section Kullanımı
@Section SectionAdi{} yazarak kullanabilirsiniz.
Umarım faydalı bir yazı olmuştur.
İndirme
Uygulamayı buradan indirebilirsiniz.
Sonraki yazımda ASP.NET MVC life cycle’i anlatacağım.
MVC ile kalın,
#1 by gokhan on Ocak 13, 2012 - 3:49 am
Yaptığınız bütün çalışmaları inceledim ve gerçekten çok faydalı buldum yazılarınız devamını bekliyorum. Elinize sağlık çok bilgilendim sayenizde iyi çalışmalar.
#2 by Mahmut Can Sözeri on Ocak 13, 2012 - 11:27 am
Merhaba,
Faydalı olmasına sevindim. Yazılarım devam edecek.