ASP.NET MVC 3 Razor ile Uygulama Geliştirme Yazı Dizisi 11 – Layout(Master Page/Template) Nedir? Ne İşe Yarar?


asp-net-MVC3

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:

  1. @RenderSection(“Header”,false) diye tanımlayabilirsiniz. Bu sefer gereklilik belirtmemiş olursunuz. Aksi belirtilmedikçe bu Section’ların tanımlanması zorunludur.
  2. 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. #1 by gokhan on January 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 January 13, 2012 - 11:27 am

      Merhaba,

      Faydalı olmasına sevindim. Yazılarım devam edecek.

  2. #3 by Selçuk on April 25, 2012 - 3:19 am

    Hocam merhaba. Bu yazı diziniz 1 den başlayarak 11 e kadar olan kısmını nasıl elde edebilirim. Çok yararlı bilgiler paylaşmışsınız. Emeğiniz için çok teşekkürler. Fakat bir türlü yazınızın tamamını bulamadım sitede şimdiden saygılarımla.

  3. #5 by burcu umut on December 18, 2015 - 3:49 pm

    merhabalar;
    ben web sayfası oluştrmada öğrencilerime webmatrix kullandırdım. .ancak cshtml uzantılı sayfalar browser üzerinde açılmıyor. Daha sonra bu sorunu gidermek için mvc3 razor yükledim. Bu yükleme ile sorunum bazı bilgisayarlarda çözüldü ancak bazılarında bu sorunu çözemedim. Bu durumu nasıl çözüme kavuşturabilirm? Teşekkürler

    • #6 by Mahmut Can Sozeri on December 23, 2015 - 9:55 am

      Merhaba,
      WebMatrix ile tam olarak nasıl yapıldığı konusunda bilgi sahibi değilim. Bu yüzden yardımcı olamayacağım. Çünkü burada ben Visual Studio programı üzerinden anlatımı gerçekleştirdim.

      İyi çalışmalar

  4. #7 by Ömer on November 29, 2016 - 1:50 am

    Merhaba,
    emeğinize sağlık. Youtube da dahil olmak üzere bir çok yerde sizin anlatımlarınızdan öğrenerek öğretmencilik oynayanları gördüm ve Asıl hak sahibini gördüğüme çok memnun oldum. Tekrar emeğinize sağlık.

    • #8 by Mahmut Can Sozeri on November 29, 2016 - 6:58 am

      Merhaba,

      Yorumunuz için teşekkür ediyorum. Paylaşımlarım bir şekilde faydalı olabiliyorsa mutlu oldum.

      İyi çalışmalar

  1. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s