母版MasterPage.master文件 的應用
雖然母版頁和內容頁功能強大，但是其創建和應用過程並不複雜。本節和下一節將以創建如圖1所示示例爲例，向讀者詳細介紹，使用Visual Stuido 2005創建母版頁和內容頁的方法以及相關知識。本節的重點是創建母版頁的方法。
母版頁中包含的是頁面公共部分，即網頁模板。因此，在創建示例之前，必須判斷哪些內容是頁面公共部分，這就需要從分析頁面結構開始。圖1所示顯示的是一 個頁面截圖。在下文中，暫稱該頁面名爲Index.aspx，並且假設其爲某網站中的一頁。通過分析可知，該頁面的結構如圖5所示。
![]()
圖5 頁面結構圖
頁面Index.aspx由4個部分組成：頁頭、頁尾、內容1和內容2。其中頁頭和頁尾是Index.aspx所在網站中頁面的公共部分，網站中許多頁 面都包含相同的頁頭和頁尾。內容1和內容2是頁面的非公共部分，是Index.aspx頁面所獨有的。結合母版頁和內容頁的有關知識可知，如果使用母版頁 和內容頁來創建頁面Index.aspx，那麼必須創建一個母版頁MasterPage.master和一個內容頁Index.aspx。其中母版頁包含 頁頭和頁尾等內容，內容頁中則包含內容1和內容2。
這個專題中主要講解的是MasterPage，給剛剛建立的工程添加一個MasterPage：
![]()
MasterPage以master爲後綴名，我們剛剛建立了一個MasterPage.master文件，該文件有如下內容：
![]()
這是一個很標準的網頁頁面佈局，下一步就把Contentplaceholder放進去“佔地盤”“：
![]()
放完後我們把各個部分的ContentPlaceHolder重新命名一次，更改後的代碼如下：
在Design狀態下我們可以看到如下效果：
![]()
![]()
此時點擊Add後會談出下面這個窗口：
![]()
![]()
在PS4.0中的應用.
![]()
如圖所示:在在PS4.0中所使用的MasterPage.master.圖中所顯示的是content控件
![]()
![]()
母版頁中包含的是頁面公共部分，即網頁模板。因此，在創建示例之前，必須判斷哪些內容是頁面公共部分，這就需要從分析頁面結構開始。圖1所示顯示的是一 個頁面截圖。在下文中，暫稱該頁面名爲Index.aspx，並且假設其爲某網站中的一頁。通過分析可知，該頁面的結構如圖5所示。
圖5 頁面結構圖
頁面Index.aspx由4個部分組成：頁頭、頁尾、內容1和內容2。其中頁頭和頁尾是Index.aspx所在網站中頁面的公共部分，網站中許多頁 面都包含相同的頁頭和頁尾。內容1和內容2是頁面的非公共部分，是Index.aspx頁面所獨有的。結合母版頁和內容頁的有關知識可知，如果使用母版頁 和內容頁來創建頁面Index.aspx，那麼必須創建一個母版頁MasterPage.master和一個內容頁Index.aspx。其中母版頁包含 頁頭和頁尾等內容，內容頁中則包含內容1和內容2。
這個專題中主要講解的是MasterPage，給剛剛建立的工程添加一個MasterPage：
MasterPage以master爲後綴名，我們剛剛建立了一個MasterPage.master文件，該文件有如下內容：
1 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml" >
10
11 <head runat="server">
12
13 <title>Untitled Page</title>
14
15 </head>
16
17 <body>
18
19 <form id="form1" runat="server">
20
21 <div>
22
23 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
24
25 </asp:contentplaceholder>
26
27 </div>
28
29 </form>
30
31 </body>
32
33 </html>
34
粗看還以爲這是一個普通的 aspx頁面，其實不是，最上面的<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml" >
10
11 <head runat="server">
12
13 <title>Untitled Page</title>
14
15 </head>
16
17 <body>
18
19 <form id="form1" runat="server">
20
21 <div>
22
23 <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
24
25 </asp:contentplaceholder>
26
27 </div>
28
29 </form>
30
31 </body>
32
33 </html>
34
表面明這是一個master文件，同時在頁面中你可以看到用<div>包裹着的一個asp控件
Contentplaceholder，這個叫“內容佔位符”，他的作用就是先通過div或者table進行分割，然後“霸佔”一個地方，聲明此地有“主”了，不過主人不是Contentplaceholder，而是後面會說道到的Content控件。
注意：<div>一般通過css樣式表來控制頁面的佈局，如cnblogs裏面的很多皮膚都是如此，爲了不把問題複雜化，我還是用table。在Design狀態下畫出如下表格(vs.net 2005 的Design功能真的好用很多^_^)：
這是一個很標準的網頁頁面佈局，下一步就把Contentplaceholder放進去“佔地盤”“：
放完後我們把各個部分的ContentPlaceHolder重新命名一次，更改後的代碼如下：
1 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml" >
10
11 <head runat="server">
12
13 <title>Untitled Page</title>
14
15 </head>
16
17 <body>
18
19 <form id="form1" runat="server">
20
21 <table width="60%">
22
23 <tr>
24
25 <td colspan="3" height="80">
26
27 <asp:ContentPlaceHolder ID="TopContent" runat="server">
28
29 </asp:ContentPlaceHolder>
30
31 </td>
32
33 </tr>
34
35 <tr>
36
37 <td height="300" width="25%">
38
39 <asp:ContentPlaceHolder ID="LeftContent" runat="server">
40
41 </asp:ContentPlaceHolder>
42
43 </td>
44
45 <td>
46
47 <asp:ContentPlaceHolder ID="CenterContent" runat="server">
48
49 </asp:ContentPlaceHolder>
50
51 </td>
52
53 <td width="25%">
54
55 <asp:ContentPlaceHolder ID="RightContent" runat="server">
56
57 </asp:ContentPlaceHolder>
58
59 </td>
60
61 </tr>
62
63 <tr>
64
65 <td colspan="3" style="height: 80px">
66
67 <asp:ContentPlaceHolder ID="CopyrightContent" runat="server">
68
69 </asp:ContentPlaceHolder>
70
71 </td>
72
73 </tr>
74
75 </table>
76
77 </form>
78
79 </body>
80
81 </html>
82
2
3
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
6
7
8
9 <html xmlns="http://www.w3.org/1999/xhtml" >
10
11 <head runat="server">
12
13 <title>Untitled Page</title>
14
15 </head>
16
17 <body>
18
19 <form id="form1" runat="server">
20
21 <table width="60%">
22
23 <tr>
24
25 <td colspan="3" height="80">
26
27 <asp:ContentPlaceHolder ID="TopContent" runat="server">
28
29 </asp:ContentPlaceHolder>
30
31 </td>
32
33 </tr>
34
35 <tr>
36
37 <td height="300" width="25%">
38
39 <asp:ContentPlaceHolder ID="LeftContent" runat="server">
40
41 </asp:ContentPlaceHolder>
42
43 </td>
44
45 <td>
46
47 <asp:ContentPlaceHolder ID="CenterContent" runat="server">
48
49 </asp:ContentPlaceHolder>
50
51 </td>
52
53 <td width="25%">
54
55 <asp:ContentPlaceHolder ID="RightContent" runat="server">
56
57 </asp:ContentPlaceHolder>
58
59 </td>
60
61 </tr>
62
63 <tr>
64
65 <td colspan="3" style="height: 80px">
66
67 <asp:ContentPlaceHolder ID="CopyrightContent" runat="server">
68
69 </asp:ContentPlaceHolder>
70
71 </td>
72
73 </tr>
74
75 </table>
76
77 </form>
78
79 </body>
80
81 </html>
82
在Design狀態下我們可以看到如下效果：
有了MasterPage後我們該如何使用？光上面所說的根本解決不了任何問題。下面看看如何使用：
首先建立一個新的aspx頁面，記得把Select Master Page項選上：
此時點擊Add後會談出下面這個窗口：
由於目前只有一個MasterPage文件，所以只能選擇它，確定後新的Default2.aspx頁面被建立，這個時候你會發現Default2.aspx頁面中沒有標準的html頁面的格式，取而代之的是asp.net控件Content，Default2.aspx中的代碼如下：
1 <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
2
3 <asp:Content ID="Content1" ContentPlaceHolderID="TopContent" Runat="Server">
4
5 </asp:Content>
6
7 <asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" Runat="Server">
8
9 </asp:Content>
10
11 <asp:Content ID="Content3" ContentPlaceHolderID="CenterContent" Runat="Server">
12
13 </asp:Content>
14
15 <asp:Content ID="Content4" ContentPlaceHolderID="RightContent" Runat="Server">
16
17 </asp:Content>
18
19 <asp:Content ID="Content5" ContentPlaceHolderID="CopyrightContent" Runat="Server">
20
21 </asp:Content>
22
23
24
2
3 <asp:Content ID="Content1" ContentPlaceHolderID="TopContent" Runat="Server">
4
5 </asp:Content>
6
7 <asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" Runat="Server">
8
9 </asp:Content>
10
11 <asp:Content ID="Content3" ContentPlaceHolderID="CenterContent" Runat="Server">
12
13 </asp:Content>
14
15 <asp:Content ID="Content4" ContentPlaceHolderID="RightContent" Runat="Server">
16
17 </asp:Content>
18
19 <asp:Content ID="Content5" ContentPlaceHolderID="CopyrightContent" Runat="Server">
20
21 </asp:Content>
22
23
24
注意觀察一下，在<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>裏多了一個MasterPageFile="~/MasterPage.master"項，這表明這個頁面使用MasterPage.master
,該文件存放在與該頁面相同的目錄下(當有多個MasterPage文件時你也可以新建立一個目錄方便管理)。記得剛纔在MasterPage.master中的設置嗎，我們定義了五個ContentPlaceHolder，ID分別是TopContent，LeftContent，CenterContent，RightContent，CopyrightContent，在Default2.aspx頁面下的Content控件裏，有一個屬性就是ContentPlaceHolderID，該字段表明該Content控件中的內容代替ID指向的ContentPlaceHolder佔位控件，這就是真的“霸主”了。這樣一來，頁面佈局就使用MasterPage.master中的，而內容就使用Default2.aspx中Content控件下的，因此你在Default2.aspx 中找不到Html頁面的基本格式標記，如<head>、<body>。看一下Design下Default2.aspx會是什麼樣子：
和MasterPage.master很像，但又不同，因爲除了Content控件佔用的地方是可以編輯的外其他地方都是不可以編輯的。
現在可以總結MasterPage的作用了，MasterPage其實是一種模板，它可以讓你快速的建立相同頁面佈局而內部不同的網頁，如果一個網站有多個MasterPage，那麼新建aspx文件的時候就可以選擇需要實現頁面佈局的MasterPage。另外，在你沒有使用MasterPage之前，如果N個相同的頁面佈局需要改動成另外一個樣式，那麼你就要做很多無聊而又不得不做的工作，對N個頁面進行一一更改，如果使用了MasterPage，你只要改動一個頁面也就是MasterPage文件就可以了。還有，你是否發現你要要部署的web程序越來越大，使用MasterPage在一定程度上會減小web程序的大小，因爲所有的重複的html標記都只有一個版本。
在PS4.0中的應用.
如圖所示:在在PS4.0中所使用的MasterPage.master.圖中所顯示的是content控件
在SignIn.aspx中的應用.
代碼如下:
<%@ Page AutoEventWireup="true" Language="C#" MasterPageFile="~/MasterPage.master"
Title="Sign In" %>
<asp:Content ID="cntPage" runat="Server" ContentPlaceHolderID="cphPage">
在NewUser.aspx中的使用
代碼如下:
<%@ Page AutoEventWireup="true" Language="C#" MasterPageFile="~/MasterPage.master" Title="New User" %>
<asp:Content ID="cntPage" ContentPlaceHolderID="cphPage" Runat="Server" EnableViewState="false">