4 Temmuz 2013 Perşembe

Nested Master Page Nedir? Nasıl kullanılır? Ne zaman tercih edilmelidir?

Nested Master Pages

Nested Master Page Nedir? Nasıl kullanılır? Ne zaman tercih edilmelidir? Nested Master Page Kullanımına bir örnek...



        Nested Master Page leri, master page lerin iç içe ya da master-child şeklinde kullanılması şeklinde tanımlamak mümkündür.
       
        Peki gerekli bir şey midir? Evet bazen gerçekten çok gerekli bir şey oluyor. Özellikle, birden çok sayfanın aynı banner'i ve farklı menüleri kullanması söz konusu olduğunda nested master pageleri kullanmak çok büyük bir avantaj sağlıyor. Yazılım geliştirmek söz konusu olduğunda, tabii ki her zaman tek bir yol yoktur. Ama nested master page ler en iyi ve en pratik çözümü bize sağlamakta.

        Peni nasıl kullanacağız? Bunun için bir senaryo geliştirelim:
       
        Senaryomuza göre, web sitemizin sol tarafında sabit kalacak bir menüsü, bir banner kısmı ve bir de footer kısmı olsun. Menüde [Haberler] ve [Oyunlar] maddeleri olsun. Haberler tıklandığında, sayfamızın orta kısmına yüklenecek bir [Haberler Ana Sayfası]'nın üst tarafında, yatay bir menüde [Haberler Alt Menü] maddeleri yer alsın.(Ekonomi, Spor, Güncel, Popüler vs.) Bu yatay menüden seçim yapıldığında ise, sayfamızın orta kısmına o alt menü ile ilgili sayfa yüklensin (Ekonomi seçildiğinde ekonomi.aspx, spor seçildiğinde spor.aspx gibi.). Bütün bu anlattıklarımız aşağıdaki resimde gösterilmiştir.
        
Nested Master Page Örnek 1

Nested Master Page Örnek 2

        Bu örneklerde de görüldüğü gibi bir uygulama geliştirmek için aşağıdaki adımları takip edin. Resimdeki gibi bir tasarımı elde etmek için aşağıda yer alan kodları kopyalyıp yapıştırabilirsiniz.

        main.master
  1. Öncelikle, ekranda görülen BANNER ve sol tarafta yer alan ANA MENÜ kısımlarını ve ortadaki mavi renkteki içerik(content) kısmını içinde barındıran bir "main.master" master page ini hazırlıyoruz.
    <%@ MasterLanguage="C#"AutoEventWireup="true"CodeBehind="main.master.cs"  Inherits="NestedMasterPages_SampleSite.main"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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>Nested Master Page - Sample Site</title>
        <asp:ContentPlaceHolderID="head"runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <center>
            <div style="width:100%; text-align:center">
                <div style="width:1024px; height:auto">
                   <divstyle="width:1024px; height:89px; font-family:Times New Roman; font-size:24pt; font-weight:bold; color:White; background-color:#444;text-align:center">
                            BANNER - Sample Site
                   </div>
                   <div style="width:250px; height:auto; min-height:350px;background-color:WhiteSmoke; color:#444; float:left; text-align:left; border-left:3px solid Silver; padding:8px">
                       Ana Menü Burada
                       <br/>
                       <br/>
                       <a href="haberlerMain.aspx"target="_self">Haberler</a>
                       <br/>
                       <a href="oyunlarMain.aspx"target="_self">Oyunlar</a>
                   </div>
                   <divstyle="width:750px; height:auto; min-height:350px;background-color:LightSkyBlue;color:#444; float:right">
                       
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1"runat="server">
                                İçerik Buraya Yüklenecek...
                            </asp:ContentPlaceHolder>
                   </div>
                       
                </div>
            </div>
        </center>
        </form>
    </body>
    </html>
      haberler.master
  2. Şimdi [Haberler] nested master page ini  hazırlamaya geldi sıra. Bunun için projemizin [solution explorer] penceresinden projemizin adını seçip sağ clik yaptığımızda açılan menüden [add new item] düğmesini tıklayalım ve açılan pencereden [nested master page] seçelim. Nested master page imize bir isim verdikten sonra (örneğimizde bu isim haberler.master olmalı.) Add tuşuna basıldığında [Select a Master Page] adıyla yeni bir pencere açılacaktır. Bu pencereden de main.master i seçerek OK tuşuna bastığımızda artık yeni bir nested master page'imiz olmuş olur.
    <%@ MasterLanguage="C#"MasterPageFile="~/main.Master"AutoEventWireup="true"  CodeBehind="haberler.master.cs"Inherits="NestedMasterPages_SampleSite.haberler"%>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
      
    </asp:Content>

    Burada, dikkat edilmesi gereken nokta, nested master page imizin Content2 ID li bir ContentPlaceHolder'a sahip olduğudur. Nested master page'a asıl fonksiyonelitesini, bu ContentPlaceHolder'ın içine başka bir ContentPlaceHolder ekleyerek sağlamış olacağız. Yani haberler.master sayfamız şu şekile gelmiş olacaktır:  
    <%@ MasterLanguage="C#"MasterPageFile="~/main.Master"AutoEventWireup="true"  CodeBehind="haberler.master.cs"Inherits="NestedMasterPages_SampleSite.haberler"%>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
        <div style="width:98%; font-family:Tahoma; font-size:14pt; padding:13px;text-align:left;">
            <a href="ekonomi.aspx"target="_self">EkonomiHaberleri</a>&nbsp;&nbsp;&nbsp;
            <a href="spor.aspx"target="_self">SporHaberleri</a>&nbsp;&nbsp;&nbsp;
            <a href="magazin.aspx"target="_self">Magazin Haberleri</a>&nbsp;&nbsp;&nbsp;
            <br />
            <br />

            <asp:ContentPlaceHolderID="cphHaberler"runat="server">
                   Haberler İçeriği Buraya Gelecek
            </asp:ContentPlaceHolder>
        </div>
    </asp:Content>
     oyunlar.master
  3. Yukarıdakine benzer şekilde oyunlar maste Page'imizi ekleyelim.
    <%@ MasterLanguage="C#"MasterPageFile="~/main.Master"AutoEventWireup="true"CodeBehind="oyunlar.master.cs"Inherits="NestedMasterPages_SampleSite.oyunlar"%>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
       <div style="width:98%; font-family:Tahoma; font-size:14pt; padding:13px;text-align:left;">
            <a href="okey.aspx"target="_self">Okey</a>&nbsp;&nbsp;&nbsp;
            <a href="king.aspx"target="_self">King</a>&nbsp;&nbsp;&nbsp;
            <a href="pisti.aspx"target="_self">Pişti</a>&nbsp;&nbsp;&nbsp;
            <br />
            <br />

            <asp:ContentPlaceHolderID="cphOyunlar"runat="server">
                   Oyunlar burada gösterilir.
            </asp:ContentPlaceHolder>
        </div>
    </asp:Content>
  4. Şu an itibariyle elimizde aşağıdakilerbulunmaktadır:
            a)     Main.master:
    a.      Banner
    b.      Sol taraftaki Ana Menü
            b)     Haberler.master:
    a.      Haber İçeriğinin geleceği yerinhemen üzerinde yatay menü
    b.      Bumenüde EkonomiHaberleri, Spor Haberleri ve Magazin HaberleriLinkleriBulunmakta.
            c)      Oyunlar.master:
    a.      Oyun İçeriğinin geleceği yerinhemen üzerinde yatay menü
    b.      Bumenüde Okey,  King  ve PiştiLinkleri Bulunmakta.

  5. Şimdi master ve nested master page lerimiz hazır olduğuna göre, bunlarıdefault.aspx
  6. Solution Explorer penceresinden projemizi sağ tıklayıp, Add New Item düğmesine basıyoruz. Açılan pencereden aşağıdaki resimdeki gibi yeni bir weebform ekliyoruz.
    Nested Master Page Kullanan Yeni bir webform (aspx sayfası) eklemekBu pencerede Add butonuna tıklayınca aşağıdaki pencere açılacaktır:
    Nested Master Page Kullanan Yeni bir webform (aspx sayfası) eklemek-2            Bu pencerede de OK tuşuna bastığımızda default.aspx sayfamız projemizee
    Default Sayfamızın içine aşağıdaki gibi bir div eklediğimizde son hali şu hale gelecektir:
    <%@ PageTitle=""Language="C#"MasterPageFile="~/main.Master"AutoEventWireup="true"CodeBehind="default.aspx.cs"Inherits="NestedMasterPages_SampleSite._default"%>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
    <div style="font-family:Times New Roman; font-size:36pt; text-align:center">
            Sitemize Hoşgeldiniz...
    </div>
    </asp:Content>

     haberlerMain.aspx / oyunlarMain.aspx
  7. Default.aspx sayfasının eklenmesine benzer bir şekilde haberlerMain.aspx ve oyunlarMain.aspx sayfalarını ekleyelim. Aşağıdaki resimlerde gösterildiği şekilde bu sayfaları projemize ekleyebiliriz:

    HaberlerMain.aspx webformunun eklenmesi-1
    HaberlerMain.aspx webformunun eklenmesi-2
  8. default.aspx sayfamız main.master'ı kullanıyor. Ana menümüz main.master üzerinde. Buradan [Haberler] linkini tıkladığımızda, haberler.master'ını kullanan (yani haberler alt menüsünü içinde barındıran) haberlerMain.aspx sayfasını açmış oluruz. Benzer şekilde [Oyunlar] linkini tıkladığımızda ise, oyunlar.master'ını kullanan(yani oyunlar alt menüsünü içinde barındıran) oyunlarMain.aspx sayfasını açmış oluruz. 
  9. haberler.master masterpage'ini kullanan ekonomi.aspx, spor.aspx, magazin.aspx sayfalarını yukarıdaki resimlerde haberMain.aspx sayfasını eklediğimiz şekilde projemize ekleriz.
  10. Oyunlar.master master page'ini kullanan okey.aspx, king.aspx, pisti.aspx sayfalarını da yukarıdaki resimlerde görüldüğü gibi projemize ekleriz.
  11. Geriye ise, sadece main.master, oyun.master, haber.master masterPage lerinde bulunan <a> tag'ine sahip olan linklerin href deperlerini set etmek kalıyor. 

        Biraz uzun bir makale oldu gibi:) Ama nested master page i hiç kullanmamış birisinin en iyi şekilde kavrayabileceği bir şekilde anlatmaya çalıştım.
        Proje dosyasını buradan indirebilirsiniz.
        Kolay Gelsin:)
Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)