Mvc 4.0 Yazı Dizisi – Bölüm 6 – Asp.Net MVC Masterpage Kullanımı

Tek yaz çok kullan mantığını benimseyen ve bunu bize OOP kavramı ile aşılayan Microsoft firmasının ASP.NET içinde barındırdığı MasterPage yapısı şüphesiz birçok projemizde bizlere çok yardımcı olmuştur.

Elbette bizlere aynı kodu yeniden yazma zahmetinden kurtaran bu can simidinden ASP.NET MVCprojelerinde de yararlanmaya devam edeceğiz. Ancak madem teknoloji değişti diyen Microsoft Firması MasterPage yapısını ve kullanımını da biraz değiştirmiş.

Öncelikle ASP.NET MVC projelerimizin görünüm yüzlerinin bulunduğu klasörümüzün View klasörü olduğunu yeniden hatırlayalım. Bu durumda MasterPage de bir görünüm yüzü olduğuna göre demek ki eklenecek klasör View klasörü olacaktır.

Projemize bir MasterPage ekleyebilmek için View Klasörüne sağ tuşla tıklayarak açılan menüden Add menüsününe ait alt menüden New Item seçeneğini seçtiğimizde karşımıza View Klasörümüze ekleyebileceğimiz dosya tiplerini barındıran Add New Item penceresi gelecektir.

mvc4bolum6_1

Bu pencere içeriğinde MasterPage ismini barındıran MVC 4 View Master Page (ASPX) adında bir dosya tipi bulunmaktadır. İşte seni buldum diyerek eklemeyi düşünüyorsanız yanılıyorsunuz çünkü bu dosya tipi bizim MVC projelerimizde kullanacağımız dosya tipi değildir.

Nasıl değildir işte adı üstünde MasterPage yazıyor ya dediğinizi duyar gibiyim. Hemen açıklamaya geçelim.

  • Bizler ASP.NET MVC projelerimizde hangi teknolojiyi kullanıyorduk?

Elbette Razor.

  • Peki Razor teknolojisini kullandığımız projelerimizdeki görünüm dosyalarının uzantıları neydi?

ASPX yerine yeni teknolojiyi barındıran CSHTML

Bu durumda açılan penceredeki MasterPage dosyası parantez içine yazılmış olan ASPX açıklamasına göre eski teknolojiyi barındırmakta. Nostalji yapmayı düşünmediğimizden dolayı da şu anlık bizim işimize yaramamakta.

Peki işimize yarayan dosya tipi hangisidir?

Microsoft Firması ASP.NET MVC teknolojisine getirdiği Razor yapısı ile kullanılan MasterPage dosyasına ait yapıyı da değiştirdiğini yukarıda belirtmiştim. Yapı değişti kullanım değişti e tabi ismi de değişti ve ASP.NET projelerimizde Razor teknolojisi bünyesinde kullanılan MasterPage lerin yeni ismi Layout oldu.

Not: Layout tipindeki dosyalarımızın içeriği standart View dosyalarına ve bir sonraki makale konumuz olan Partial View dosyalarına benzediğinden dolayı isimlendirme işleminde standartlar gereği alt çizgi ile başlaması projenin farklı yazılımcılar tarafından kolay anlaşılabilmesini sağlamaktadır.

Add New Item penceresinden MVC 4 Layout Page (Razor) dosya tipini seçtikten sonra Add butonuna basarak View klasörümüze Layout dosyasını eklediğimizde karşımıza Layout dosyasına ait içerik gelmektedir.

mvc4bolum6_2

Bu içerikte yeni karşılaştığımız RenderBody() komutu dikkatimizi çekmektedir. Peki ne işe yarar bu RenderBody() komutu?

RenderBody() komutu eski tip MasterPage yapısında bulunan ContentPlaceHolder kontrolünün Razor teknolojisi bünyesinde ki kullanımıdır. Yani MasterPage sayfamızı referans olarak alan View sayfalarına ait içeriğin gösterim anında basılacağı yerdir.

Şimdi projemize HomeController adında bir Controller ekledikten sonra Controller’imize ait Index adlı ActionResult tipindeki metodumuzun üzerinde sağ click yaparak açılan Add View seçeneğini seçelim.

mvc4bolum6_3

Add View seçeneğini seçtiğimizde karşımıza Controllerimize ait View eklememizi sağlayan Add View penceresi gelecektir.

mvc4bolum6_4

Bu pencere üzerinde bulunan “Use a layout or master page:” e ait checkboxı işaretleyerek View’ımızın bir MasterPage’i referans aldığını belirtiyoruz. Ardından aç butonuna (üçnokta) tıklayarak View’ımızın referans alacağı Layout sayfamızı seçiyoruz.

mvc4bolum6_5

Layout sayfamızı seçtikten sonra OK butonuna tıklayarak yeniden karşımıza gelen Add View penceresinden Add butonuna tıkladığımızda artık layout sayfasından referans almış olan View sayfamız oluşturulmuş oluyor.

mvc4bolum6_6

Artık View sayfamıza ait tasarım layout sayfamızdaki tasarımın RenderBody() metodunun bulunduğu yere eklenecek ve iki sayfanın tasarımı aynı anda görüntülenecektir.

Hemen test edebilmek için layout sayfamıza ait kodlarımızı

mvc4bolum6_7

şeklinde değiştirdikten sonra View’imize ait kodlarımızı da

mvc4bolum6_8

Şeklinde değiştirerek projemizi çalıştıralım.

Projemizi çalıştırdığımızda karşımıza aşağıdaki ekran görüntüsü gelecektir.

mvc4bolum6_9

Bu makalemizde klasik ASP.NET Web projelerinde kullandığımız MasterPage yapısının ASP.NET MVC mimarisi içindeki karşılığı olan layout sayfa yapısını ve Razor teknolojisi içerisinde nasıl kullanıldığını inceledik.

Bir sonraki makalemizde ASP.NET MVC Framework projelerinde User Control kullanımını inceleyeceğiz.

Bir Cevap Yazın

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