使用主版頁面建立全網站的版面配置 (C#)

作者:Scott Mitchell

下載 PDF

本教學課程會顯示主版頁面基本概念。 也就是說,什麼是主版頁面、如何建立主版頁面、什麼是內容佔位元、如何建立使用主版頁面的 ASP.NET 頁面、修改主版頁面如何自動反映在其相關聯的內容頁面中等等。

簡介

設計良好的網站之一屬性是一致的全網站版面配置。 例如 ,取得 www.asp.net 網站。 在撰寫本文時,每個頁面在頁面的頂端和底部都有相同的內容。 如圖 1 所示,每個頁面頂端都會顯示灰色列,其中包含 Microsoft 社群清單。 在該網站標誌下方,網站已翻譯到的語言清單,以及核心區段:首頁、開始使用、學習、下載等等。 同樣地,頁面底部也包含有關 www.asp.net 廣告的資訊、著作權聲明,以及隱私聲明的連結。

www.asp.net 網站在所有頁面上採用一致的外觀和風格

圖 01www.asp.net 網站會跨所有頁面採用一致的外觀和風格, (按兩下即可檢視大小完整的影像)

設計完善的網站的另一個屬性是可以變更網站外觀的簡易性。 圖 1 顯示自 2008 年 3 月起 www.asp.net 首頁,但在現在和本教學課程的出版物之間,外觀和風格可能已變更。 或許頂端的功能表項會展開,以包含MVC架構的新區段。 或者,可能會有不同色彩、字型和版面配置的新設計。 將這類變更套用至整個網站應該是快速且簡單的程式,不需要修改組成網站的數千個網頁。

使用 主版頁面,可以在 ASP.NET 中建立全網站頁面範本。 簡單來說,主版頁面是特殊類型的 ASP.NET 頁面,可定義所有 內容頁面 之間通用的標記,以及依內容頁面自定義的區域。 (內容頁面是系結至主版頁面的 ASP.NET 頁面。) 每當主版頁面的版面配置或格式變更時,其所有內容頁面的輸出也會立即更新,如此一來,套用全網站的外觀會隨著更新和部署單一 (檔案而變得簡單,也就是主版頁面) 。

這是使用主版頁面探索的一系列教學課程中的第一個教學課程。 在本教學課程系列課程中,我們會:

  • 檢查建立主版頁面及其相關聯的內容頁面,
  • 討論各種秘訣、訣竅和陷阱,
  • 識別常見的主版頁面錯誤並探索因應措施,
  • 瞭解如何從內容頁面存取主版頁面,反之亦然
  • 瞭解如何在運行時間指定內容頁面的主版頁面,以及
  • 其他進階主版頁面主題。

這些教學課程旨在簡潔,並提供具有許多螢幕快照的逐步指示,以可視化方式引導您完成程式。 C# 和 Visual Basic 版本提供每個教學課程,並包含使用的完整程式代碼下載。

本教學課程從主版頁面基本概念開始。 我們會討論主版頁面的運作方式、查看如何使用Visual Web Developer建立主版頁面和相關聯的內容頁面,以及查看主版頁面的變更如何立即反映在其內容頁面中。 現在就開始吧!

瞭解主版頁面的運作方式

建置具有一致全網站版面配置的網站時,除了其自定義內容之外,每個網頁還會發出一般格式標記。 例如,雖然 每個教學 課程或論壇文章 www.asp.net 都有自己的唯一內容,但每個頁面也會轉譯一系列常見的 <div> 元素,其中顯示最上層區段連結:首頁、開始使用、學習等等。

有各種不同的技術可用來建立具有一致外觀和風格的網頁。 簡單的方法是直接將通用版面配置標記複製並貼到所有網頁,但此方法有一些缺點。 對於入門,每次建立新頁面時,您都必須記得複製共享內容並貼到頁面中。 這類複製和貼上作業很適合發生錯誤,因為您可能不小心將共用標記的子集複製到新頁面。 此外,這種方法會讓現有的全網站外觀取代為真正的麻煩,因為網站中的每個單一頁面都必須編輯,才能使用新的外觀和風格。

在 ASP.NET 2.0 版之前,頁面開發人員通常會在 使用者控件 中放置通用標記,然後將這些使用者控件新增至每個頁面和每個頁面。 此方法需要頁面開發人員記得手動將使用者控件新增至每個新頁面,但允許更輕鬆地進行全網站修改,因為更新通用標記時只需要修改使用者控件。 不幸的是,Visual Studio .NET 2002 和 2003 - 用來建立 ASP.NET 1.x 應用程式的 Visual Studio 版本 - 將 [設計] 檢視中的 [使用者控件] 轉譯為灰色方塊。 因此,使用此方法的頁面開發人員不會享受 WYSIWYG 設計時間環境。

使用使用者控件的缺點是在 ASP.NET 2.0 版和 Visual Studio 2005 中解決,並引進 主版頁面。 主版頁面是一種特殊類型的 ASP.NET 頁面,可定義整個網站標記和相關聯內容頁面定義其自定義標記的區域。 如我們在步驟 1 中所見,這些區域是由 ContentPlaceHolder 控件所定義。 ContentPlaceHolder 控件只會代表主版頁面控件階層中的位置,其中自定義內容可由內容頁面插入。

注意

自 ASP.NET 2.0 版以來,主版頁面的核心概念和功能尚未變更。 不過,Visual Studio 2008 提供巢狀主版頁面的設計時間支援,這是 Visual Studio 2005 中缺少的功能。 我們將在未來的教學課程中查看使用巢狀主版頁面。

圖 2 顯示 www.asp.net 主版頁面的外觀。 請注意,主版頁面會定義通用的全網站版面配置 - 每個頁面頂端、底部和右上方的標記,以及中間的 ContentPlaceHolder,其中每個個別網頁的唯一內容位於其中。

主版頁面定義可依內容頁面編輯的 Site-Wide 版面配置和區域

圖 02:主版頁面定義可依內容頁面編輯的 Site-Wide 版面配置和區域

定義主版頁面之後,即可透過複選框的刻度系結至新的 ASP.NET 頁面。 這些 ASP.NET 頁面 - 稱為內容頁面 - 包含每個主版頁面 ContentPlaceHolder 控件的內容控制件。 透過瀏覽器瀏覽內容頁面時,ASP.NET 引擎會建立主版頁面的控制階層,並將內容頁面的控制階層插入適當的位置。 這個合併的控件階層會轉譯,產生的 HTML 會傳回給使用者的瀏覽器。 因此,內容頁面會發出在 ContentPlaceHolder 控件以外的主版頁面中定義的通用標記,以及在其本身內容控件內定義的頁面特定標記。 圖 3 說明此概念。

要求的頁面標記會合併到主版頁面

圖 03:要求頁面的標記會合併到主版頁面 (按兩下即可檢視大小完整的影像)

既然我們已討論主版頁面的運作方式,讓我們看看如何使用Visual Web Developer建立主版頁面和相關聯的內容頁面。

注意

為了達到最廣泛的對象,我們將使用 Microsoft 免費版本的 Visual Studio 2008 Visual Studio 2008、Visual Web Developer 2008 ASP.NET 3.5 建立我們在整個教學課程系列中建置的 ASP.NET 網站。 如果您尚未升級至 ASP.NET 3.5,別擔心 - 這些教學課程中討論的概念與 ASP.NET 2.0 和 Visual Studio 2005 相同。 不過,某些示範應用程式可能會使用 .NET Framework 3.5 版的新功能;使用 3.5 版特定功能時,我包含一個附注,討論如何在 2.0 版中實作類似的功能。 請記住,每個教學課程中可供下載的示範應用程式是以 .NET Framework 3.5 版為目標,這會導致Web.config檔案包含 3.5 個特定組態元素,以及 ASP.NET 頁面程式代碼後置類別中語句中 3.5 個特定命名空間using的參考。 簡短說明,如果您尚未在計算機上安裝 .NET 3.5,則可下載的Web應用程式將無法運作,而不需要先從 Web.config移除3.5特定的標記。 如需本主題的詳細資訊,請參閱 Web.config 檔案 。 您也需要移除 using 參考 3.5 特定命名空間的語句。

步驟 1:建立主版頁面

在我們可以探索建立和使用主版和內容頁面之前,我們必須先有 ASP.NET 網站。 首先,建立新的文件系統型 ASP.NET 網站。 若要完成此動作,請啟動 Visual Web Developer,然後移至 [檔案] 選單,然後選擇 [新增網站],顯示 [新增網站] 對話框 (請參閱圖 4) 。 選擇 ASP.NET 網站樣本、將 [位置] 下拉式清單設定為 [檔案系統]、選擇要放置網站的資料夾,並將語言設定為 C# 。 這會建立具有 ASP.NET 頁面、App_Data資料夾和Web.config檔案的新網站Default.aspx

注意

Visual Studio 支援兩種專案管理模式:網站專案和 Web 應用程式專案。 網站專案缺少項目檔,而 Web 應用程式專案則模擬 Visual Studio .NET 2002/2003 中的項目架構 - 它們包含項目檔,並將專案的原始程式碼編譯成單一元件,並放在 /bin 資料夾中。 Visual Studio 2005 一開始只支援網站專案,雖然 Web 應用程式專案模型 是以 Service Pack 1 重新引進;Visual Studio 2008 提供這兩個專案模型。 不過,Visual Web Developer 2005 和 2008 版本僅支援網站專案。 我在本教學課程系列中使用網站專案模型進行示範。 如果您使用非 Express 版本,而想要改用 Web 應用程式專案模型,請放心地這麼做,但請注意,您在畫面上看到的內容與您必須採取的步驟與這些教學課程中提供的指示之間可能會有一些差異。

建立新檔案 System-Based 網站

圖 04:建立新的檔案 System-Based 網站 (按兩下即可檢視完整大小的映像)

接下來,以滑鼠右鍵按兩下 [專案名稱],選擇 [新增專案],然後選取 [主版頁面] 範本,將主版頁面新增至根目錄中的網站。 請注意,主版頁面結尾為 副檔名稱 .master。 將此新主版頁面 Site.master 命名為 ,然後按兩下 [新增]。

將名為 Site.master 的主版頁面新增至網站

圖 05:將名為 的主 Site.master 版頁面新增至網站 (按一下以檢視大小完整的影像)

透過 Visual Web Developer 新增主版頁面檔案會建立具有下列宣告式標記的主版頁面:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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">
 <title>Untitled Page</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 指示詞。 指示@Master詞類似於@Page出現在 ASP.NET 頁面中的 指示詞。 它會定義伺服器端語言 (C#) ,以及主版頁面程式代碼後置類別的位置和繼承相關信息。

DOCTYPE和頁面的宣告式標記會出現在 @Master 指示詞下方。 此頁面包含靜態 HTML 以及四個伺服器端控制項:

  • Web Form (<form runat="server">) - 因為所有 ASP.NET 頁面通常都有網頁窗體,而且主版頁面可能包含必須出現在 Web Form 中的 Web 控件 , 請務必將 Web Form 新增至主版頁面 (,而不是將 Web Form 新增至每個內容頁面) 。
  • 名為 ContentPlaceHolder1的 ContentPlaceHolder 控制件- 此 ContentPlaceHolder 控制件會出現在 Web 窗體內,並做為內容頁面使用者介面的區域。
  • 伺服器端 <head> 元素 - 元素 <head> 具有 runat="server" 屬性,可透過伺服器端程式代碼加以存取。 專案 <head> 會以這種方式實作,以便以程序設計方式新增或調整頁面的標題和其他 <head>相關標記。 例如,設定 ASP.NET 頁面 Title 的 屬性會變更 <title> 伺服器控件呈現的專案 <head>
  • 名為 head的 ContentPlaceHolder 控制件- 此 ContentPlaceHolder 控制件會出現在<head>伺服器控制項內,可用來宣告方式將內容新增至 <head> 元素。

這個預設主版頁面宣告式標記可作為設計您自己的主版頁面的起點。 您可以隨意編輯 HTML,或將其他 Web 控件或 ContentPlaceHolders 新增至主版頁面。

注意

設計主版頁面時,請確定主版頁面包含網頁窗體,而且至少有一個 ContentPlaceHolder 控件會出現在此 Web Form 中。

建立簡單網站配置

讓我們展開 Site.master預設的宣告式標記,以建立網站配置,其中所有頁面共用:通用標頭、具有導覽、新聞和其他全網站內容的左側數據行,以及顯示「由 Microsoft ASP.NET 提供電源」圖標的頁尾。 圖 6 顯示透過瀏覽器檢視其中一個內容頁面時主版頁面的最終結果。 圖 6 中的紅色圓圈區域是流覽 () Default.aspx 頁面所特有;其他內容定義於主版頁面中,因此在所有內容頁面上都一致。

主版頁面會定義頂端、左側和底部部分的標記

圖 06:主版頁面定義上方、左側和底部部分的標記, (按兩下即可檢視大小完整的影像)

若要達到圖 6 所示的網站配置,請從更新 Site.master 主版頁面開始,使其包含下列宣告式標記:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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">
 <title>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
</body>
</html>

主版頁面的配置是使用一系列 <div> HTML 元素來定義。 topContent<div>包含出現在每個頁面頂端的標記,而 mainContentleftContentfooterContent<div> 分別用來顯示頁面的內容、左欄,以及分別由 Microsoft ASP.NET 提供電源的圖示。 除了新增這些專案<div>之外,我也會將主要 ContentPlaceHolder 控件的 屬性重新ContentPlaceHolder1命名IDMainContent

這些不同<div>元素的格式和版面配置規則會在級聯 Stylesheet (CSS) 檔案中拼字,該檔案Styles.css是透過<主版頁面<前端>元素中的連結>元素所指定。 這些各種規則會定義上述每個 <div> 元素的外觀和風格。 例如,顯示「主版頁面教學課程」文字和連結的專案 topContent<div> ,其格式設定規則如下 Styles.css

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

如果您遵循您的計算機,您必須下載本教學課程隨附的程式代碼,並將檔案新增 Styles.css 至您的專案。 同樣地,您也需要建立名為 Images 的資料夾,並將下載的示範網站中的「Microsoft ASP.NET」圖示複製到您的專案。

注意

CSS 和網頁格式的討論超出本文的範圍。 如需 CSS 的詳細資訊,請參閱 W3Schools.comCSS 教學課程。 我們也建議您下載本教學課程隨附的程序代碼,並在 中 Styles.css 播放 CSS 設定,以查看不同格式規則的效果。

使用現有的設計範本建立主版頁面

多年來,我已為小型到中型公司建置數個 ASP.NET Web 應用程式。 我的某些用戶端有想要使用的現有網站配置;其他人雇用了一個合格的圖形設計工具。 一些我已委派我設計網站版面配置。 如圖 6 所述,讓程式設計人員設計網站的版面配置,通常如同您的醫生執行稅金一樣。

幸運的是,有許多提供免費 HTML 設計範本的網站 - Google 針對「免費網站範本」一詞傳回超過六百萬個結果。我的最愛其中一個是 OpenDesigns.org。找到您想要的網站範本之後,請將 CSS 檔案和影像新增至您的網站專案,並將範本的 HTML 整合到主版頁面中。

注意

Microsoft 也提供許多 免費 ASP.NET 設計開始套件範本 ,這些範本會整合到 Visual Studio 的 [新增網站] 對話框中。

步驟 2:建立相關聯的內容頁面

建立主版頁面之後,我們就可以開始建立系結至主版頁面 ASP.NET 頁面。 這類頁面稱為 內容頁面

讓我們將新的 ASP.NET 頁面新增至專案,並將其系結至 Site.master 主版頁面。 以滑鼠右鍵按兩下 方案總管中的項目名稱,然後選擇 [新增專案] 選項。 選取 Web 窗體範本,輸入名稱 About.aspx,然後核取 [選取主版頁面] 複選框,如圖 7 所示。 這麼做會顯示 [選取主版頁面] 對話框, (從中查看圖 8) ,您可以從中選擇要使用的主版頁面。

注意

如果您使用 Web 應用程式專案模型建立 ASP.NET 網站,而不是網站專案模型,您將不會在圖 7 所示的 [新增專案] 對話方塊中看到 [選取主版頁面] 複選框。 若要在使用 Web 應用程式專案模型時建立內容頁面,您必須選擇 Web 內容表單範本,而不是 Web 窗體範本。 選取 Web 內容表單板並按下 [新增] 之後,如圖 8 所示的 [選取主版頁面] 對話框相同。

新增內容頁面

圖 07:新增內容頁面 (按一下以檢視大小完整的影像)

選取 Site.master 主版頁面

圖 08:選取 Site.master 主版頁面 (按下即可檢視完整大小的影像)

如下列宣告式標記所示,新的內容頁面包含 @Page 指示詞,指向其主版頁面,以及每個主版頁面的 ContentPlaceHolder 控件的內容控件。

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

注意

在步驟 1 的一節中,已重新命名 ContentPlaceHolder1MainContent。 如果您未以相同方式重新命名此 ContentPlaceHolder 控件 ID ,內容頁面的宣告式標記會與上述標記稍有不同。 也就是說,第二個內容控件 ContentPlaceHolderID 會反映 ID 主版頁面中對應 ContentPlaceHolder 控件的 。

轉譯內容頁面時,ASP.NET 引擎必須將頁面的內容控件與其主版頁面的 ContentPlaceHolder 控件結合。 ASP.NET 引擎會從 @Page 指示 MasterPageFile 詞的 屬性決定內容頁面的主版頁面。 如上述標記所示,此內容頁面會繫結至 ~/Site.master

因為主版頁面有兩個 ContentPlaceHolder 控件, headMainContent - Visual Web 開發人員產生兩個內容控件。 每個內容控制項都會透過其 ContentPlaceHolderID 屬性參考特定的 ContentPlaceHolder。

主版頁面在先前的網站全網站範本技術上具有其設計時間支援。 圖 9 顯示 About.aspx 透過 Visual Web 開發人員的設計檢視時的內容頁面。 請注意,雖然主版頁面內容可見,但呈現灰色且無法修改。 不過,對應至主版頁面 ContentPlaceHolders 的內容控件是可編輯的。 就像任何其他 ASP.NET 頁面一樣,您可以透過 [來源] 或 [設計] 檢視新增 Web 控件來建立內容頁面的介面。

內容頁面的設計檢視會顯示 Page-Specific 和主版頁面內容

圖 09:內容頁面的設計檢視會顯示 Page-Specific 和主版頁面內容, (按兩下即可檢視大小完整的影像)

將標記和 Web 控件新增至內容頁面

花點時間建立頁面的 About.aspx 一些內容。 如您在圖 10 中所見,我輸入了「關於作者」標題和幾個文字段落,但您也可以隨意新增 Web 控件。 建立此介面之後,請透過瀏覽器瀏覽 About.aspx 頁面。

流覽透過瀏覽器About.aspx頁面

圖 10:瀏覽 About.aspx 瀏覽器的頁面 (按兩下即可檢視大小完整的影像)

請務必瞭解要求的內容頁面及其相關聯的主版頁面會在網頁伺服器上完全合併並轉譯。 然後,終端使用者的瀏覽器會傳送產生的融合 HTML。 若要確認這一點,請移至 [檢視] 功能表並選擇 [來源],以檢視瀏覽器收到的 HTML。 請注意,在單一視窗中沒有畫面格或任何其他特殊技術可用來顯示兩個不同的網頁。

將主版頁面系結至現有的 ASP.NET 頁面

如我們在此步驟中所見,將新的內容頁面新增至 ASP.NET Web 應用程式,就像核取 [選取主版頁面] 複選框並挑選主版頁面一樣簡單。 不幸的是,將現有的 ASP.NET 頁面轉換成主版頁面並不簡單。

若要將主版頁面系結至現有的 ASP.NET 頁面,您需要執行下列步驟:

  1. MasterPageFile 屬性新增至 ASP.NET 頁面的 @Page 指示詞,並將其指向適當的主版頁面。
  2. 在主版頁面中新增每個 ContentPlaceHolders 的內容控制件。
  3. 選擇性地剪下並貼上 ASP.NET 頁面的現有內容到適當的 [內容] 控件。 我在這裡說「選擇性」,因為 ASP.NET 頁面可能包含已經由主版頁面表示的標記,例如 DOCTYPE<html> 元素和 Web Form。

如需此程式的逐步指示以及螢幕快照,請參閱 Scott Guthrie使用主版頁面和網站導覽 教學課程。 The "Update Default.aspx and DataSample.aspx to use the Master Page" section details these steps.

因為建立新的內容頁面比將現有的 ASP.NET 頁面轉換成內容頁面更為容易,所以每當您建立新的 ASP.NET 網站時,建議您將主版頁面新增至網站。 將所有新的 ASP.NET 頁面系結至這個主版頁面。 如果初始主版頁面非常簡單或純文本,請不要擔心;您可以稍後更新主版頁面。

注意

建立新的 ASP.NET 應用程式時,Visual Web Developer 會新增 Default.aspx 未系結至主版頁面的頁面。 如果您想要練習將現有的 ASP.NET 頁面轉換成內容頁面,請繼續使用 Default.aspx來執行此動作。 或者,您可以刪除 Default.aspx 再重新新增它,但這次核取 [選取主版頁面] 複選框。

步驟 3:更新主版頁面的標記

主版頁面的其中一個主要優點是,單一主版頁面可用來定義網站上許多頁面的整體版面配置。 因此,更新網站的外觀和操作需要更新單一檔案 - 主版頁面。

為了說明此行為,讓我們更新主版頁面,以在左欄頂端包含目前的日期。 將名為 的leftContent<div>標籤DateDisplay新增至 。

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

接下來,建立 Page_Load 主版頁面的事件處理程式,並新增下列程序代碼:

protected void Page_Load(object sender, EventArgs e)
{
    DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd");
}

上述程式代碼會將 Label 的 Text 屬性設定為格式化為星期的日期與時間、月份的名稱,以及兩位數的日期 (請參閱圖 11) 。 透過這項變更,請重新流覽其中一個內容頁面。 如圖 11 所示,產生的標記會立即更新,以包含主版頁面的變更。

檢視內容頁面時,會反映主版頁面的變更

圖 11:檢視內容頁面時會反映主版頁面的變更, (按兩下即可檢視完整大小的影像)

注意

如本範例所示,主版頁面可能包含伺服器端 Web 控件、程式代碼和事件處理程式。

摘要

主版頁面可讓 ASP.NET 開發人員設計容易更新的一致全網站版面配置。 建立主版頁面及其相關聯的內容頁面,就像建立標準 ASP.NET 頁面一樣簡單,因為Visual Web Developer提供豐富的設計時間支援。

在本教學課程中建立的主版頁面範例有兩個 ContentPlaceHolder 控制項和 headMainContent。 不過,我們只在內容頁面中指定 ContentPlaceHolder 控件的 MainContent 標記。 在下一個教學課程中,我們將探討在內容頁面中使用多個內容控件。 我們也瞭解如何在主版頁面中定義內容控制件的預設標記,以及如何使用主版頁面中定義的預設標記,以及從內容頁面提供自定義標記。

快樂的程序設計!

深入閱讀

如需本教學課程中所討論之主題的詳細資訊,請參閱下列資源:

關於作者

Scott Mitchell 是多個 ASP/ASP.NET 書籍的作者,以及 4GuysFromRolla.com 的建立者,自 1998 年起就與 Microsoft Web 技術合作。 Scott 是獨立的顧問、訓練者和作者。 他的最新書籍是 Sams 在 24 小時內自行 ASP.NET 3.5。 Scott 可以透過 mitchell@4GuysFromRolla.com 在 上的部落格或透過 http://ScottOnWriting.NET其部落格來連線。

特別感謝

想要檢閱即將推出的 MSDN 文章嗎? 如果是,請將一行放在 mitchell@4GuysFromRolla.com