Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > ASP.NET > ASP.NET Master Page > ASP.NET Master Page

ASP.NET Master Page

ASP.NET Master Page (.master) เป็นแนวคิดที่พัฒนาเพิ่มมาจาก Web User Control (.ascx) โดยเริ่มมีกับ ASP.NET 2.0 (Visual Studio 2005) และใน .NET เวอร์ชั่นใหม่ ๆ ๆ การ Create New Project (ASP.NET Web Site) นั้นจะมีการสร้าง Master Page เป็นไฟล์ Default ให้กับโปรเจคในทันที เพราะ Master Page นั้นได้เข้ามาช่วยจัดการเรื่องการออกแบบ layout ของหน้า Web Form ได้อย่างมีประสิทธิภาพ และสะดวกต่อการใช้งานอย่างมากเลยทีเดียว

พื้นฐานในการออกแบบ หน้าเว็บไซต์ หน้านั้น ๆ ตามองค์ประกอบพื้นฐานของหน้า Web Form (.aspx) จะประกอบด้วย 4 ส่วนหลัก ๆ คือ
1. Header หรือส่วนบนของเว็บไซต์
2. Menu หรือส่วนเมนูของเว็บไซต์
3. Footer ส่วนล่างของเว็บไซต์
4. Container หรือส่วนของเนื้อหา

Model ของ Web User Control (.ascx) ในการใช้ Web User Control กับ Web Form จะต้องออกแบบ Web User Control ไฟล์ซึ่งประกอบด้วย Header.ascx , Menu.ascx และ Footer.ascx แล้วทำการสร้างไฟล์ Web Form (.aspx) พร้อม ๆ กับลาก Web User Control (.ascx) ดังกล่าวมาไว้ในตำแหน่งที่ต้องการ ข้อเสียวิธีการนี้คือ ในหน้า Web Form (.aspx) จะต้องทำการจัด Layout ในทุก ๆ ไฟล์ และทำการลาก Web User Control (.ascx) มาใส่ในทุก ๆ ครั้ง ซึ่งจะเป็นปัญหาเมื่อมีการปรับ Layout จะต้องทำให้ตามแก้ไขข้อมูล Web Form ทุก ๆ ไฟล์ การใช้ Web User Control จะมีเหมาะสมในกรณีที่ไม่ต้องการ Layout หรือ Themes ในรูปแบบเดียวกันทั้งเว็บไซต์

รูปตัวอย่างการออกแบบหน้า Web Form ด้วยการใช้ Web User Control เข้ามาจัดการ Header,Menu และ Footer

ASP.NET & Web User Control Model

จากรูปจะเห็นว่า Web Form (.aspx) นี้ถูกสร้างขึ้นมา และมีการจัด Layout เป็น 4 ส่วน โดยมีส่วน Header , Menu และ Footer ได้มีการ include มาจาก Web User Control และในส่วนของ Container จะเป็นส่วนของ Page ที่ใส่เนื้อหาต่าง ๆ และเหตุผลนี้เอง กรณีที่สร้าง Web Form ขึ้นมาอีกหลาย ๆ หน้าก็จะต้องทำในกรณีเช่นเดียวกัน คือ Include หรือลาก Web User Control เช่นเดียวกัน

สำหรับการใช้งาน Web User Control สามารถเพิ่มเติมได้ที่

https://www.thaicreate.com/asp.net/asp.net-web-user-control.html

Master Page (.master)
ได้เข้ามาจัดการแก้ไขปัญหาดังกล่าว โดยการรวมเอา Layout ทั้ง 3 ส่วน มาไว้ในไฟล์เดียวกัน ความแตกต่างระหว่าง Master Page (.master) และ Web User Control (.ascx) ถ้าจะอธิบายให้เข้าใจง่ายก็คือ Web User Control (.ascx) คือการสร้างไฟล์ย่อยหรือไฟล์ include ซึ่งตัวหน้า Web Form (.aspx) หลัก สามารถทำการ include เข้ามาในตำแหน่งที่ต้องการ ส่วน Master Page (.master) จะเป็น Page หลักหรือต้นแบบของหน้าเว็บไซต์ โดยที่หน้า WebPage จะทำการจำลอง Layout ที่ได้ออกแบบไว้ใน Master Page มาแสดงที่หน้า Web Form ปัจจุบัน และในหน้า Web Form จะสามารถใส่เนื้อหาหรือรายละเอียดได้เฉพาะตรงส่วนที่เป็น ContentPlaceHolder ที่ได้ออกแบบไว้ใน Master Page (.master) เท่านั้น ซึ่งการใช้ Master Page (.master) เข้ามาจัดการหน้า Web Form จะช่วยในเรื่องการปรับเปลี่ยน Layout รวมทั้งรายละเอียดอื่น ๆ ได้อย่างสะดวก และง่ายต่อการเขียนโปรแกรม ASP.NET มากเลยทีเดียว

รูปตัวอย่างการออกแบบ Master Page (.master)

ASP.NET & Master Page Model

จากรูปจะเห็นว่าไฟล์ Master Page (.master) ได้มีการออกแบบ Layout เป็น 4 ส่วนด้วยกัน และมีการทำ Header , Menu และ Footer ไว้เรียบร้อยแล้ว และมีการ เตรียมพื้นที่ ContentPlaceHolder สำหรับใส่เนื้อหาในแต่ล่ะ Web Form (.aspx) และในส่วนของ ContentPlaceHolder สามารถสร้าง Layout เพื่อวางตำแหน่งของ ContentPlaceHolder ได้เช่นเดียวกัน โดยในตัวอย่างได้ออกแบบไว้ 2 ส่วน

ASP.NET & Master Page Model

สามารถลาก Control ชื่อ ContentPlaceHolder ไปใส่ตำแหน่งใน Master Page ได้ตามต้องการ ทั้งนี้ขึ้นอยู่กับ Layout และเนื้อหาของ Content

Code ของ (.master)

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MyMasterPage.master.vb" Inherits="MasterPage.MyMasterPage" %>

<!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">
  </head>
<body>
<form id="form1" runat="server">
<table width="100%" border="1">
  <tr bgcolor="#999933">
    <td height="81" colspan="2" align="center">
        <asp:Label ID="Label1" runat="server" Font-Size="X-Large" 
            Text="Header Header Header Header "></asp:Label>
      </td>
  </tr>
  <tr>
    <td bgcolor="#CC99CC" width="158px" height="251px" align="center">
        <asp:Label ID="Label3" runat="server" Font-Size="Small" Text="Menu Menu Menu "></asp:Label>
      </td>
    <td width="81%" align="center" style="height: 251px;">
    
    <table width="100%" border="0" style="height: 190px">
  <tr>
  
    <td bgcolor="#FFCCCC">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>

    </td>
    <td bgcolor="#FFCC99">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
        
    </td>
  </tr>
</table>
        
 </td>
  </tr>
  <tr bgcolor="#FFCC99">
    <td height="69" colspan="2" align="center">
        <asp:Label ID="Label2" runat="server" Font-Size="X-Large" 
            Text="Footer Footer Footer Footer "></asp:Label>
      </td>
  </tr>
</table>
        
</form>
</body>
</html>

จาก Code ของ Master Page (.master)

   <td bgcolor="#FFCCCC">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>

    </td>
    <td bgcolor="#FFCC99">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
      
    </td>

จะเห็นว่า Master Page ไฟล์นี้ได้วางตำแหน่งไว้ 2 ตำแหน่ง สำหรับบรรจุดเนื้อหาของ Web Form (.aspx) และเมื่อมีการสร้าง Web Form โดยมีการสืบทอด Master Page ตัวนี้ ในไฟล์ Web Form ก็จะปรากฏ ContentPlaceHolder1 และ ContentPlaceHolder2 สำหรับใส่เนื้อหาใน Web Page

ลองมาดูตัวอย่างการสร้างแบบง่าย ๆ ครับ

ขั้นตอนที่ 1 สร้างไฟล์ .master

ASP.NET & Master Page

คลิกขวาที่ Project เลือก -> Add -> New Item...

ASP.NET & Master Page

เลือก Control Master Page และตั้งชื่อเป็น MyMasterPage.master

รายละเอียดของไฟล์ให้ใส่เป็นดังนี้

MyMasterPage.master

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="MyMasterPage.master.vb" Inherits="MasterPage.MyMasterPage" %>

<!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">
</head>
<body>
<form id="form1" runat="server">
<table width="100%" border="1">
  <tr bgcolor="#999933">
    <td height="81" colspan="2" align="center">
        <asp:Label ID="Label1" runat="server" Font-Size="X-Large" 
            Text="Header Header Header Header "></asp:Label>
      </td>
  </tr>
  <tr>
    <td bgcolor="#CC99CC" width="158px" height="251px" align="center">
        <asp:Label ID="Label3" runat="server" Font-Size="Small" Text="Menu Menu Menu "></asp:Label>
      </td>
    <td width="81%" align="center" style="height: 251px;">
    
    <table width="100%" border="0" style="height: 190px">
  <tr>
  
    <td bgcolor="#FFCCCC">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>

    </td>
    <td bgcolor="#FFCC99">
    
         <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
        
    </td>
  </tr>
</table>
        
 </td>
  </tr>
  <tr bgcolor="#FFCC99">
    <td height="69" colspan="2" align="center">
        <asp:Label ID="Label2" runat="server" Font-Size="X-Large" 
            Text="Footer Footer Footer Footer "></asp:Label>
      </td>
  </tr>
</table>
        
</form>
</body>
</html>

ขั้นตอนที่ 2 การสร้าง Content Page หรือ Web Form (.aspx)

ASP.NET & Master Page

คลิกขวาที่ Project เลือก -> Add -> New Item...

ASP.NET & Master Page

เลือก Web Content Form และตั้งชื่อเป็น MyWebForm.aspx

ASP.NET & Master Page

เลือก Master Page ที่ได้สร้างไว้

เมื่อสร้างเสร็จแล้วไฟล์ Web Form (MyWebForm.aspx) จะมีการสืบสอด Master Page ในส่วนของ ContentPlaceHolder1 และ ContentPlaceHolder2 ของ Master Page เหมือนในตัวอย่าง

MyWebForm.aspx

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MyMasterPage.Master" CodeBehind="MyWebPage.aspx.vb" Inherits="MasterPage.MyWebPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
// This Content 1
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
// This Content 2
</asp:Content>

ตำแหน่ง // This Content 1 และ // This Content 2 คือตำแหน่งสำหรับใส้เนื้อหาในหน้า Web Form (.aspx)

เมื่อ View Design ใน Visual Studio จะแสดง Layout ของ Master Page พร้อม ๆ กับ ตำแหน่งที่จะใส่เนื้อหา

ASP.NET & Master Page

จากตัวอย่างจะเห็นว่าใน Web Form จะต้องไม่ทำการออกแบบ Layout เลย เพราะ Layout หลักนั้นได้ถูกสร้างไว้ที่ Master Page (.master) ซึ่งเราสามารถปรับเปลี่ยนได้อย่างสะดวกและง่ายต่อการเขียนโปรแกรมอย่างยิ่ง และเมื่อกต้องการเพิ่ม Web Form อื่น ๆ ก็ใช้วิธีเดียวกัน

ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท

ลองใช้ค้นหาข้อมูล


	By :	ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
	Score Rating :
	Create/Update Date :	2010-11-24 17:32:34 / 2017-03-28 20:51:30
	Download :	No files

Sponsored Links / Related

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว