发现网页上多了个<asp:content>然后没有了<head><body>之类的。上网查了下,结果这是MasterPage技术,
首先,我们需要打开VS2005,创建一个WebSite(这里要注意,是创建一个WebSite而不是创建一个Project)
然后,给刚建立的WebSite添加一个名字叫MasterPage.master的MasterPage,这个时候我们会看到该文件有如下内容:
<%@ Master Language="C#" 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#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>告诉我们,这个是一个模板页,同时我们可以看到在<div></div>之间包含了一个asp的控件contentplaceholder,这个叫内容占位符,他的作用就是当你用<table>或者<div>进行布局后,用这个控件去“霸占”一个地方,而这个地方的主人,不是contentplaceholder,而是后面将提到的Content。
下面用<Table>做下示例
<%@ Master Language="C#" 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" 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" 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内部以外,其他地方都是不能编辑的