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
...
{
屬性
屬性

事件
事件

}

//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>
版權所有:天天網絡工作室 晉ICP備06006449號
電話:
0351-2149301 手機:13103416120
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章