Bu yazımızda 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.
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
Asp.Net MVC Layout Nasıl Kullanılır?
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? yazımı okuyabilirsiniz.
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.
3 – Oluşacak sayfanın ismini _Layout olarak belirleyip, OK diyoruz.
4 – Gördüğünüz gibi basit bir Html5 sayfası oluştu. Burada @RenderBody() kısmını bir sonraki yazıda daha detaylı öğreneceğiz. Oluşan bu yapıya örneğimizin daha iyi anlaşılması adına basit olarak menu ve footer alanı ekledim.
5 – HomeController içerisindeki Index Action içerisinde herhangi bir yere sağ tıklayarak Add View diyoruz.
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.
7 – Shared klasörü içerisine oluşturduğumuz _Layout’u seçiyoruz.
8 – Gördüğünüz gibi _Layout seçili durumda.
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.
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.
_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.
View name kısmına _ViewStart yazıp, Shared altındaki _Layout’u seçiyoruz.
_ViewStart.cshtml sayfamızın içeriğini bu şekilde yazıyoruz.
Ö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.
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.
Index Action’ı için View ekliyoruz.
Use a layout page seçili olacak ama her hangi bir _Layout tanımlamıyoruz. Ve Add diyoruz.
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.
<ul class=”nav navbar-nav”> içerisine menu elemanlarımızı yazabiliriz. Örnek olması için Anasayfa, Hakkımda ve İletişim linklerini ekledim.
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 sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
