Makale Özeti

ASP.NET 2.0daki yeniliklerden biri olan Master Sayfalar...

Makale

Visual Studio 2005 (4), ASP

Visual Studio 2005 (4), ASP.Net 2.0 ve Master Sayfalar

Webformlar hazırlarken, her sayfada bulunmasını istediğimiz kontrolleri genelde kullanıcı kontrolleri (usercontrol) haline getirip, her sayfada konumlandırıp kullanıyorduk. Örneğin her sayfanın başında bulunmasını istediğimiz bir logo, her sayfanın sol tarafında görünmesini istediğimiz bir menu, her sayfanın altında bulunmasını istediğimiz bir tanım vs... VStudio 2003 ile bu saydığım şeyleri yapmak için genelde izlediğimiz yol, şablon bir sayfa oluşturmak, şablona uygun sayfa ihtiyacımız olduğunda da sayfayın kendisini ya da sayfanın html kodlarını yeni sayfaya kopyalamaktı.

Tamamen programcılardan ve tasarımcılardan gelen isteklere göre yeniden şekillendirilen VStudio 2005 sayesinde, şablon bir sayfa hazırlamak ve bu şablonları diğer sayfalarda kullanmak artık çok kolay. Bu yazıda şablon (master) sayfaları inceleyeceğiz.

 

Bu yazıyı okuduktan sonra aşağıdaki konularda bilgi sahibi olacaksınız:

  1. Şablon (master) sayfalar oluşturmak ve kullanmak
  2. Şablonu kullananan web formları oluşturmak

 

İşe bir web sitesi oluşturmakla başlıyoruz:

1.      VStudio’yu açın ve File – New – Web Site ile yeni bir web sitesi oluşturun.

2.      Solution Explorer’da projeye sağ tıklayarak Add New Item seçeneğini tıklayın.

3.      Aşağıdaki resimde gördüğünüz gibi, şablonlar penceresinden Master Page seçeneğini seçin. Ayrıca Place code in seperate file kutusunun da seçili olmasına dikkat edin. Bu seçeneği aktif bırakarak sayfa ve sayfaya ait kodların ayrı dosyalarda bulunmasını sağlamış oluyoruz. Bu şu anlama da geliyor, artık VStudio ile code-behind olmayan web formlar da oluşturulabiliyor. Programlama dili olarak istediğiniz bir dili seçebilirsiniz. Seçtiğiniz dilin projeyi oluştururken seçtiğiniz dil ile aynı olması gerekmez.

 

 

4.      Eklediğiniz master sayfa, html görünümünde karşınıza gelmiş olmalı. Tasarım (design) görünümüne geçerseniz sayfanın üzerinde ContentPlaceHolder adındaki kontrolü göreceksiniz. Sayfamızın bir şablon sayfa olduğunu söylemiştik. ContentPlaceHolder ismi verilen kontroller ise, şablona dayalı oluşturduğumuz sayfalarda, her sayfada farklılık gösterecek kısımları belirlememizi sağlayan kontrollerdir. Master sayfamızı biraz geliştirelim...

5.      Sayfaya bir başlık, bir alt bilgi, bir de menu için alanlar ekleyelim. Bunu yapmanın en kolay yolu, tasarım görünümündeyken Layout menüsünden Insert Table ile sayfaya yeni bir tablo eklemek.  Ancak önce ContentPlaceHolder1 adındaki kontrolü seçip silin ki, sayfa karmaşıklıktan kurtulsun. Aşağıdaki ayarları kullanarak sayfaya bir tablo ekliyoruz:

 

 

6.      Tablonun ilk satırının yüksekliğini (Height), 50px, en alt satırın yüksekliğini 40px, ikini satırın ilk hücresinin genişliğini 150px olarak değiştirin. Ayrıca ikinci satırın iki hücresinin de VAlign özelliğini Top olarak belirleyin.

7.      Tablonun 2. satırında bulunan sağdaki hücrenin içine bir ContentPlaceHolder kontrolü yerleştireceğiz. Sayfanın html görünümüne geçerek, aşağıda kalın yazıtipi ile işaretlediğim kodları <td> tagları içine yerleştirin:

 

</td>

<td><asp:ContentPlaceHolder ID=cphIcerik Runat="Server"></asp:ContentPlaceHolder>

</td>

 

Bu işlemden sonra sayfanın tasarım görünümü aşağıdaki şekilde olmalı:

 

 

Şablon sayfasını hazırlamış olduk. Bu sayfada, cphIcerik adındaki kontrolün haricindeki her yer sabit kalacak. Şablondan ürettiğimiz sayfalar ise cphIcerik kontrolünün bulunduğu yere kendi içeriklerini yerleştirecekler.

Şablon sayfasını geliştirelim...

 

8.      Sol hücreye bir menü bileşeni ekledim. Üst başlık alanına üç gezinti tuşu ve alt boşluğa da kısa bir açıklama ekledim. Sayfanın son hali aşağıda.

 

 

Master sayfanın içeriğini tamamladığımıza göre, şimdi bu şablona bağlı içerik sayfalarını hazırlayabiliriz. Solution Explorer penceresinde master sayfaya sağ tıklayıp Add Content Page öğesini seçerek bunu yapabilirsiniz, ancak bu şekilde eklediğiniz içerik sayfası VStudio tarafından isimlendirilir. Daha güzel bir yol, Solution Explorer’da projeye sağ tıklayıp Add New Item’ı, ve şablonlar pencersinden de Web Form’u seçmek olabilir. Şekildeki ayarlarla yeni bir web formunu projeye ekleyin:

 

 

Yeni formu eklerken Select Master Page seçeneğinin aktif olması gerekiyor. Bu şekilde yeni eklediğimiz formu master sayfaya bağlayabileceğiz. Bir sonraki pencerede de işlemi tamamlıyoruz.

 

 

Select a Master Page penceresinden de şablon sayfayı seçiyor ve bağlama işlemini tamamlamış oluyoruz. Yeni eklenen sayfanın yerleşiminin (layout) tamamen şablon sayfa ile aynı olduğuna dikkat edin. Yeni sayfanın üzerindeki ContentPlaceHolder kontrolüne sağ tıklayıp, Create Custom Content seçeneği ile sayfaya özel içerik oluşturabiliriz. İçerik için resimde de gördüğünüz gibi çok uğraşmadım. Sadece ContentPlaceHolder kontrolünün içine düz metin ekledim. Bunu da yaptıktan sonra başlangıç sayfası olarak içerik sayfasını belirleyip projeyi başlatabilirsiniz...

 

 

Projeyi başlattığınızda, yukarıdakine benzer bir görüntü ile karşılaşacaksınız. Kırmızı ile belirlediğim alan, Urunler.aspx sayfasında, şablondan farklı olarak benim eklemiş olduğum içeriği göstermekte. Sayfa üzerinde geri kalan her alan MasterPage.master sayfasından gelen şablon...

 

Master sayfalarla çalışmaya devam edeceğiz.

 

Önsel Akın

onsela@yazgelistir.com