ASP.Net Master Page Oluşturma ve Kullanma
ASP.Net meraklısı web yazılımcılara yeniden selam :)
Yeni bir ASP.Net makalesinde yine birlikteyiz ve bugün ASP.Net Master Page (kapsayan sayfa) kavramını öğreneceğiz.Aslına bakarsanız bu konuda pek C# kodları yazmayacağız çünkü master-nested (kapsanan sayfa) page konusu genellikle web tasarım konusuyla ilgili..
Öncelikle master page neymiş ne değilmiş biraz sohbetini yapalım :)
Master Page, sadece ASP.Net konusunun dışında PHP web yazılım dilinde de sıklıkla ama farklı isimlerle anılan bir kavramdır.Genellikle web sayfalarına baktığımızda hangi sayfaya gidersek gidelim bazı kısımların hiç değişmediğini ama belli bir bölgenin değiştiğini görürürüz.İşte bir web sitesinin her sayfasında değişmeyen kısma master,sürekli içeriğinin değiştiği sayfalara ise nested page denir.
Master page kullanımının en büyük avantajı ise içeriği her değişen sayfa için sabit kalacak kısımları yeniden yazmak yerine başlangıçta bir defalığına sabit kısmı yazarız ve içeriği değişecek alanı sabit kısım içerisine gömeriz.
Genel olarak HTML web sayfalarında zorunlu olmamakla birlikte kullanılan şablon şu şekildedir:
Görsele baktığımızda master page olarak bahsettiğimiz alan Header (üst),Menu ve Footer (alt) olarak isimlendirilen bölgelerin tamamıdır.Master page içerisinde yer alan ve web sayfasının çalışma anında master page'in de gösterildiği nested page "Content" (içerik) olarak yer alır.
Demek oluyor ki; nested page, master page'in alt kümesidir :)
Örnek bir master-nested page konusunu gösteren görsel ise şu şekilde:
Buradaki "sub page" (alt sayfa) olarak isimlendirilen bölgeyi nested page olarak düşünebilirsiniz,sadece isim farkı söz konusu yani..
Buraya kadar ASP.Net olsun olmasın web sayfalarında genel şablon olmuş olan master-nested page yapısını öğrendik,şimdi ise bir ASP.Net projesinde master page nasıl kullanılır öğreneceğiz.
Makalemin başında da belirttiğim gibi bu konu web yazılımdan ziyade web tasarım konusuna dahil olduğu için bir ASP.Net projesinde yazılımcı olarak görev alıyorsanız bu konuda web tasarımcı iş arkadaşınızla birlikte çalışmanız gerekiyor.
Örneğin elimizde şu şekilde bir web sayfası olsun:
Visual Studio'yu açıyoruz ve boş bir ASP.Net projesi oluşturduktan sonra aşağıdaki gibi projemize bir Master Page
ekliyoruz:
Konumuzun en can alıcı noktasına geldik,düz HTML sayfamızın Body tagı içerisinde yer alan ve content (içerik) dışında
yer alan tüm kodları Master Page sayfasının Body tagı içerisine yapıştırıyoruz.
Dikkat ederseniz sayfamızın içerisinde ContentPlaceHolder (içerik yer tutucu) isimli bir tag yer alıyor,bu tag oraya
Nested Page konumunun oturacağını ifade ediyor ve o tagları şimdilik silmiyoruz.
Bu işlemi yaptıktan sonra HTML sayfamızın Head tagı içerisinde yer alan varsa javascript ve CSS dosyalarını da projemizde oluşturacağımız klasörlere kopyalıyor ve normal HTML sayfasındaki gibi Head tagı içerisine linklerini tanımlıyoruz:
Buraya kadar yaptığımız işlemden sonra projemizi henüz çalıştıramıyoruz çünkü Master Page başlı başına bir web sayfası
değil,web sayfalarına referans olarak belirtilen arka plan sayfasıdır.Dolayısıyla bir ASP.Net projesinde Master Page
içerisinde Nested Page sayfalar yoksa o proje çalıştırılamaz çünkü çalıştırılacak bir web sayfası yok.
Sıra geldik Nested Page ekleme olayına; projemizin Solution Explorer ekranına aşağıdaki gibi nested page ekliyoruz:
Nested page eklerken dikkat etmemiz gereken konu hangi master page'i kullanmamız gerektiğidir,bazı web projelerinde
birden çok master page kullanımı söz konusu olduğunda yanlış master page'e atanan nested page sayfalar tasarım hatalarına sebep olmaktadır o yüzden dikkatli olmamızda fayda var.
Karşımızda boş bir nested page yapısı var ve şimdi projemizi çalıştırabiliriz:
Web browser'da (tarayıcı) şu anda yalnızca master page yapısını görebiliyoruz, aslında gördüğümüz sadece master page değil nested page ile master page yapılarının birleşimidir.Content alanının boş olmasının sebebi ise düz HTML sayfamızdaki content kodlarını henüz Nested page alanına eklemediğimiz içindir.O halde HTML sayfamızda yer alan content kodlarını nested page içerisine kopyalayalım:
Bu kopyalama esnasında ContentPlaceHolder taglarını silmiyoruz çünkü hatırlarsanız bu taglar master page içerisinde de vardı ve az önce silmeyin diye uyarmıştım.
Peki nedir bu taglar?
ContentPlaceHolder tagları master-nested sayfaların birleştiği kilit noktayı ifade eder.Bir başka deyişle nested page içerisinde ContentPlaceHolder tagları arasında yazılmış olan HTML kodları aslında master page içerisindeki ContentPlaceHolder tagları arasına yazılmış gibi hayal edebilirsiniz.Anlaması ilk başta biraz zor olabilir ancak zamanla bol pratik uygularsanız kolayca anlayabileceğiniz bir konudur :)
Master page sayfamıza yeniden geri dönüyor ve ContentPlaceHolder taglarını düz HTML sayfasındaki content konumu arasına gelen yere konumlandırıyoruz,konumlandırdığımız yerde çok dikkatli olmalıyız eğer yanlış yerde yer alırsa web sayfamızda tasarım faciasına sebep olabiliriz :)
Buraya kadar herşeyi doğru yaptığımıza göre sayfamızı çalıştırabiliriz:
Sayfamıza baktığımızda sanki arada master-nested page ilişkisi yokmuş gibi yer alıyor ancak biz burada hem master hem de nested page yapısını bir arada görüyoruz.Bu noktadan itibaren master page içerisinde istediğiniz kadar nested page oluşturarak dinamik sayfalar oluşturabilirsiniz.
Bir başka bilmemiz gereken ise ContentPlaceHolder taglarını çoğaltarak bir master page içerisinde farklı alanlarda çok çeşitli nested page ekleme şansımız yer alıyor.Bunun getirdiği avantaj ise master page içerisine eklencek tasarımlar tek bir alana sığamıyor ya da esnekliği sağlayamadığı durumlarda oldukça kullanışlı bir avantaj sağlıyor.
Tabi şu anda başlangıç seviyesinde bir ASP.Net web yazılım uzmanı olduğunuzu düşünürsek ileride kendiniz keşfedebileceğiniz eğlenceli bir konu olduğunu göreceksiniz :)
Son olarak bir konudan daha bahsetmek istiyorum,Master Page standart bir ASP.Net sayfası yapısında olduğu için tıpkı ASP.Net Web Form'da daha önce gördüğümüze Page_Load isimli kendine has bir metodu vardır.
Master Page'in web form Form_Load metodundan farkı ise bir master page sayfasındaki Page_Load metoduna yazılan kodlar o master page'i kullanan nested page'ler tarafından da çalıştırılır.
Öncelik sırası ise önce .Net Framework mimarisi gereği önce Master Page içerisindeki Page_Load metodu, ardından nested page içerisindeki Page_Load metodu çalıştırılır.
Bu konuyla ilgili ilerleyen makalelerimizde yeni ve gerçek hayata uygun projeler tasarlarken yeniden değineceğimiz için çok fazla kafanıza takmayın ama yinede küçük bir ipucu olarak aklınızın bir köşesinde bulunsun istiyorum :)
Bir ASP.Net makalesinin daha sonuna gelmiş bulunuyoruz,bir sonraki makalemizde görüşmek üzere hoşçakalın :)
Projeyi İndir
Yeni bir ASP.Net makalesinde yine birlikteyiz ve bugün ASP.Net Master Page (kapsayan sayfa) kavramını öğreneceğiz.Aslına bakarsanız bu konuda pek C# kodları yazmayacağız çünkü master-nested (kapsanan sayfa) page konusu genellikle web tasarım konusuyla ilgili..
Öncelikle master page neymiş ne değilmiş biraz sohbetini yapalım :)
Master Page, sadece ASP.Net konusunun dışında PHP web yazılım dilinde de sıklıkla ama farklı isimlerle anılan bir kavramdır.Genellikle web sayfalarına baktığımızda hangi sayfaya gidersek gidelim bazı kısımların hiç değişmediğini ama belli bir bölgenin değiştiğini görürürüz.İşte bir web sitesinin her sayfasında değişmeyen kısma master,sürekli içeriğinin değiştiği sayfalara ise nested page denir.
Master page kullanımının en büyük avantajı ise içeriği her değişen sayfa için sabit kalacak kısımları yeniden yazmak yerine başlangıçta bir defalığına sabit kısmı yazarız ve içeriği değişecek alanı sabit kısım içerisine gömeriz.
Genel olarak HTML web sayfalarında zorunlu olmamakla birlikte kullanılan şablon şu şekildedir:
Görsele baktığımızda master page olarak bahsettiğimiz alan Header (üst),Menu ve Footer (alt) olarak isimlendirilen bölgelerin tamamıdır.Master page içerisinde yer alan ve web sayfasının çalışma anında master page'in de gösterildiği nested page "Content" (içerik) olarak yer alır.
Demek oluyor ki; nested page, master page'in alt kümesidir :)
Örnek bir master-nested page konusunu gösteren görsel ise şu şekilde:
Buradaki "sub page" (alt sayfa) olarak isimlendirilen bölgeyi nested page olarak düşünebilirsiniz,sadece isim farkı söz konusu yani..
Buraya kadar ASP.Net olsun olmasın web sayfalarında genel şablon olmuş olan master-nested page yapısını öğrendik,şimdi ise bir ASP.Net projesinde master page nasıl kullanılır öğreneceğiz.
Makalemin başında da belirttiğim gibi bu konu web yazılımdan ziyade web tasarım konusuna dahil olduğu için bir ASP.Net projesinde yazılımcı olarak görev alıyorsanız bu konuda web tasarımcı iş arkadaşınızla birlikte çalışmanız gerekiyor.
Örneğin elimizde şu şekilde bir web sayfası olsun:
Visual Studio'yu açıyoruz ve boş bir ASP.Net projesi oluşturduktan sonra aşağıdaki gibi projemize bir Master Page
ekliyoruz:
Konumuzun en can alıcı noktasına geldik,düz HTML sayfamızın Body tagı içerisinde yer alan ve content (içerik) dışında
yer alan tüm kodları Master Page sayfasının Body tagı içerisine yapıştırıyoruz.
Dikkat ederseniz sayfamızın içerisinde ContentPlaceHolder (içerik yer tutucu) isimli bir tag yer alıyor,bu tag oraya
Nested Page konumunun oturacağını ifade ediyor ve o tagları şimdilik silmiyoruz.
Bu işlemi yaptıktan sonra HTML sayfamızın Head tagı içerisinde yer alan varsa javascript ve CSS dosyalarını da projemizde oluşturacağımız klasörlere kopyalıyor ve normal HTML sayfasındaki gibi Head tagı içerisine linklerini tanımlıyoruz:
Buraya kadar yaptığımız işlemden sonra projemizi henüz çalıştıramıyoruz çünkü Master Page başlı başına bir web sayfası
değil,web sayfalarına referans olarak belirtilen arka plan sayfasıdır.Dolayısıyla bir ASP.Net projesinde Master Page
içerisinde Nested Page sayfalar yoksa o proje çalıştırılamaz çünkü çalıştırılacak bir web sayfası yok.
Sıra geldik Nested Page ekleme olayına; projemizin Solution Explorer ekranına aşağıdaki gibi nested page ekliyoruz:
Nested page eklerken dikkat etmemiz gereken konu hangi master page'i kullanmamız gerektiğidir,bazı web projelerinde
birden çok master page kullanımı söz konusu olduğunda yanlış master page'e atanan nested page sayfalar tasarım hatalarına sebep olmaktadır o yüzden dikkatli olmamızda fayda var.
Karşımızda boş bir nested page yapısı var ve şimdi projemizi çalıştırabiliriz:
Web browser'da (tarayıcı) şu anda yalnızca master page yapısını görebiliyoruz, aslında gördüğümüz sadece master page değil nested page ile master page yapılarının birleşimidir.Content alanının boş olmasının sebebi ise düz HTML sayfamızdaki content kodlarını henüz Nested page alanına eklemediğimiz içindir.O halde HTML sayfamızda yer alan content kodlarını nested page içerisine kopyalayalım:
Bu kopyalama esnasında ContentPlaceHolder taglarını silmiyoruz çünkü hatırlarsanız bu taglar master page içerisinde de vardı ve az önce silmeyin diye uyarmıştım.
Peki nedir bu taglar?
ContentPlaceHolder tagları master-nested sayfaların birleştiği kilit noktayı ifade eder.Bir başka deyişle nested page içerisinde ContentPlaceHolder tagları arasında yazılmış olan HTML kodları aslında master page içerisindeki ContentPlaceHolder tagları arasına yazılmış gibi hayal edebilirsiniz.Anlaması ilk başta biraz zor olabilir ancak zamanla bol pratik uygularsanız kolayca anlayabileceğiniz bir konudur :)
Master page sayfamıza yeniden geri dönüyor ve ContentPlaceHolder taglarını düz HTML sayfasındaki content konumu arasına gelen yere konumlandırıyoruz,konumlandırdığımız yerde çok dikkatli olmalıyız eğer yanlış yerde yer alırsa web sayfamızda tasarım faciasına sebep olabiliriz :)
Buraya kadar herşeyi doğru yaptığımıza göre sayfamızı çalıştırabiliriz:
Sayfamıza baktığımızda sanki arada master-nested page ilişkisi yokmuş gibi yer alıyor ancak biz burada hem master hem de nested page yapısını bir arada görüyoruz.Bu noktadan itibaren master page içerisinde istediğiniz kadar nested page oluşturarak dinamik sayfalar oluşturabilirsiniz.
Bir başka bilmemiz gereken ise ContentPlaceHolder taglarını çoğaltarak bir master page içerisinde farklı alanlarda çok çeşitli nested page ekleme şansımız yer alıyor.Bunun getirdiği avantaj ise master page içerisine eklencek tasarımlar tek bir alana sığamıyor ya da esnekliği sağlayamadığı durumlarda oldukça kullanışlı bir avantaj sağlıyor.
Tabi şu anda başlangıç seviyesinde bir ASP.Net web yazılım uzmanı olduğunuzu düşünürsek ileride kendiniz keşfedebileceğiniz eğlenceli bir konu olduğunu göreceksiniz :)
Son olarak bir konudan daha bahsetmek istiyorum,Master Page standart bir ASP.Net sayfası yapısında olduğu için tıpkı ASP.Net Web Form'da daha önce gördüğümüze Page_Load isimli kendine has bir metodu vardır.
Master Page'in web form Form_Load metodundan farkı ise bir master page sayfasındaki Page_Load metoduna yazılan kodlar o master page'i kullanan nested page'ler tarafından da çalıştırılır.
Öncelik sırası ise önce .Net Framework mimarisi gereği önce Master Page içerisindeki Page_Load metodu, ardından nested page içerisindeki Page_Load metodu çalıştırılır.
Bu konuyla ilgili ilerleyen makalelerimizde yeni ve gerçek hayata uygun projeler tasarlarken yeniden değineceğimiz için çok fazla kafanıza takmayın ama yinede küçük bir ipucu olarak aklınızın bir köşesinde bulunsun istiyorum :)
Bir ASP.Net makalesinin daha sonuna gelmiş bulunuyoruz,bir sonraki makalemizde görüşmek üzere hoşçakalın :)
Projeyi İndir
Teşekkürler dostum harika bir anlatım olmuş.