Asp.Net MVC Layout Nedir ve Nasıl Kullanılır?

Merhaba Arkadaşlar,
Bu makalemizde Layout ve ViewStart kavramlarını öğreneceğiz.Daha iyi anlaşılması adına kendi sitem üzerinden anlatmaya çalışacağım.Çoğu web sitesi temel olarak Header,Sidebar,Content ve  Footer’dan oluşuyor.Header dediğimiz yer sayfanın yukarısında bulunan menü kısmı diyebiliriz.Bu sitede Anasayfa,Yazarlar,İletişim kısmının olduğu yer.Sidebar dediğimiz yer, sağda bulunun Kategoriler,Son Yorumlar vs.. nin bulunduğu kısım.Footer dediğimiz yer sayfanın en altında Tüm hakları saklıdır yazan kısım.Ve son olarak Content dediğimiz yer de içeriklerin bulunduğu kısımdır.

aspnet-mvc-layout-kullanimi

Site içerisinde gezindiğiniz zaman göreceğiniz gibi sayfalarda Header,Sidebar ve Footer alanları hep aynı kalırken sadece Content alanı sürekli değişiyor.Anasayfa’da makaleler listelenirken İletişim sayfasında iletişim formu geliyor.Ama ikisinde de sadece Content alanı değişiyor.Şimdi gelelim Layout kavramı bizim için neden bu kadar önemli?

Sitemizin 30 farklı sayfadan oluştuğunu varsayalım.Ve her sayfada Menu kısmını tekrar yazdığımızı düşünelim.Projemizi bitirdikten sonra Menu kısmında bir değişiklik yapma ihtiyacı hissettiniz.Bu durumda ne yapmanız gerekecek? 30 farklı sayfayı tek tek açıp herbirinde aynı düzeltmeyi yapmanız gerekecek.Gördüğünüz gibi hiç makul olmayan bir çözüm.İşte Layout kavramı tam da bu ihtiyacımızı karşılıyor.Yani sabit kısımları (Header,Sidebar,Footer vb..)  bir defa yazıp tüm sayfaların da bunları kullanmasını sağlıyoruz.Bu şekilde herhangi bir değişiklik söz konusu olduğunda sadece Layout’da gerekli düzenlemeler yapılırsa 30 sayfa da düzenlenmiş olacak.Şimdi bir proje üzerinde adım adım uygulayarak daha iyi anlamaya çalışalım

1 – Gördüğünüz gibi boş bir Mvc Projesi oluşturup, HomeController ekledim.Eğer boş bir proje nasıl oluşturulur bilmiyorsanız.Asp.Net MVC Projesi Nasıl Oluşturulur? makalesini inceleyebilirsiniz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(2)

2 – Views klasörü içerisine Shared isimli bir klasör oluşturuyoruz.Bu klasöre sağ tıklayarak Add -> MVC 5 Layout Page (Razor) sayfasını ekliyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(3)

3 – Oluşacak sayfanın ismini _Layout olarak belirleyip, OK diyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(4)

4 – Gördüğünüz gibi basit bir Html5 sayfası oluştu.Burda @RenderBody() kısmını bir sonraki makalede daha detaylı öğreneceğiz. Oluşan bu yapıya örneğimizin daha iyi  anlaşılması adına basit olarak menu ve footer alanı ekledim.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(5)

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(14_)

5 – HomeController içerisindeki Index Action içerisinde herhangi bir yere sağ tıklayarak Add Viewdiyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(6)

6 –  View name kısmını Index olarak bırakıyorum.Use a layout page kısmını seçili bırakıp (Layout kullanmak istediğimizi belirtiyoruz) sağdaki buton ile Layout’umuzu seçiyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(7)

7 – Shared klasörü içerisine oluşturduğumuz _Layout’u seçiyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(8)

8 – Gördüğünüz gibi _Layout seçili durumda.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(9)

9 – Örneğimizin daha iyi anlaşılması adına HomeController içerisine Hakkimda ve Iletisim action metodlarını yazıyoruz.Daha sonra aynı adımları bu 2 action için de uyguluyoruz.Yani View eklerken _Layout’u seçip ekleme işlemini gerçekleştiriyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(10)

10 – Oluşturduğumuz 3 sayfayı da tarayıcıda görüntülediğimiz zaman Menu ve Footer kısımları her sayfada _Layout dan geliyor.Biz _Layout’da bulunan Menu ve Footer kısımlarında herhangi bir düzenleme yaptığımız zaman 3 sayfada birden düzenlenmiş olacak.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(11)

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(12)

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(13)

_ViewStart

Şimdi de _ViewStart kavramının ne olduğunu inceleyelim.Yaptığımız örnekte her view ekleme işleminde _Layout’u seçmek durumundaydık.Bunun yerine _ViewStart kullanarak tüm View’ların _Layout’unu tek noktada tanımlamış olacağız.Uygulama üzerinde daha anlaşılır olacaktır.

Views klasörüne sağ tıklayarak Add -> View diyerek bir View ekliyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(15)

 View name kısmına _ViewStart yazıp, Shared altındaki _Layout’u seçiyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(16)

_ViewStart.cshtml sayfamızın içeriğini bu şekilde yazıyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(17)

Örneğin Index Action’ı için View oluştururken Use a layout page seçili olacak fakat _Layout sayfasını seçmeyeceğiz.Zaten aşağıda açıklama olarak yazılmış.Diyor ki eğer sen hem layout kullanacağım hem de boş bırakıyorum dersen ben de _ViewStart daki tanımlı _Layout‘u kullanacağım.Bu şekilde View’lar oluşturduğumuz takdirde _Layout kontrolünü de bir noktadan sağlamış oluruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(18)

Evet arkadaşlar şimdi geldik yazımızın sonuna.Buraya kadar _Layout ekleme, View eklerken _Layout kullanma ve _ViewStart kavramlarını öğrendik.Şimdi de bu yapılan işlemleri Visual Studio bizim yerimize nasıl yapıyor onu öğrenelim.Her zamanki gibi boş bir projemiz var ve içerisinde HomeController oluşturdum.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(2)

Index Action’ı için View ekliyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(6)

Use a layout page seçili olacak ama her hangi bir _Layout tanımlamıyoruz.Ve Add diyoruz.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(18)

Ve gördüğünüz gibi Visual Studio bizim yerimize şunları oluşturuyor,

* _ViewStart.cshtml,

* _Layout.cshtml,

*  Content klasörü oluşturup içerisine bootstrap ve site style dosyalarını,

*  fonts klasörü oluşturup içerisine glyphicons iconlarını,

* Scripts klasörü oluşturup içerisine bootstrap ve jquery script dosyalarını 

* Ve _Layout sayfamızın içeriside hazır bootstrap kodlarıyla yazılmış olarak geliyor.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(19)

<ul class=”nav navbar-nav”> içerisine menu elemanlarımızı yazabiliriz.Örnek olması için Anasayfa, Hakkımda ve İletişim linklerini ekledim.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(20)

Sonuç olarak Index sayfamızı tarayıcıda görüntülediğimiz zaman Menu,Footer ve Content alanlarımız gördüğünüz gibi olacaktır.Umarım faydalı bir makale olmuştur.

aspnet-mvc-layout-nedir-ve-nasil-kullanilir(21)

Bir sonraki makalede Asp.Net MVC RenderBody, RenderSection Nedir ve Nasıl Kullanılır? onu öğreneceğiz.

Yeni bir makalede görüşmek üzere…

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +