Asp.NET: MasterPage Yapısı

MasterPage yapısını kullanarak tasarımlarımızı diğer sayfalara hızlıca aktarabilmeyi öğrenelim.

MasterPage yapısını kullanarak tasarımlarımızı diğer sayfalara hızlıca aktarabilmeyi öğrenelim.

MasterPage yapısını kullanarak tasarımlarımızı diğer sayfalara hızlıca entegre edebiliriz.

MasterPage'e ne zaman, neden ihtiyaç duyulur?

Bir web sitesi yapıyoruz, bu web sitesinde neler olacak? Sayfamızın bannerinin bulunduğu üst kısım (Header), sayfamızın sağ ve sol kolonları olan sidebarlar ve websitemizin içeriğinin olacağı gövde kısmı ve sitenin alt kısmı olan footer. Websitelerinin çoğuna baktığınızda gövde kısmı hariç tüm alanlar statiktir. Hiçbir zaman değişmez.

Örneğin: Iletisim.aspx sayfasına baktığımızda ve Hakkinda.aspx sayfasına baktığımızda çoğu zaman sadece gövde kısmındaki yazının farklı olduğunu görürüz. Programcı Iletisim.aspx ve Hakkinda.aspx sayfasına tüm yukarıda saydığım alanları tek tek kodlamasın diye MasterPage yapısı geliştirilmiştir.

Kullanımı

MasterPage yapısı ile dinamik olan gövde kısmı hariç diğer tüm alanları MasterPage sayfası üzerinde tasarlarız. Daha sonra oluşturacağımız Iletisim.aspx ya da Hakkinda.aspx sayfasını MasterPage yapısından türetiriz. Örnek olarak bir MasterPage yapısı oluşturalım.

Oluşturduğumuz projeye sağ tuş ile tıklayıp Add New Item diyelim.
Çıkan Pencereden Master Page elemanını seçelim.

Karşımıza çıkan pencerenin kaynak kodunu açalım,


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="MP.Main" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

 

        </asp:ContentPlaceHolder>

    </div>

    </form>

</body>

</html>



Burada dikkatinizi ContentPlaceHolder yapısına çekmenizi istiyorum. Dinamik olacak kısım buraya gelecektir.

ContenPlaceHolder ne işe yarar?

Yukarıda sayfalarda bazı bölümlerin statik, bazı bölümlerin de dinamik olduğunu söylemiştik. ContentPlaceHolder'ı biz dinamik olan yapılar için kullanacağız. Çünkü MasterPage'den türeyen bir eleman sadece ContentPlaceHolder yapısı içerisini kullanabilir. Bunun haricindeki yerlere ulaşamaz. Onun için Master.Page sayfasını tasarladıktan sonra Master sayfanıza istediğiniz kadar ContentPlaceHolder ekleyebilirsiniz ToolBox'dan. MasterPage'den türeyen elemanlar sayfada sadece ContentPlaceHolder'ın tanımlandığı alanları kullanabileceklerdir.

Ama ondan önce sayfamızı basitçe bir tasarlayalım.

Form kodunun hemen üstüne alttaki kodu yazalım;


<img src="http://www.siteniz.com/images/resim.png" alt="" />



Şimdi sayfayı kaydettikten sonra yine Add New Item sayfasından Web Form using Master Page öğesini seçelim, ismini de Iletisim.aspx koyalım Ok dedikten sonra, karşımıza gelecek olan pencere bize hangi MasterPage den sayfanın türetileceği soruyor, Main.Master'i seçtikten sonra yeni sayfamız oluştu. Design'a sayfasından oluşturduğumuz sayfaya baktığımızda az önceki img kodu ile eklediğimiz logonun burada yer aldığını görüyoruz. Mouse ile üstüne geldiğimizde düzenleme yapılamayacağını görüyoruz.

Bu demek oluyor ki: MasterPage'den türetilen hiçbir sayfadan MasterPage düzenlenemez. MasterPage sayfasından yapılan tüm değişiklikler, kendisinden türeyen elemanların hepsine yansır. Main.Master sayfasında yapacağımız bir değişiklik Iletisim.aspx sayfasına yansayacaktır. MasterPage yapıları gene birbirinden türeyebilir. Türeyen eleman normal bir sayfaymış gibi hareket eder, kullanım alanı ContentPlaceHolder ile sınırlıdır.
  • Etiketler;
Fetih47 Fetih47
Sanalkurs.net
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

bu kodu <img src="http://www.siteniz.com/images/resim.png" alt="" /> <form id="form1" runat="server"> bu kodun üstünemi yazıcaz bu kodda div lerin arasına getirilince dinamik kısımmı oluşuyor ? ve en üstteki kodu yazma amacımız nedir ? Bilgi için teşekkürler ...
Hayır [b]<img src="http://www.siteniz.com/images/resim.png" alt="" />[/b] bu kod da form un içinde olmalıdır;Ama ContentPlaceHolder'ın dışında olmalıdır.
Projene logo eklemiş oluyorsun diyelim.

Yukarı Git