หน้าแรก>บทช่วยสอนการเขียนโปรแกรมเครือข่าย>บทช่วยสอน 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. มีเพียงไม่กี่ประโยคเหล่านี้ในซอร์สโค้ดของเพจที่สร้างขึ้นใหม่:


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%">
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"">
  3. ＜/asp:Content">

เราจะเห็นการควบคุมเนื้อหา ซึ่งสอดคล้องกับการควบคุม ContentPlaceHolder1 ของเพจหลัก และถูกแปลงเป็นเพจมุมมอง:



8. ข้อความในส่วนหัวและส่วนท้ายเป็นสีเทา และเราสามารถแก้ไขได้เฉพาะในเนื้อหาเท่านั้น

หลังจากบันทึกแล้ว ให้ไปที่หน้า default2.aspx F5. ​​เราจะเห็นหน้า:


9. ตามที่คาดไว้ มาดูซอร์สโค้ดกันดีกว่า:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml">
  3. < ＜head> ＜title><
  4. UntitledPage
  5. ＜/title>＜/head>
  6. ＜body>
  7. ＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm ">
  8. ＜div">
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
  12. thisisthepage'sheader＜br/＞
  13. thispage'scontent:hello,world!＜br/＞
  14. thisisthepage'sfooter&nbsp;＜/div＞
  15. ＜/form＞
  16. ＜/body＞
  17. ＜/html>

เนื้อหาหลักถูกวางใน div แต่หน้าเนื้อหาไม่ได้ถูกวางใน div แยก ซึ่งหมายความว่าจะไม่มีการเพิ่มโค้ดที่ซ้ำซ้อนลงในเพจย่อยในเนื้อหาหลัก สิ่งนี้ทำให้เรามีความยืดหยุ่นอย่างมากในการเขียนโปรแกรมและเค้าโครงหน้าเว็บ เราสามารถใช้ประโยชน์จากการวางตำแหน่ง CSS+DIV ได้อย่างเต็มที่ และเรายังสามารถใช้การวางตำแหน่งตารางได้อีกด้วย ไม่จำเป็นต้องแก้ไขทุกหน้าเมื่อทำการแก้ไข

10. สำหรับต้นแบบที่ไม่ใช่ชิ้นส่วนของเนื้อหาคงที่ เราสามารถใช้ ContentPlaceHolder1 หลายรายการสำหรับเลย์เอาต์ ตัวอย่างต่อไปนี้ใช้ตารางสำหรับการวางตำแหน่ง:



11. จะมีเนื้อหาสองรายการในหน้าย่อยที่เกี่ยวข้อง:



รหัสที่สร้างขึ้น:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml">
  3. < ＜head> ＜title><
  4. UntitledPage
  5. ＜/title>＜/head>
  6. </body>
  7. ＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm ">
  8. ＜div">
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/>
  10. ＜/div><
  11. / ＜div>
  12. ส่วนหัวของหน้านี้ ＜br/>
  13. ＜ตาราง>
  14. <tr>
  15. ＜td>
  16. ohmyContent1
  17. ＜/td>
  18. < ＜td>
  19. < hisyContent2
    20. ง
  20. >
  21. ＜/tr>
  22. ＜ /table>
  23. thisisthepage'sfooter&nbsp;
  24. ＜/div>
  25. ＜/form>
  26. < ＜/body>
  27. ＜/html>

12. ใช้มันอย่างยืดหยุ่น แม้ว่า CSS จะสามารถใช้ DIV เพื่อแก้ไขปัญหานี้ได้ แต่การปรากฏตัวของการควบคุมที่ไม่ได้มาตรฐานบางอย่างนั้นยากที่จะควบคุมด้วย CSS หากคุณสร้างชุดต้นแบบอื่น MasterPage2.master คุณสามารถตั้งค่าไดนามิกปานกลางได้:

โมฆะที่ได้รับการป้องกัน Page_PreInit (ผู้ส่งวัตถุ EventArgs e)
-
MasterPageFile = "~/MasterPage2.master";
-

ไปที่นี่ก่อน ว่ากันว่า Nested Application ก็ใช้ได้ แต่ตอนนี้เอาไว้ใช้ควบคู่กับ Theme ต่อไป