ASP.NET2.0快速入门(3)——使用母版页(转)
2008-12-07 21:55
543 查看
1.概述
在Web程序开发中,一般一个网站都具有固定的格式。如下图是一种常用的格式,该页面分为3个部分。最上面为功能标题,如“学生信息维护”等显示给用户,以便用户明确自己在操作哪个模块。最下面显示作者或版权信息。中间是内容部分,主要实现本页的操作功能。功能标题 |
内容页 |
作者:最后一只恐龙 |
在界面布局时,每个页面都设置那些相同的东西是一件比较恼人的工作。在asp.net 1.1中,一般使用用户自定义控件完成静态不变的内容,使用时把这个控件拖到这个位置就可以了。这种解决方案简化了页面布局,但一般用户对创建用户自定义控件还是有一定恐惧的,另外对于控件拖放的位置也要预留。而asp.net 2.0中提供了一种称为母版页的控件,较好的解决了这个问题。
使用母板页时,可以将不变部分放到母版页中,而创建的每个aspx页面,都可以选择母版页作为缺省显示方式,这样界面布局时只要关心内容页部分就可以了。
2.准备工作
创建一个名为MasterTest的网站,增加web.config配置文件。按照上篇文章《ASP.NET2.0入门(2)——使用皮肤》中介绍的方法增加主题Default,并配置到web.config。当然增加和配置主题这一步不是本例必须的。3.创建母板页
(1)在“解决方案资源管理器”中的网站名称上点击右键,选择“添加新项”。(2)选择类别为“母版页”,文件名为MasterPage.master。
添加后可以在该文件的源模式中看到这样一段代码:
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
在设计模式则可以看到该页增加了一个contentplaceholder控件。这个控件是2.0新增的一个控件,它的作用是起到一个占位符的作用,即这里需要有一个页面占据这个位置。
需要注意的一点是,母板页本身是不能在浏览器中显示运行的,它必须与一个aspx页面结合,由aspx页面把这个位置占据。
当然你也可以在这个页面中拖入多个contentplaceholder控件,在后面的页面中我们可以看到它们怎么与aspx页面结合起来。
现在我们希望看到的页面都居中,这样我们用table对其进行布局,在源模式下,将<div>标签中的代码(上面看到的那段)该成:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td height="20px"></td></tr>
<tr>
<td align="center">
<asp:Label ID="Label1" runat="server" SkinID="PromptText" Text="母版页测试"></asp:Label>
</td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td align="center">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
<tr><td height="10px"></td></tr>
<tr>
<td align="center">
<asp:Label ID="Label2" runat="server" Text="作者:最后一只恐龙" SkinID="MsgText"></asp:Label>
</td>
</tr>
</table>
这段代码增加了两个Label,其中第一个显示“母版页测试”这个标题,最下面一个显示作者,中间还是原来的contentplaceholder控件。至于table的代码,可以通过dreamwaver进行配置,也可以直接敲入以上代码。
可以回到设计模式浏览配置好的界面。
4.增加内容页
(1)在“解决方案资源管理器”中的网站名称上点击右键,选择“添加新项”。(2)选择类别为“Web窗体”,文件名为Default2.aspx,并在右下角“选择母版页”选项前打上勾(图4.1),添加。
(3)这时弹出“选择母版页”对话框,选中MasterPage.master,确定。
我们看一下增加的default2.aspx的代码:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
最上面的Page声明中,MasterPageFile="~/MasterPage.master"表示引用了母版页MasterPage.master。下面增加了一个Content控件,该控件为内容页控件,也是一个容器控件,在内容页上增加的控件需要放入到Content控件中。
Content控件有一个属性ContentPlaceHolderID="ContentPlaceHolder1",可以看到这个ID正好是母版页中那个contentplaceholder控件的ID。如果你的母版页中有n个contentplaceholder
图4.1 添加Web窗体 |
(4)在Content控件中拖人一个Calendar日历控件和一个Label控件。
(5)将Label控件的ID改为lblTime,Text属性改为“选中时间”。
(6)为Calendar控件增加SelectionChanged事件。
这样,Default.aspx的源代码变成了:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged">
</asp:Calendar>
<asp:Label ID="lblTime" runat="server" Text="选中时间"></asp:Label>
</asp:Content>
(7)进入后台Default.aspx.cs代码,在日历控件的SelectionChanged事件中增加以下代码:
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
lblTime.Text = Calendar1.SelectedDate.ToString();
}
(8)编译运行。
可以看到运行效果中,Default.aspx2中上下增加了母版页的内容。
5.在内容页中调用母版页控件
在内容页中有个属性Master,可以通过它访问母版页。如我们要修改母版页上的标题,我们看到显示标题的那个Label的ID为Label1,在Page_Load事件中增加以下代码:protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
((Label)Master.FindControl("Label1")).Text = "标题被修改了!";
}
运行看一下标题是否被修改。
6.嵌套母版页
有时可能会用到母版页的嵌套。如下是两种可能的母版页嵌套示意图,是不是两种设计方式都可以呢?主母版页 |
子母版页 |
内容页 |
主母版页 |
子母版页 |
内容页 |
a |
b |
图6.1 嵌套母版页示意图 |
内容页后台访问子母版页用Master属性,访问主母版页用Master.Master。
(转自)http://blog.csdn.net/Ivy_zheng/archive/2007/03/13/1527454.aspx
相关文章推荐
- ASP.NET2.0快速入门--使用母版页创建布局
- ASP.NET2.0快速入门--使用母版页创建布局
- ASP.NET2.0快速入门--使用母版页创建布局
- ASP.NET2.0快速入门(2)——使用皮肤
- ASP.NET2.0 快速入门 ----使用主题对站点进行自定义
- webservice快速入门-使用JAX-WS注解的方式快速搭建ws服务端和客户端(一)
- Spring快速入门教程 - 1 - 使用 Maven 创建工程 - 修改0次
- PS的快速入门与使用教程
- 【nodejs】快速入门使用
- Maven入门指南① :Maven 快速入门及简单使用
- MongoDB学习(五)使用Java驱动程序3.3操作MongoDB快速入门
- ADO.NET 快速入门(九):使用关系型数据
- java struts2入门学习实例--使用struts2快速实现上传
- VirtualBox虚拟机快速入门(4):使用技巧【安装增强工具】
- .NET Core快速入门教程 4、使用VS Code开发.NET Core控制台应用程序
- [置顶] docker-compose教程(安装,使用, 快速入门)
- jetty快速入门与嵌入使用 jetty
- Spread for Windows Forms快速入门(9)---使用公式
- ASP.NET2.0快速入门--高级数据方案(4)
- MyBatis Plus工具快速入门使用教程