Asp.net MasterPage Nedir-Resimli örnek anlatım

Asp.net MasterPage Nedir-Resimli örnek anlatım

Merhaba arkadaşlar ; ASP.NET üzerinde MasterPage nedir bundan bahsedelim ;

MasterPage sitemizin içerisinde bütün sayfalarda aynı olan değişmeyen kısımlardır. Bunlara nereler ? Mesele üst menü kısmı. Alt Footer kısmı. Bunlar sitemizin sayfalarında dolaşırken sürekli olarak değişmezler sabit olarak kalırlar. Çünkü MasterPage olarak oluşturulmuştur bu menüler.

Şimdi benim sitemde yukarıdaki başlıklardan Windows 8 veya Windows Phone 8 başlığına tıkladığınızda ne oluyor?. O sayfanın içeriği orta kısımda geliyor. Fakat sağ taraftaki kategoriler ve  Üst Menüler , banner hiçbiri kaybolmadı. Çünkü bunlar bir MasterPage içerisinde tanımlanmış ve çağırılan sayfalar da bu MasterPage ‘ den türetilmiştir.

Mesela bir web sitesi tasarlıyorsunuz. Üst kısım’a bir Menü koyacaksınız. Menüyü bir MasterPage oluşturup içerisinde tanımlamalısınız.  Çünkü menü bütün sayfalarda aynı olarak kalacak değişmeyecek. Menüyü oluşturduk Menümüze   AnaSayfa , İletişim, Hakkında ekledik varsayalım. Şimdi MasterPage‘mizden türeyen AnaSayfa , İletişim ve Hakkında   – adında 3 adet sayfa oluşturduk. Bu sayfaların içerisine veriler girdik. Projemizi çalıştırdığımızda Üst Menü gözükecek menüden istediğimiz birine tıkladığımızda o sayfanın içerik kısmı ekrana gelecektir.

Bu yaptığımız örneğin aynısını MasterPage’siz olarak yapmak istersek çok kötü bir görüntü ve kod kalabalığı ortaya çıkacaktır. Her sayfaya ayrı Menü oluşturmak zorunda kalacağız.

MasterPage’nin en büyük avantajı , Menü üzerinde herhangi bir başlık değiştiğinde sadece MasterPage içerisinde Menüyü değiştirerek bütün web sayfalarında Menünün değiştirilmesini sağlayabiliriz. MasterPagesiz bu olayı yapmak çok çok zor olacaktır ve zaman kayıbına sebep olacaktır.

Bu  kadar teorik bilgi yeter şimdi Resimli Olarak Anlatıma Devam edelim; 

İlk olarak Projemizi açıyoruz ve içerisine bir adet MasterPage ekliyoruz  ; PROJECT  / ADD NEW ITEM / MASTERPAGE seçeneği ile yeni bir masterPage ekleyebilirsiniz.

Evet MasterPage ‘miz eklendi. Şimdi MasterPagemize bakalım neler varmış içerisinde ?

Gördüğünüz gibi MasterPage mizi oluşturduğumuz anda içerisinde otomatik olarak birşeyler oluşturulmuş durumda. Nedir bunlar bunlardan biraz bahsedelim ;

Öncelikle gözümüze çarpan ilk şey iki Adet ContentPlaceHolder var içerisinde. Nedir bu ContentPlaceHolder?

ContentPlaceHolder : Kısaca bütün web sayfalarında değişebilecek içerik  kısmıdır.

Şimdi örneğimize devam edelim Body içerisindeki ContentPlaceHolder’i kullanacağız biz.

Öncelikle şunu belirteyim. Bizim bütün sayfalarda kalmasını istediğimiz şeyleri ContentPlaceHolder’ın dışına koymalıyız. Şimdi biz bir adet MENÜ ve bir adet Footer oluşturacağız.

Resmin üzerinden yazmaya devam edelim. Resimde Sarı renkli ile çizdiğim yerler gördüğünüz gibi ContentPlaceHolder nesnesinin dışarısında kalan kısım. Yani bütün Web saylarında değişmesini İSTEMEDİĞİM kısım. Menü ve footer alanı. Bunların ikisi de bütün web sayfalarında değişmez kısımlardır.

Şimdi projemize iki adet Web sayfası ekleyelim ve Bu web sayfalarını eklerken MasterPage ‘ den türeterek ekletelim.

Gördüğünüz gibi önce ANASAYFA adında bir WebSayfası ekledik bu web sayfasını eklediğimiz MasterPage den türettik. Bunu nereden anlıyoruz? Yukarıdaki resimde üst kısımda   MasterPageFile=”-/MasterPage.Master” yazıyor. Yani bu web sayfası MasterPage.Master dan türetilmiş demek istiyor.

Bu Web sayfasının içerisinde birde Content Mevcut gördüğümüz gibi peki nedir bu Content alanı ?

CONTENT = MasterPage içerisindeki ContentPlaceHolder‘ ın içerisine veri yazmak için Content nesnesi kullanılır. Yukarıdaki resme bakalım ;

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder” >

Bu satırda biz ne demek istiyoruz ?. Buradaki content ‘in içeriğini MasterPage içerisindeki ContentPlaceHolder1 e eşitliyoruz. Yani  buradaki Content içerisine yazdıklarımız MasterPage  içerisindeki ContentPlaceHolder içerisinde gözükecek.

Şimdi bir WebSayfası daha ekleyelim yukarıda anlattıklarım bu sayfa içinde geçerli olacaktır.

Evet bütün işlemleri sırası ile gerçekleştirdik. Şimdi sıra geldi projemizi çalıştırıp test etmeye. Projemizi hemen çalıştırıp çıktısına bir göz atalım ;

Gördüğümüz gibi ilk olarak yeni sayfa kısmı ekrana geldi. Şimdi Ana Sayfa ‘ ya tıklıyoruz ;

Gördüğümüz gibi Ana Sayfa Linkline tıkladığımızda da Menü kısmı ve Alt taraftaki Burası sayfanın alt kısmı yazan yer kaybolmadı. Çünkü biz Menüyü ve alt Kısmı MasterPage içerisinde ekledik.

 

Evet arkadaşlar bütün işlem bu kadar basit.Bir sonraki makalemde görüşmek üzere.