וובמאסטר - תיכנות ובניית אתרים

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

IdoFlatow ,‏ מכללת סלע‏ ‏/‏ 7 פברואר, 2011
F+
F-

כאשר נבנה מערכת 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 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
>

שימו לב לתגים 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 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: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 xmlns="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)
תגיות: ASP.NET‏  /  .net‏  /  מדריך‏  /  פיתוח‏  /  צד שרת‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות