การสร้าง Content Page

ไฟล์ Content Page จะเป็นไฟล์เว็บฟอร์มตามปกติ แต่ในตอนที่เราสร้างมันขึ้นมา เราต้องเลือกว่าเว็บฟอร์มนี้ต้องการใช้ Master Page ดังภาพที่ 9-34

ภาพที่ 9-34 การเพิ่ม Content Page

จากภาพที่ 9-34 หลังจากเลือกตัวเลือก Select master page แล้ว กดปุ่ม Add ที่ด้านล่างขวา จะพบหน้าให้เลือกไฟล์ Master Page ดังภาพที่ 9-35

ภาพที่ 9-35 การเลือกไฟล์ Master Page ให้กับไฟล์ Content Page

จากภาพที่ 9-35 จะเป็นหน้าจอที่ให้เราเลือก Master Page เราสามารถเบราซ์ไปยังไฟล์ Master Page ไฟล์ต่างๆ ที่อยู่ในเว็บไซต์ของเรา หลังจากนั้นกดปุ่ม OK เพื่อจบการสร้าง Content Page

เมื่อเราเปิดไฟล์ Content Page ที่เพิ่งสร้างเสร็จในมุมมอง Design จะพบหน้าจอดังภาพที่ 9-36

ภาพที่ 9-36 มุมมอง Design ของไฟล์ Content Page

จากภาพที่ 9-36 จะพบว่าในส่วนที่สืบทอดรูปร่างหน้าตามาจากไฟล์ Master Page นั้น ซึ่งก็คือส่วน Header ส่วน Navigation และส่วน Footer ที่เราสามารถมองเห็นได้ แต่จะไม่สามารถแก้ไขได้ เพราะมันจะถูกล็อคเอาไว้ หากต้องการแก้ไข เราจะต้องไปแก้ไขที่ไฟล์ Master Page โดยตรง สำหรับส่วนที่แก้ไขได้ จะอยู่ในคอนโทรล Content เท่านั้น

เมื่อเราเปิดไฟล์ Content Page ในมุมมอง Source จะพบดังโค้ดตัวอย่างที่ 9-37

<%@ Page Language=... %>

<asp:Content ID="Content1" ContentPlaceHolderID="Calendar" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="News" Runat="Server">
</asp:Content>

โค้ดตัวอย่างที่ 9-37 มุมมอง Source ของไฟล์ Content Page

จากโค้ดตัวอย่างที่ 9-37 เราจะพบแอตทริบิวต์ MasterPageFile อยู่ในไดเรคทีฟ Page ด้านบนสุด และจะมีคอนโทรล Content อยู่สองตัวที่สอดคล้องกับคอนโทรล ContentPlaceHolder ของไฟล์ Master Page โดยคอนโทรลตัวแรกจะแสดงเนื้อหาเกี่ยวกับปฎิทิน ส่วนตัวที่สองแสดงเนื้อหาข่าว เป็นที่น่าสังเกตุว่าภายในไฟล์ Content Page จะไม่มีแท็ก HTML แท็ก Body แท็ก Head หรือแท็ก Form เหมือนกับเว็บฟอร์มปกติ เพราะแท็กเหล่านี้จะถูกเขียนไว้ภายในไฟล์ Master Page เรียบร้อยแล้ว หน้าที่ไฟล์ Content Page จึงเหลือเพียงเติมเนื้อหาที่ขาดไปให้กับไฟล์ Master Page เท่านั้น

ในการเพิ่มเติมเนื้อหาทั้งสองส่วน เราสามารถใช้มุมมอง Design หรือ Source ในการเพิ่มเติมเนื้อหาได้ตามสะดวก ตัวอย่างหลังจากเพิ่มเติมเนื้อหาในไฟล์ Content Page แสดงดังภาพที่ 9-38

ภาพที่ 9-38 มุมมอง Design ของไฟล์ Content Page เมื่อมีการเพิ่มเติมเนื้อหา

เมื่อทำการเปิดไฟล์ Content Page ในเบราเซอร์ จะได้หน้าจอดังภาพที่ 9-39

ภาพที่ 9-39 ไฟล์ Content Page เมื่อถูกเปิดในเบราเซอร์