ภาษาไทย
中文(简体)
中文(繁体)
한국어
日本語
English
Português
Español
Русский
العربية
Indonesia
Deutsch
Français
ภาษาไทย
ดาวน์โหลดซอร์สโค้ด
เกี่ยวกับการเขียนโปรแกรม
ทรัพยากรสร้างเว็บไซต์
หนังสือและบทเรียน
เกมมือถือ
แอปมือถือ
บทความ
หน้าแรก
>
บทช่วยสอนการเขียนโปรแกรมเครือข่าย
>
บทช่วยสอน ASP.NET
คำอธิบายโดยละเอียดของมาสเตอร์เพจใน ASP.NET 2.0
ผู้เขียน:Eve Cole
เวลาอัปเดต:2009-06-30 16:37:05
เพื่อลดปัญหาในการเปลี่ยนแปลงทั้งไซต์เมื่อเปลี่ยนหนึ่งหน้าระหว่างการออกแบบเว็บ แนวคิดของต้นแบบจึงถูกเพิ่มเข้ามาหลังจากอัปเกรด vs2003 เป็น vs2005
คุณสามารถมองมันเป็น "เทมเพลตหน้าเว็บ" ข้อแตกต่างคือคุณไม่จำเป็นต้องอัปเดตทุกหน้าอีกต่อไป เมื่อคุณแก้ไขหน้าเว็บทั้งหมดจะเปลี่ยนไปทันที
เริ่มต้นด้วยการสาธิตการใช้งานหลักง่ายๆ:
1. เปิด Visual Studio 2005 ครั้งแรก สร้างเว็บไซต์ asp.net ระบบไฟล์ C# ใหม่
2. ใน Solution Explorer คลิกขวาเพื่อสร้างรายการใหม่:
3. เลือกหน้าหลัก:
4. เปิด MasterPage.master มีตัวควบคุม contentplaceholder อยู่ข้างใน ระวังอย่าเขียนอะไรลงในตัวควบคุม
เราไปที่มุมมองการออกแบบและเพิ่มข้อความส่วนหัวและส่วนท้ายนอกการควบคุมนี้
5.หลังจากบันทึกแล้วเราสามารถใช้มันสร้างเพจอื่นได้ มีสองวิธี 1. คลิกขวาที่ใดก็ได้บนหน้าหลักแล้วคลิกเพิ่มหน้าเนื้อหา 2. สร้างรายการใหม่ใน Solution Explorer และทำเครื่องหมายที่ "เลือกหน้าหลัก" เมื่อสร้างหน้า aspx
6. เลือกหน้าหลักที่เกี่ยวข้อง
7. มีเพียงไม่กี่ประโยคเหล่านี้ในซอร์สโค้ดของเพจที่สร้างขึ้นใหม่:
<%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%">
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"">
</asp:Content">
เราจะเห็นการควบคุมเนื้อหา ซึ่งสอดคล้องกับการควบคุม ContentPlaceHolder1 ของเพจหลัก และถูกแปลงเป็นเพจมุมมอง:
8. ข้อความในส่วนหัวและส่วนท้ายเป็นสีเทา และเราสามารถแก้ไขได้เฉพาะในเนื้อหาเท่านั้น
หลังจากบันทึกแล้ว ให้ไปที่หน้า default2.aspx F5. เราจะเห็นหน้า:
9. ตามที่คาดไว้ มาดูซอร์สโค้ดกันดีกว่า:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www .w3.org/1999/xhtml">
< <head> <title><
UntitledPage
</title></head>
<body>
<formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm ">
<div">
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/>
</div>
<div>
thisisthepage'sheader<br/>
thispage'scontent:hello,world!<br/>
thisisthepage'sfooter </div>
</form>
</body>
</html>
เนื้อหาหลักถูกวางใน div แต่หน้าเนื้อหาไม่ได้ถูกวางใน div แยก ซึ่งหมายความว่าจะไม่มีการเพิ่มโค้ดที่ซ้ำซ้อนลงในเพจย่อยในเนื้อหาหลัก สิ่งนี้ทำให้เรามีความยืดหยุ่นอย่างมากในการเขียนโปรแกรมและเค้าโครงหน้าเว็บ เราสามารถใช้ประโยชน์จากการวางตำแหน่ง CSS+DIV ได้อย่างเต็มที่ และเรายังสามารถใช้การวางตำแหน่งตารางได้อีกด้วย ไม่จำเป็นต้องแก้ไขทุกหน้าเมื่อทำการแก้ไข
10. สำหรับต้นแบบที่ไม่ใช่ชิ้นส่วนของเนื้อหาคงที่ เราสามารถใช้ ContentPlaceHolder1 หลายรายการสำหรับเลย์เอาต์ ตัวอย่างต่อไปนี้ใช้ตารางสำหรับการวางตำแหน่ง:
11. จะมีเนื้อหาสองรายการในหน้าย่อยที่เกี่ยวข้อง:
รหัสที่สร้างขึ้น:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www .w3.org/1999/xhtml">
< <head> <title><
UntitledPage
</title></head>
</body>
<formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm ">
<div">
<inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/>
</div><
/ <div>
ส่วนหัวของหน้านี้ <br/>
<ตาราง>
<tr>
<td>
ohmyContent1
</td>
< <td>
< hisyContent2
ง
>
</tr>
< /table>
thisisthepage'sfooter
</div>
</form>
< </body>
</html>
12. ใช้มันอย่างยืดหยุ่น แม้ว่า CSS จะสามารถใช้ DIV เพื่อแก้ไขปัญหานี้ได้ แต่การปรากฏตัวของการควบคุมที่ไม่ได้มาตรฐานบางอย่างนั้นยากที่จะควบคุมด้วย CSS หากคุณสร้างชุดต้นแบบอื่น MasterPage2.master คุณสามารถตั้งค่าไดนามิกปานกลางได้:
โมฆะที่ได้รับการป้องกัน Page_PreInit (ผู้ส่งวัตถุ EventArgs e)
-
MasterPageFile = "~/MasterPage2.master";
-
ไปที่นี่ก่อน ว่ากันว่า Nested Application ก็ใช้ได้ แต่ตอนนี้เอาไว้ใช้ควบคู่กับ Theme ต่อไป