asp:Content 的使用

发现网页上多了个<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#" 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内部以外,其他地方都是不能编辑的

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值