Facebook
Twitter
RSS
כאשר נבנה מערכת Web, נרצה שהעמודים השונים יהיו בעלי אותה תבנית, לעיתים נרצה לשלב בכל העמודים את אותו אזור לתפריט, כותרות ופרטים כלליים על האתר.
לשם בניית התבנית הזו נוכל להעזר ב – Master page. Master page הוא קובץ בעל סיומת Master המהווה את התבנית לעמודים השונים.
במדריך זה נראה כיצד בונים Master page וכיצד משלבים אותו בדפים השונים
יצירת Master Page
בפרוייקט שלנו נבחר ב – Add New Item
<%@ 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
<%@ 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"כעת, נראה את הדף ע"י הקלקה ימנית ובחירה ב – View In Browser:
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>
<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 ולראות איך כל הדפים שהוספנו ושמשתמשים בו, תוכנם משתנה בהתאם.
למאמר הקודם