iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

ASP.NET Web Form 入門30天系列 第 29

[ASP.NET] Master Pages 主版頁面 (上)

本篇擷取重點:

  1. Master Pages 主版頁面概觀及其優點
  2. 如何建立 Master Pages主版頁面及Content Pages內容頁面
  3. 範例一併寫在下一篇Master Pages 主版頁面(下) +範例

一、Master Pages 主版頁面概觀及其優點

  1. 什麼是 Master Pages 主版頁面?在我們開始解釋前先來看看下方幾張圖片

https://ithelp.ithome.com.tw/upload/images/20190930/201200567gRNbYo9aX.png

https://ithelp.ithome.com.tw/upload/images/20190930/20120056AHBojvYDG8.png

https://ithelp.ithome.com.tw/upload/images/20190930/20120056OCNzXwIy5i.png

這三張圖片皆屬同一個網站下的不同分頁,我們可以發現,他們的結構相當類似,分別為最上方的頁首 header、左邊的網頁內文區 content、右邊的邊欄 sidebar_right以及最下方的頁尾 footer(看不到的部分)。

如果我們再看得更仔細會發現,這三個分頁中,無論頁首、右邊欄及頁尾並未隨著分頁改變,只有左邊的網頁內容頁面區再做變動。這就是Master Pages 主版頁面的概念。

首先,我們先來了解 Master Pages運作原理,在網頁運作過程中,預先定義好樣版供後續網頁套用者即為"Master Pages"主版頁面(綠色框線),而套用主版頁面的網頁則稱為"Content Page"內容頁面(紅色框線),最後兩者會合併成一個新網頁,如下方示意圖。

https://ithelp.ithome.com.tw/upload/images/20190930/20120056amAS7nfMIG.png


  1. 優點:
  • 有效達成網站所有頁面中的一致性效果
  • 能夠在設計階段時就能預視網頁版面
  • 維護網頁版面容易
  • 集中頁面的通用功能,讓我們在同一個位置就能進行更新
  • 輕鬆建立一組控制項和程式碼,並將結果套用至一組頁面
  • 控制預留位置控制項的呈現方式,可更細膩的控制完稿頁面的配置樣式
  • 物件模式,讓我們可從個別內容頁面自訂主版頁面

參考資料:
聖殿祭司的ASP.NET 2.0 專家技術手冊- 使用C#


二、如何新增 Master Pages主版頁面及Content Pages內容頁面

1. 建立Master Pages 主版頁面

檔案總管 - 專案 - 滑鼠右鍵 - 加入 - 新增項目

https://ithelp.ithome.com.tw/upload/images/20190929/20120056aqpA7nDKx6.png

點選"使用主版頁面的WEB FORM"(視窗圖示) - 命名 -新增

https://ithelp.ithome.com.tw/upload/images/20190930/20120056YtMXnznKZu.png

預設內容


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="ShareTwo.MasterPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

首先看到預設的Master Pages裡面有兩個ContentPlaceHolder控制項,前者用來放置網頁標頭(head)的內容,後者用來放置網頁主體(body)的內容。我們可依實際使用情況來增加ContentPlaceHolder控制項的數量,但需特別注意的是,除了用來放置網頁標頭(head)內容的ContentPlaceHolder控制項外,所有的伺服器控制項皆需包在 < form runat="server"> < /form> 標記內,而ASP.NET 頁面中只允許包含一個伺服器端 < form> 標記,故建議您最好將該標記放在主版頁面中


2. 建立Content Pages內容頁面

檔案總管 - 專案 - 滑鼠右鍵 - 加入 - 新增項目

https://ithelp.ithome.com.tw/upload/images/20190929/20120056aqpA7nDKx6.png

點選"使用主版頁面的WEB FORM"(地球圖示) - 命名 -新增

https://ithelp.ithome.com.tw/upload/images/20190930/20120056efZTzYxlt1.png

在加入新WEB FORM時指定Master Pages主版頁面

https://ithelp.ithome.com.tw/upload/images/20190930/20120056LRL0JMuAA3.png

預設內容


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ShareTwo.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>


此篇內容整理自多篇網路文章、PPT及自己的理解,但筆者也仍處在初階的學習過程,對程式概念的理解及判斷都尚不足,若有錯誤的地方,也煩請各位大大提點,先謝謝大家惹!!


上一篇
[ASP.NET] 新增泛型處理常式(.ashx)及瀏覽上傳圖片的範例
下一篇
[ASP.NET] Master Pages 主版頁面 (下) + 範例
系列文
ASP.NET Web Form 入門30天30

尚未有邦友留言

立即登入留言