Asp.Ne tMasterPage技術(shù)-<asp:Content>

頤中八喜 2011-08-07

展開全文

<asp:Content> MasterPage技術(shù)

2007-09-24 14:13

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./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，這個叫內(nèi)容占位符，他的作用就是當(dāng)你用<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./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./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>

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

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

現(xiàn)在，我們有了一個基于模板的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>

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

現(xiàn)在我們來看下Default2.aspx的設(shè)計界面，看起來和剛才我們創(chuàng)建的MasterPage.master很像，但是我們發(fā)現(xiàn)在Default2.aspx中，除了Content內(nèi)部以外，其他地方都是不能編輯的。

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


<%@ Master Language="C#" AutoEventWireup="true" Inherits="DuwControls.DuwDefaultMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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 為模版部分的占用位置

//模版頁后臺,繼承自系統(tǒng) 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>