6.Ders: ASP.NET’te Master Page Kullanımı

ASP.NET Dersleri serisinin 6.kısmında ASP.NET ile site yaparken oldukça işimize yarayan Master Page konusuna değineceğiz. Visual Studio’yu kullanarak, Master Page destekli basit bir ASP.NET sitesi oluşturacağız. Öncelikle Master Page kavramıyla ilgili temel bilgileri edinelim.

Master Page Nedir? Ne İşe Yarar?

Genellikle web sitelerinde linklere tıkladıkça gelen sayfalarda bazı içerikler sabit olup, bazıları ise tıklanan linke göre değişmektedir. Örnek vermek gerekirse; bir web sitesinde banner veya sağ tarafta bulunan bir panel hep sabittir. Yani anasayfada da, iletişim sayfasında da veya herhangi bir başka sayfada da bu kısımlar değişmez. Değişen kısım ise muhtemelen ilgili sayfaya ait bilgilerin olduğu içerik kısmıdır. Aşağıdaki resme bakarak olayı daha iyi anlayabiliriz:

Bu örnek siteye göre, ortadaki beyaz alanda her sayfaya göre farklı bir içerik gösteriliyor. Fakat beyaz alan dışındaki banner, sağ panel ve footer kısımları her sayfada aynı şekilde gösteriliyor. İşte Master Page kullanmanın önemi de burada başlıyor. Master Page kullanarak, değişen içerik kısmı dışında yer alan bölümlerin kodlarını her sayfada ayrı ayrı tekrar yazmak yerine Master Page kullanarak bir defa yazabiliriz. Daha da önemlisi; diyelim ki yukarıdaki sitenin sağ kısmında bulunan panele yeni bişeyler eklemek istedik. Bu durumda her sayfayı açıp gerekli kodu bütün sayfalara yazmamız gerekecekti. Halbuki eğer Master Page kullansaydık, değişikliği sadece tek bir yerde yaparak bunun bütün siteye yansımasını sağlayabilirdik.

Master Page Kullanarak Bir Site Oluşturmak

Şimdi Visual Studio’yu kullanarak, basit bir web sitesi oluşturacağız. Bu siteyi oluştururken Master Page kullanımını da öğrenmiş olacaksınız. Aşağıdaki adımları uygulayın:

  1. Visual Studio’yu açın.
  2. File menüsünden New Web Site komutunu vererek boş bir site oluşturun. Ben MasterPage adında VB destekli bir site oluşturdum.
  3. Site klasöründe web.config dışında dosya varsa bunları silin.
  4. Website menüsünden Add New Item komutu vererek yeni bir Master Page oluşturacağız. Bu pencerede Master Page seçeneğini seçin. Dosya adı MasterPage.master olarak kalabilir. Aşağıdaki kutucuklardan ‘Select Master Page’ seçeneğinin önündeki işareti eğer varsa kaldırın. ‘Place Code In Seperate File’ seçili kalabilir.
  5. Varsayılan kodlarıyla beraber bir master sayfası oluşturulacaktır. Bu kodlarda iki şey dikkatimizi çekiyor: Birincisi sayfa direktifi Page değil Master olarak başlıyor. İkincisi ise ContentPlaceHolder adındaki ASP.NET kontrolleri sayfaya eklenmiş.

Buradaki ContentPlaceHolder kontrolü bizim içerik sayfalarımızın yer alacağı kısım. Yani ContentPlaceHolder dışında kalan yerler tüm sayfalarda ortak olacak. ContentPlaceHolder yazan yerlere ise ilgili sayfanın içeriği gelecek. Master sayfamızda bunlardan otomatik olarak iki tane oluşturulur. Birisi head etiketleri arasında birisi ise body etiketleri arasında. Biz istediğimiz yere istediğimiz kadar ekleyebiliriz. Fakat head etiketleri arasındaki ContentPlaceHolder kontrolünü bu örnekte kullanmayacağımız için kaldırın. Bizim kullanacağımız kontrol body etiketleri arasındaki ContentPlaceHolder kontrolü. Biz sitede değişmeyecek olan kısımları bu kontrolün etrafına yerleştirmeliyiz. Aşağıdaki kodları MasterPage.master dosyasının body etiketi arasında kalan kısmına yerleştirin:

<form id="form1" runat="server">
<div>
<a href="default.aspx">Anasayfa</a> |
<a href="digersayfa.aspx">Diğer sayfa</a>
<hr/>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
<hr/>
Burası sitenin alt kısmı.
</div>
</form>

Artık master sayfamız hazır. Sıra geldi, master sayfamıza içerik sayfalarını ‘gömme’ye. Devam edelim:

  1. Website menüsünden Add New Item komutu vererek yeni bir içerik sayfası oluşturacağız. Dosyanın adı Default.aspx olarak kalsın. Bu işlemin normal aspx dosyası eklemekten tek farkı Master Page kullanması. Dolayısıyla Add New Item penceresindeki aşağıdaki seçeneklerden ‘Select Master Page’ seçeneğinin önündeki işaretin seçili olması gerekiyor. ‘Place Code In Seperate File’ seçili kalabilir. Add butonuna bastığımızda bizden bu dosyayı hangi Master sayfasının içine yerleştireceğimizi soracaktır. Buradan MasterPage.master sayfasını seçerek devam edelim.
  2. Aşağıdaki kodları da Default.aspx sayfasına ekleyin:
<%@ Page Title="Anasayfa" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h1>Anasayfa</h1>
Anasayfa içeriği burada yer alacak.
</asp:Content>

Burada dikkatimizi çeken şey sayfa direktifinde Title parametresiyle sayfa başlığını ayarlayabiliyoruz. Yine sayfa direktifinde bu dosyanın kullandığı master sayfasını MasterPageFile parametresinde görebiliriz. Onun dışında otomatik olarak oluşturulan Content kontrolünü görüyoruz. İçerik sayfasında bulunan tüm içeriğin bu kontrolün içerisine yazılması gerekiyor. Buraya yazdıklarımız master sayfasındaki ContentPlaceHolder kontrolünün bulunduğu yere dahil edilecek.

  1. Son olarak, aynı şekilde DigerSayfa.aspx dosyasını oluşturun.

Siteye bundan sonra ekleyeceğimiz her yeni dosyayı aynı şekilde ekleyebileceğiz. Bunun yanı sıra, master sayfamızda yapacağımız değişiklikler içerik dosyalarına otomatik olarak yansıtılacaktır.

BENZER YAZILAR