מדריך ASP.NET – בניית Master Page

‏ • Sela

כאשר נבנה מערכת Web, נרצה שהעמודים השונים יהיו בעלי אותה תבנית, לעיתים נרצה לשלב בכל העמודים את אותו אזור לתפריט, כותרות ופרטים כלליים על האתר.

לשם בניית התבנית הזו נוכל להעזר ב – Master page. Master page הוא קובץ בעל סיומת Master המהווה את התבנית לעמודים השונים.

במדריך זה נראה כיצד בונים Master page וכיצד משלבים אותו בדפים השונים

יצירת Master Page

בפרוייקט שלנו נבחר ב – Add New Item

ASPNET - הוספת קובץ חדש

בתפריט שנפתח נבחר ב – Master Page

ASPNET - הוספת Master Page

ניתן לקובץ שם, לצורך ההדגמה קראנו לקובץ Site.Master. נתבונן בקוד שנוצר לנו באופן אוטומטי:

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

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

<html >="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
>

שימו לב לתגים asp:ContentPlaceHolder , נשוב אליהם בהמשך. בינתיים נראה שנוצר לנו קובץ עם תוכן דומה למה שנוצר ב – ASPX ואנחנו יכולים להוסיף לו פקדים כראות עינינו.

לצורך ההדגמה נוסיף Label לפני ה – ContextPlaceHolder השני והקוד יראה כך:

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

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

<html >="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:Label ID="Label1" runat="server"
          Text="Your Content Here:"  />
        <asp:ContentPlaceHolder 
          ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form
>
</
body
>
</
html
>

הוספת דף עם תבנית

נבחר שוב ב – Add new item ובתבנית נבחר ב – Web Form using Master Page

ASPNET - הוספת דף מבוסס Master Page

ניתן לו שם, אנחנו לצורך ההדגמה קראנו לו MyContentPage.aspx כעת, עלינו לבחור מהו ה – Master Page בו הדף החדש שלנו משתמש, היות וקיים לנו בפרוייקט רק Master Page אחד, נבחר בו, ונלחץ OK .

 
ASPNET - בחירת Master Page לדף ASPX

נתבונן כעת בקוד שנוצר לנו באופן אוטומטי בדף החדש:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
  AutoEventWireup="true" CodeBehind="myContentPage.aspx.cs" 
  Inherits="Demos.myContentPage" %>
<asp:Content 
  ID="Content1" ContentPlaceHolderID="head" runat
="server">
</
asp:Content
>
<
asp:Content ID="Content2" 
  ContentPlaceHolderID="ContentPlaceHolder1" runat
="server">
</
asp:Content
>

נראה בשורה הראשונה את המאפיין MasterPageFile המצביע על ה – Master Page ושני פקדי תוכן (asp:Content). לפקד asp:Content ישנו מאפיין בשם ContentPlaceHolderID, תפקיד המאפיין הזה הוא להצביע על הפקד asp:ContentPlaceHolder.

נוסיף Label בתוך פקד התוכן השני וניתן לו גם צבע רקע על מנת להבדילו. הקוד בדף שלנו יראה כך:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
  AutoEventWireup="true" CodeBehind="myContentPage.aspx.cs" 
  Inherits="Demos.myContentPage" %>
<asp:Content 
  ID="Content1" ContentPlaceHolderID="head" runat
="server">
</
asp:Content
>
<
asp:Content ID="Content2" 
  ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <asp:Label ID="Label1" Text="This is from the content page" 
    BackColor="YellowGreen" runat="server" 
/>
</
asp:Content
>

כעת, נראה את הדף ע"י הקלקה ימנית ובחירה ב – View In Browser:

ASPNET - פתיחת דף בדפדפן

וזה מה שהתקבל בדפדפן:

ASPNET - מראה עמוד עם Master Page בדפדפן

וב – HTML:

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

</title
>
</
head
>
<
body>
  <form method="post" action="MyContentPage.aspx" id="form1">
    <div class="aspNetHidden">
      <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
        value="/wEPDwULLTE1MjQ5ODA0NjlkZAtf8DceGtYv0R7C9YhfJh50
sSVzW/gHz3gnws5Rw9DL"
 />
    </div>
    <div>
      <span>Your Content Here:</span> 
      <span style="background-color:YellowGreen;">
This is from the content page</span>
    </div>
  </form
>
</
body
>
</
html
>

ניתן לראות כאן שחלק מה-HTML הגיע מה – Master Page וחלק מהדף עצמו. ניתן להוסיף דפים נוספים המשתמשים באותו Master Page ולשנות את תוכנם.

ניתן לשנות את התוכן של ה – Master Page ולראות איך כל הדפים שהוספנו ושמשתמשים בו, תוכנם משתנה בהתאם.

תגיות: , , , ,

IdoFlatow

יועץ ומרצה בקבוצת סלע לתחומי Web ו-Data. עוסק בתחומים Asp.Net, WCF, Silverlight, IIS ו-Entity Framework.כותב הקורס הרשמי של מיקרוסופט ל-WCF וכן שותף בכתיבת הספר ASP.NET Programmer's Reference (ISBN 978-0470505458)

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!