逐步解說:在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面
更新:2007 年 11 月
本逐步解說說明如何建立主版頁面和數個內容頁面。主版頁面可讓您建立頁面配置 (範本頁面),然後建立個別頁面,以包含在執行階段與主版頁面合併的內容。如需主版頁面的詳細資訊,請參閱 ASP.NET 主版頁面概觀。
逐步解說將說明的工作包括:
建立主版頁面。
建立您要在主版頁面中顯示其內容的 ASP.NET Web 網頁。
執行主版頁面來顯示不同內容。
在執行階段選取主版頁面。
必要條件
若要完成這個逐步解說,您必須要有:
Visual Studio 或 Microsoft Visual Web Developer Express 版。
.jpg、.gif 或其他圖形檔,可以在主版頁面上做為商標。建議商標的寬度不要超過 48 像素。不過,是否顯示商標是選擇性的作法,而且圖形的具體大小對這個逐步解說而言並不是非常重要。
建立網站
如果您已經在 Visual Web Developer 中建立了網站 (例如,藉由遵循 逐步解說:在 Visual Web Developer 中建立基本 Web 網頁 中的步驟),可以使用該網站,並繼續進行下一節 (建立主版頁面) 的步驟。否則,依照下列這些步驟建立新的網站和 Web 網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上,按一下 [新網站]。
[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方,按一下 [ASP.NET 網站]。
在 [位置] 方塊中,輸入您想要用來保存網站頁面的資料夾名稱。
例如,輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中,請按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和名稱為 Default.aspx 的新頁面。
建立主版頁面
主版頁面是您網頁之外觀的範本。在本節中,您首先將建立主版頁面。然後,您將使用表格,配置主版頁面,讓網站的每個網頁上都顯示功能表、商標和頁尾 (Footer)。您還將使用內容預留位置,它是主版頁面中的區域,可以內容頁面中的資訊取代。
若要建立主版頁面
在 [方案總管] 中,以滑鼠右鍵按一下網站名稱,然後按一下 [加入新項目]。
在 [Visual Studio 安裝的範本] 下,按一下 [主版頁面]。
在 [名稱] 方塊中,輸入 [Master1]。
選取 [將程式碼置於個別檔案中] 核取方塊。
注意事項: 本逐步解說假設您對所有網頁都使用程式碼後置 (Code-Behind) 的檔案。如果您使用單一檔案 ASP.NET Web 網頁,則本逐步解說中說明的程式碼也會起作用,但會顯示在 [原始碼] 檢視中,而不是個別程式碼檔案中。
在 [語言] 清單中,按一下您想要的程式語言,再按 [加入]。
新的主版頁面就會在 [原始碼] 檢視中開啟。
在網頁的上方是 @ Master 宣告,而不是通常處於 ASP.NET 網頁上方的 @ Page 宣告。網頁的主體包含 ContentPlaceHolder 控制項,主版頁面的該區域是可取代內容在執行階段與內容頁面合併的位置。稍後在本逐步解說中,您將會更多地使用內容預留位置。
配置主版頁面
主版頁面會定義網站中網頁的外觀。它可以包含靜態 (Static) 文字和控制項的任何組合。主版頁面還可包含一個或多個內容預留位置,以指定顯示網頁時將出現動態內容的位置。
在本逐步解說中,您將使用表格來協助您在網頁上定位項目。您將從建立版面配置表格以保留主版頁面項目開始。稍後在本節中,您將定位已在網頁上的內容預留位置控制項。
若要建立主版頁面的版面配置表格
在 [原始碼] 檢視中選取 Master1.master 檔案後,將用於驗證的目標結構描述設為 Microsoft Internet Explorer 6.0。若要設定這個值,您可以使用工具列上的下拉清單,或從 [工具] 功能表選取 [選項],然後按一下 [驗證]。
切換至 [設計] 檢視。
從 [屬性] 視窗頂端的下拉清單中,選取 [DOCUMENT],然後將 [背景色彩] 設為特殊色彩 (例如,藍色)。
您選取的色彩並不重要。稍後在本逐步解說中,您將建立沒有色彩的第二個主版頁面,以與此處選取的主版頁面對比。
按一下您要在其中放置版面配置表格的網頁。
注意事項: 不要將版面配置表格置於 ContentPlaceHolder 控制項中。
按一下 [表格] 功能表上的 [插入表格]。
在 [插入表格] 對話方塊中,建立具有三列一行的表格,然後按一下 [確定]。
將指標放置在表格的第二列上。
在 [表格] 功能表的 [修改] 子功能表中,按一下 [分割儲存格]。
在 [分割儲存格] 對話方塊中,選取 [分割為資料行],然後按一下 [確定]。
進行下列設定:
在中間的列中,按一下最左邊的欄,然後在 [屬性] 視窗中將其 [寬度] 設為 48。
按一下最上方的列,然後在 [屬性] 視窗中將其 [高度] 設為 48。
按一下最下方的列,然後在 [屬性] 視窗中將其 [高度] 設為 48。
注意事項: 您可以藉由拖曳表格儲存格框線或選取儲存格並在 [屬性] 視窗中設定值,設定寬度和高度。
選取表格中的所有儲存格,將 [背景色彩] 設為背景色彩以外的其他色彩,並將 [垂直對齊] 設為 [靠上]。
在配置表格版面之後,您可以將內容加入主版頁面,以顯示在所有網頁上。您可以將著作權訊息做為頁尾加入,然後加入功能表。如果您有可用的商標圖形,也可以將其加入。
若要將靜態內容加入主版頁面
按一下底部的儲存格,然後輸入 Copyright 2007 Contoso Inc. 之類的頁尾文字。
在 [工具箱] 中,從 [巡覽] 控制項群組將 Menu 控制項拖曳至頂部儲存格中。
遵循下列步驟以建立功能表:
將 Menu 控制項的 Orientation 屬性設定為 Horizontal。
按一下 Menu 控制項上的智慧標籤,再按 [功能表工作] 對話方塊中的 [編輯功能表項目]。
在 [項目] 下,按兩次 [加入根節點] 圖示,以加入兩個功能表項目:
按一下第一個節點,然後將 [Text] 設為 Home 並將 [href] 設為 Home.aspx。
按一下第二個節點,然後將 [Text] 設為 About 並將 [href] 設為 About.aspx。
按一下 [確定],以關閉 [功能表項目編輯器] 對話方塊。
如果您的可用圖形檔可用做商標,請遵循下列步驟,以將其置於主版頁面上:
您現在可以定位內容預留位置,以指定主版頁面在執行階段可顯示內容的位置。
若要加入內容預留位置
將 ContentPlaceHolder 控制項拖曳至中間靠右儲存格中。
控制項的 ID 屬性為 ContentPlaceholder1。您可以保留這個名稱或變更它。如果您變更該名稱,請記下名稱,因為您稍後需要知道該名稱。
儲存 Web 網頁。
建立主版頁面的內容
主版頁面會提供內容的範本。藉由建立與主版頁面關聯的 ASP.NET Web 網頁,您可定義主版頁面的內容。內容頁面是 ASP.NET Web 網頁的特殊形式,只包含要與主版頁面合併的內容。在內容頁面中,您可以加入要在使用者要求該網頁時顯示的文字和控制項。
在本逐步解說中,您將為主版頁面加入兩個具有內容的網頁。第一個是首頁,第二個是關於頁面。
若要建立首頁
在 [方案總管] 中,以滑鼠右鍵按一下網站名稱,再按 [加入新項目]。
請在 [Visual Studio 安裝的範本] 下方,選取 [Web Form]。
在 [名稱] 方塊中輸入 Home。
在 [語言] 清單中,按一下您想要的程式語言。
選取 [選擇主版頁面] 核取方塊,然後按一下 [加入]。
[選擇主版頁面] 對話方塊隨即出現。
按一下 [Master1.master],再按 [確定]。
會建立新的 .aspx 檔。網頁包含 @ Page 指示詞,以將目前網頁附加至具有 MasterPageFile 屬性的所選主版頁面,如下列程式碼範例中所示。
[Visual Basic]
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %>
[C#]
<%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>
網頁還包含您隨後將使用的 Content 控制項項目。
內容頁面沒有組成 ASP.NET Web 網頁的一般項目 (例如,html、body 或 form 項目)。而是,您只需加入要在主版頁面上顯示的內容,方法是取代在主版頁面中建立的預留位置區域。
若要將內容加入首頁
切換至 [設計] 檢視。
主版頁面中的 ContentPlaceHolder 控制項會顯示為新的內容頁面中的 Content 控制項。剩餘的主版頁面內容也會顯示,以便您可以檢視配置。不過,它會顯示為暗灰色 (Dimmed),因為您無法在編輯內容頁面時變更它。
從 [屬性] 視窗的下拉清單中,按一下 [DOCUMENT],然後將 [標題] 設為 Contoso 首頁。
您可以分別設定每個內容頁面的標題,以便在內容與主版頁面合併時會在瀏覽器中顯示正確的標題。標題資訊儲存在內容頁面的 @ Page 指示詞中。
在符合主版頁面之 ContentPlaceHolder1 的 Content 控制項中,輸入歡迎使用 Contoso 網站。
選取文字並選取 [工具箱] 上方之 [區塊格式] 下拉式清單中的 [標題 1] 以設定其格式。
按 ENTER,以在 Content 控制項 中建立新的空白行,然後輸入謝謝您造訪我們的網站。
您在此處加入的文字並不重要,您可以輸入任何文字,以協助您將這個網頁辨識為首頁。
儲存 Web 網頁。
您可以建立首頁的相同方式建立關於頁面。
若要建立關於頁面
使用與首頁的相同步驟,加入名為 About.aspx 的新內容頁面。
請確定將這個新網頁附加至 Master1.master 網頁的方式與對首頁的處理方式相同。
將網頁的標題變更為 Contoso 關於頁面。
在內容區域中,輸入關於 Contoso,然後將文字格式化為 [標題 1],方法是從 [工具箱] 上方的 [區塊格式] 下拉清單中選取 [標題 1]。
按 ENTER 建立新行,然後輸入自 1982 年始,Contoso 一直提供高品質的軟體服務。
儲存 Web 網頁。
測試網頁
您可以與對任何 ASP.NET Web 網頁採取的相同方式,執行這些網頁來進行測試。
若要測試網頁
切換至 Home.aspx 網頁,然後按 CTRL+F5。
ASP.NET 會將 Home.aspx 網頁中的內容與 Master1.master 網頁中的配置合併成單一網頁,並在瀏覽器中顯示結果網頁。請注意,網頁的 URL 為 Home.aspx,在瀏覽器中沒有主版頁面的參考。
按一下 [關於] 連結。
會顯示 About.aspx 網頁。它也與 Master1.master 網頁合併。
參考主版頁面成員
內容頁面中的程式碼可參考主版頁面上的成員,包括主版頁面上的任何公用屬性或方法以及任何控制項。在逐步解說的這個部分中,您將在主版頁面上建立屬性,然後在內容頁面中使用該屬性的值。前提是網站的公司名稱在主版頁面中儲存為屬性,且內容頁面中公司名稱的任何參考都以主版頁面屬性為基礎。
第一步是將屬性加入主版頁面。
若要將屬性加入主版頁面
切換至或開啟 Master1.master 網頁。
在 [方案總管] 中,以滑鼠右鍵按一下 [Master1.master],再按 [檢視程式碼],以開啟程式碼編輯器。
注意事項: 根據預設,Visual Web Developer 會建立使用程式碼後置 (Code-Behind) 模型的頁面。如果願意,您可使用單一檔案模型建立程式碼。如需詳細資訊,請參閱 ASP.NET Web 網頁程式碼模型。
在類別 (Class) 定義中,輸入下列程式碼。
[Visual Basic]
Public Property CompanyName() As String Get Return CType(ViewState("companyName"), String) End Get Set(ByVal Value As String) ViewState("companyName") = Value End Set End Property
[C#]
public String CompanyName { get { return (String) ViewState["companyName"]; } set { ViewState["companyName"] = value; } }
程式碼會為主版頁面建立名為 CompanyName 的屬性。值會儲存在檢視狀態中,以便它可在回傳之間保存。
在類別定義中 (而不是屬性程式碼中),加入下列程式碼。
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "Contoso" End Sub
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "Contoso"; }
對於這個範例,您將 CompanyName 屬性的值硬式編碼至網頁中。
您現在可以修改內容頁面,以使用主版頁面的 CompanyName 屬性。
若要在內容頁面中參考 CompanyName 屬性
切換至或開啟 Home.aspx 網頁。
切換至原始碼檢視。
在頁面的上方,於 @ Page 指示詞下,加入下列 @ MasterType 指示詞:
<%@ MasterType virtualpath="~/Master1.master" %>
指示詞會將內容頁面的 Master 屬性 (您將會短暫使用該屬性) 繫結至 Master1.master 網頁。
切換至 [設計] 檢視。
在 Content 控制項中,將文字變更為歡迎光臨網站。
在 [工具箱] 中,從 [標準] 群組將 Label 控制項拖曳至 Content 控制項上,並將其置於靜態文字之後,以便文字會如下所示:
歡迎光臨 [Label] 的網站
在 [方案總管] 中,以滑鼠右鍵按一下 [Home.aspx],再按 [檢視程式碼],以開啟程式碼編輯器。
在類別定義中,加入下列程式碼。
[Visual Basic]
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Load CompanyName.Text = Master.CompanyName End Sub
[C#]
void Page_Load(Object sender, EventArgs e) { CompanyName.Text = Master.CompanyName; }
內容頁面的 Master 屬性會傳回主版頁面的參考,如步驟 3 中加入之 @ MasterType 指示詞所定義那樣。
您現在可以測試內容頁面,以確定它是否正確參考主版頁面的 CompanyName 屬性。
若要測試主版頁面屬性的參考
切換至或開啟 Home.aspx 網頁,然後按 CTRL+F5 執行頁面。
網頁會在瀏覽器中顯示,且文字為歡迎光臨網站 Contoso
關閉瀏覽器。
切換至或開啟 Master1.master 程式碼後置的網頁。
變更 Page_Init 處理常式,以將其他公司名稱指派至屬性,如下列程式碼範例所示。
[Visual Basic]
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "New Company Name" End Sub
[C#]
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "New Company Name"; }
切換至 Home.aspx 網頁,然後按 CTRL+F5 再次執行它。
這時更新的公司名稱會顯示在網頁中。
注意
使用主版頁面時,您應該注意數個其他問題:
在實際的應用程式中,您可能會將資訊 (例如,公司名稱) 儲存在組態檔中,並在內容頁面中直接讀取它。不過,此處說明的案例簡單地示範了如何在內容頁面中參考主版頁面成員。
即使未包含 @ MasterType 指示詞,您也可以存取主版頁面上的成員。不過,若要做這樣的處理,您必須將 Page.Master 屬性轉型為適當的主版頁面類型 (如果網頁沒有主版頁面,則 Master 屬性為 null)。如需詳細資訊,請參閱以程式設計方式使用 ASP.NET 主版頁面。
您可以使用 Master.FindControls 方法,參考主版頁面上的控制項。如需詳細資訊,請參閱以程式設計方式使用 ASP.NET 主版頁面。
以動態方式變更主版頁面
在某些情況下,您可能要以動態方式變更主版頁面,也就是說,使用程式碼以設定內容頁面的主版頁面。例如,您可能要讓使用者從數個配置中選取並根據其偏好設定主版頁面。
在逐步解說的這個部分中,您將第二個主版頁面加入網站,然後建立可讓使用者在兩個主版頁面之間切換的按鈕。因為兩個主版頁面會很相似,所以您可以建立第一個主版頁面的複本,然後修改它以用做第二個主版頁面。
若要建立主版頁面的複本
在 [方案總管] 中,以滑鼠右鍵按一下 Master1.master,再按 [複製]。
以滑鼠右鍵按一下網站名稱,再按 [貼上]。
主版頁面會加入網站,名稱為 [複製 - master1.master]。
以滑鼠右鍵按一下 [複製 - master1.master],再按 [重新命名],然後將新的主版頁面命名為 Master2.master。
開啟 Master2.master 並在 @ Master 指示詞中,將 Master1 變更為 Master2。
完成的網頁指示詞會看起來與下列程式碼範例相同。
[Visual Basic]
<%@ Master Language="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>
[C#]
<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>
切換至 [設計] 檢視。
在 [屬性] 視窗中,於上方的下拉清單中,按一下 [DOCUMENT]。
清除 [BgColor] 屬性。
新的主版頁面外觀和作用與 Master1.master 相似,但沒有背景色彩。
開啟 Master2.master 的程式碼檔,然後將主版頁面之程式碼後置檔案中的類別名稱,從 Master1 變更為 Master2,以符合頁面之 Inherits 指示詞中 %@ Master % 屬性的值。
此程式碼將看起來與下列範例相同。
[Visual Basic]
Partial Class Master2
[C#]
public partial class Master2 : System.Web.UI.MasterPage
下一步是將按鈕加入每個主版頁面,以允許使用者選取替代主版頁面。
若要加入選取替代主版頁面的按鈕
切換至或開啟 Master2.master 網頁。
在 [工具箱] 中,從 [標準] 節點將 LinkButton 控制項拖曳至網頁上,並將其置於頂端表格儲存格中的功能表下方。
將按鈕的 Text 屬性設為繽紛。
按兩下按鈕,以建立其 Click 事件的處理常式,然後加入下列反白顯示的程式碼。
[Visual Basic]
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master1.master" Response.Redirect(Request.Url.ToString()) End Sub
[C#]
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master1.master"; Response.Redirect(Request.Url.ToString()); }
程式碼會將替代之主版頁面的檔案名稱載入持續性 (Persistent) 工作階段 (Session) 變數中,然後重新載入目前頁面 (Url 屬性會傳回參考目前頁面的 Uri 物件)。簡而言之,您會在使用主版頁面之名稱的內容頁面中建立程式碼。
切換至或開啟 [設計] 檢視中的 Master1.master 網頁。
如步驟 1 和 2 中所述,加入 LinkButton 控制項並將其 Text 屬性設為純文字。
按兩下 [Plain] 按鈕,以建立其 Click 事件的處理常式,然後加入下列反白顯示的程式碼。
[Visual Basic]
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master2.master" Response.Redirect(Request.Url.ToString()) End Sub
[C#]
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master2.master"; Response.Redirect(Request.Url.ToString()); }
除了這個程式碼會載入替代主版頁面之外,它與 Master2.master 網頁中按鈕的程式碼相同。
您現在可以在內容頁面中撰寫程式碼,以動態方式載入使用者已選取的主版頁面。
若要撰寫程式碼以動態方式選取主版頁面
切換至或開啟 About.aspx 網頁。
注意事項: 您已建立的首頁包含 @ MasterType 指示詞,其可有效地將首頁繫結至單一主版頁面 (Master1.master)。因此,您將無法將主版頁面以動態方式指派至首頁,而將改為使用已建立的其他網頁。
在 [方案總管] 中,以滑鼠右鍵按一下 [About.aspx],再按 [檢視程式碼],以開啟程式碼編輯器。
在類別定義中,加入下列程式碼。
[Visual Basic]
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.PreInit If Not Session("masterpage") Is Nothing Then Me.MasterPageFile = CType(Session("masterpage"), String) End If End Sub
[C#]
void Page_PreInit(Object sender, EventArgs e) { if(Session["masterpage"] != null) { this.MasterPageFile = (String) Session["masterpage"]; } }
程式碼會將目前網頁之 MasterPageFile 屬性的值設為工作階段變數中的值 (如果有的話)。這個程式碼必須在 Page_PreInit 處理常式中執行,它不能在 Page_PreInit 處理常式之後發生的任何處理常式 (例如,在 Page_Init 處理常式中) 中執行,因為必須建立主版頁面網頁才可以建立它的執行個體,之後才會發生任何進一步的初始化。
您現在可以測試動態主版頁面。
若要測試動態主版頁面
在 About.aspx 網頁中,按 CTRL+F5 執行頁面。
網頁會顯示在瀏覽器中,且已與其預設主版頁面 Master1.master 合併。
按一下 [純文字] 連結。
會重新顯示網頁,此時是與沒有背景色彩的 Master2.master 合併。
按一下 [繽紛] 連結。
會再次使用 Master1.master 顯示網頁。
注意
使用動態主版頁面時,您應該注意數個其他問題:
本節中變更主版頁面的案例只是將逐步解說集中在主版頁面上。在實際的應用程式中,您很可能要顯示配置的選項,然後使用設定檔儲存使用者的偏好設定。如需詳細資訊,請參閱 ASP.NET 設定檔屬性概觀。
您可以設定網站,以便所有網頁都使用相同主版頁面。您可能有數個網頁應使用替代主版頁面,這可在程式碼中以與本節逐步解說中顯示的類似方式設定。如需詳細資訊,請參閱 ASP.NET 主版頁面概觀中的「主版頁面範圍設定」。
您需要將 Home.aspx 網頁的程式碼加入要覆寫預設主版頁面的每個網頁中。
後續步驟
本逐步解說說明主版頁面的基本功能。您可能會想要實驗主版頁面的其他功能。例如,您可能要:
建立具有多個內容預留位置的主版頁面。然後您可使用顯示之每個網頁的內容填入一個或多個預留位置。
以預設內容定義內容預留位置。如果 ASP.NET Web 網頁不提供預留位置的內容,則主版頁面會顯示預設內容。
以程式設計方式存取內容頁面之主版頁面的成員。這可讓您在執行階段以動態方式變更主版頁面的外觀。如需詳細資訊,請參閱 HOW TO:參考 ASP.NET 主版頁面內容。
將裝置篩選與主版頁面搭配使用,以建立不同裝置的不同配置 (例如,一個配置用於瀏覽器,另一個配置用於特定類型的電話)。如需詳細資訊,請參閱 ASP.NET 裝置篩選概觀。
了解如何將主版頁面置於主版頁面內,以建立元件化的片段。如需詳細資訊,請參閱 巢狀 ASP.NET 主版頁面。