當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

MasterPage技术

發布時間：2025/3/20 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 MasterPage技术小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

看頁面覺得很奇怪，怎么在源代碼里看不到鏈接，效果上卻有鏈接，于是猜想是不是有類似jsp里面的include之類的方法，比如說當初我用的用戶自定義控件usercontrol之類的，結果沒發現，卻發現多了個<asp:content>然后沒有了<head><body>之類的。上網查了下，結果這是MasterPage技術，百度知道的介紹如下：

?????????? MasterPage其實是一種模板，它可以讓你快速的建立相同頁面布局而內部不同的網頁，如果一個網站有多個MasterPage，那么新建aspx文件的時候就可以選擇需要實現頁面布局的MasterPage。另外，在你沒有使用MasterPage之前，如果N個相同的頁面布局需要改動成另外一個樣式，那么你就要做很多無聊而又不得不做的工作，對N個頁面進行一一更改，如果使用了MasterPage，你只要改動一個頁面也就是MasterPage文件就可以了。還有，你是否發現你要要部署的web程序越來越大，使用MasterPage在一定程度上會減小web程序的大小，因為所有的重復的html標記都只有一個版本。

首先，我們需要打開VS2005，創建一個WebSite（這里要注意，是創建一個WebSite而不是創建一個Project）

然后，給剛建立的WebSite添加一個名字叫MasterPage.master的MasterPage，這個時候我們會看到該文件有如下內容：

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

<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>

看起來和一個普通的aspx頁面差不多，但是最上面的聲明<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>告訴我們，這個是一個模板頁，同時我們可以看到在<div></div>之間包含了一個asp的控件contentplaceholder，這個叫內容占位符，他的作用就是當你用<table>或者<div>進行布局后，用這個控件去“霸占”一個地方，而這個地方的主人，不是contentplaceholder，而是后面將提到的Content。

下面用<Table>做下示例

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

<!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>
</head>
<body>
<form id="form1" runat="server">
<table width="60%">
<tr>
<td colspan="3" style="height:80px">
<asp:ContentPlaceHolder ID="TopContent" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td style="width:30">
<asp:ContentPlaceHolder ID="LeftContent" runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="RightContent" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="3">
<asp:ContentPlaceHolder ID="FootContent" runat="server">
</asp:ContentPlaceHolder>

</td>
</tr>

</table>
</form>
</body>
</html>

這樣一個簡單的模板頁就創建好了，在這個模板頁上一共有4部分，一個是頂部的TopContent，一個是中間偏左的LeftContent，一個是中間偏右的RightContent，最后個就是底部的FootContent，4個部分均有一個ContentPlaceHolder。

有了一個創建好的MasterPage后，我們就可以進行下面的工作了，現在我們創建一個aspx頁面，名字叫Default2.aspx，注意創建的時候一定要勾上Select master page，創建的時候會有一個選擇模板的界面，由于只創建了一個模板，所以直接選擇MasterPage.master就行了，如果你創建了多個模板頁的話，就需要在這里進行選擇你當前頁面所需要加載的模板頁。

現在，我們有了一個基于模板的aspx頁面Default2.aspx，代碼如下：

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TopContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="RightContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="FootContent" Runat="Server">
</asp:Content>

很明顯，他和我們以往創建的aspx的頁面很不一樣，他沒有HTML的相關聲明，而且在頁面的頭部聲明<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>中，比普通的aspx頁面多了MasterPageFile="~/MasterPage.master"。在剛才MasterPage.master中的設置，我們定義了四個ContentPlaceHolder，ID分別是TopContent，LeftContent，RightContent，FootContent，在Default2.aspx頁面下的Content控件里，有一個屬性就是ContentPlaceHolderID，該字段表明該Content控件中的內容代替ID指向的ContentPlaceHolder占位控件，這就是真的“霸主”了。這樣一來，頁面布局就使用MasterPage.master中的，而內容就使用Default2.aspx中Content控件下的，因此你在Default2.aspx 中找不到Html頁面的基本格式標記，如<head>、<body>。

現在我們來看下Default2.aspx的設計界面，看起來和剛才我們創建的MasterPage.master很像，但是我們發現在Default2.aspx中，除了Content內部以外，其他地方都是不能編輯的。

設計好它以后可以統一每個頁面的頁眉，頁腳．新建一個MasertPage后，再新建其他頁面的時候只要選擇好模板頁，然后在contentplaceholder里寫好你需要的東西．那么運行后就不僅有你寫的東西有了，模板頁的東西也會自己出現，可以減少很多重復工作．


<%@ Master Language="C#" AutoEventWireup="true" Inherits="DuwControls.DuwDefaultMasterPage" %>
<!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">
<asp:contentplaceholder id="CHead" runat="server">
</asp:contentplaceholder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ScriptMan" runat="server">
ScriptMain
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CTop" runat="server">
CTop
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CLeft" runat="server">
CLeft
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CMain" runat="server">
CMain
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CRight" runat="server">
CRight
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CFoot" runat="server">
CFoot
</asp:ContentPlaceHolder>
</form>
</body>
</html>
ContentPlaceHolder 為模版部分的占用位置

//模版頁后臺,繼承自系統 System.Web.UI.MasterPage
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web;

namespace DuwControls
...{
public class DuwDefaultMasterPage : MasterPage
...{
private ContentPlaceHolder _CHead;
private ContentPlaceHolder _CTop;
private ContentPlaceHolder _CLeft;
private ContentPlaceHolder _CMain;
private ContentPlaceHolder _CRight;
private ContentPlaceHolder _CFoot;
private ContentPlaceHolder _ScriptMan;

public ContentPlaceHolder CHead ...{ get ...{ return _CHead; } }
public ContentPlaceHolder CTop ...{ get ...{ return _CTop; } }
public ContentPlaceHolder CLeft ...{ get ...{ return _CLeft; } }
public ContentPlaceHolder CMain ...{ get ...{ return _CMain; } }
public ContentPlaceHolder CRight ...{ get ...{ return _CRight; } }
public ContentPlaceHolder CFoot ...{ get ...{ return _CFoot; } }
public ContentPlaceHolder ScriptMan ...{ get ...{ return _ScriptMan; } }

protected override void OnInit(EventArgs e)
...{
foreach (Control ctrl in this.Controls)
...{
if (ctrl is System.Web.UI.HtmlControls.HtmlHead)//模版Head頭部部分
...{
foreach (Control ctl in ctrl.Controls)
...{
if (ctl is ContentPlaceHolder)
...{
_CHead = ctl as ContentPlaceHolder;
}
}
}
else if (ctrl is System.Web.UI.HtmlControls.HtmlForm)//模版Form主體部分
...{
foreach (Control ctl in ctrl.Controls)
...{
if (ctl is ContentPlaceHolder)
...{
switch (ctl.ID)
...{
case "CTop":
_CTop = ctl as ContentPlaceHolder;
break;
case "CLeft":
_CLeft = ctl as ContentPlaceHolder;
break;
case "CMain":
_CMain = ctl as ContentPlaceHolder;
break;
case "CRight":
_CRight = ctl as ContentPlaceHolder;
break;
case "CFoot":
_CFoot = ctl as ContentPlaceHolder;
break;
case "ScriptMan":
_ScriptMan = ctl as ContentPlaceHolder;
break;
default:
break;
}
}
}
}
}
base.OnInit(e);
}
}
}

//頁面.cs運用部分
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using DuwCompontents;
using System.Text.RegularExpressions;
using System.IO;
using System.Web;

namespace DuwControls
...{
public class DuwPage : Page
...{
屬性#region 屬性
public string SkinType
...{
get ...{ return _SkinType; }
set ...{ _SkinType = value; }
}

public int BoardID ...{ get ...{ return _BoardID; } set ...{ _BoardID = value; } }
#endregion

事件#region 事件
protected override void OnPreInit(EventArgs e)
...{
_SkinType = "wow";//修改頁面的SkinType屬性
this.MasterPageFile = "/Themes/wow/Default.master"; //修改模版頁的原引用路徑/Themes/Default/Default.master
DuwDefaultMasterPage dp = this.Master as DuwDefaultMasterPage;//取得頁面的模版
dp.CTop //為模板中的CTop占位部分
base.OnPreInit(e);
}
}
}

//aspx頁面部分
<%@ Page Language="C#" MasterPageFile="~/Themes/Default/Default.master" ValidateRequest="false"
Inherits="DuwControls.DuwPage" SkinType="default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CHead" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptMan" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CTop" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CLeft" Runat="Server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="CMain" Runat="Server">
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="CRight" Runat="Server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="CFoot" Runat="Server">
</asp:Content>

轉載于:https://www.cnblogs.com/ali88/archive/2009/05/29/1491746.html

總結

以上是生活随笔為你收集整理的MasterPage技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。