Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,036

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



Clound SSD Virtual Server

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 สามารถเพิ่มเติมได้ที่



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 อื่น ๆ ก็ใช้วิธีเดียวกัน



   
Share


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


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


   


Bookmark.   
       
  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


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
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
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่