ASP.NET 2.0初接触—使用MasterPage和 主题
2006-4-15
前言
在ASP.NET Froum 2.0中我学习和使用MasterPage,然后也可以使用自定义控件的方式来使用主题。但这种在ASP.NET1.1 中方式使用相当不便,因为每个页面都需要做成一个自定义控件,才能更好的控制。同时,无法可视化的进行编辑也是相当的不习惯。
ASP.NET 2.0中使用MasterPage和主题来解决这个问题,即:用户自定义介面和程序员统计控制的界面。
在我的第一个ASP.NET的示例中,我们一步步的来完成整个过程。
新建项目
与VS.NET 2003 不同,Vs.net 2005是使用“新建网站”菜单来新建Web项目,这让我一开始接触时找了老半天。
有意思的是。Vs.net 2005不再需要IIS作直接支持,而是使用了另一个所谓的轻重级的IIS程序来作为调试平台。
完全新建的页面如下所示:
使用Master Page
经常使用的在项目菜单上右击生成新的页面的菜单不见了,需要通过主菜单中的“网站”à“添加新项”来完成。现在先新建一个Master页面
然后进行master页面的设计:
对应的代码如下:
<%@ Master Language="VB" CodeFile="MyDefault.master.vb" Inherits="MyDefault" %>
<!DOCTYPE html PUBLIC "-//W 3C //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>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div align=center >
<table width =800><tr><td hight=150 style="height: 100px"><asp:contentplaceholder id="cnhHead" runat="server">
</asp:ContentPlaceHolder>
</td></tr>
<tr><td><table width=100% hight=500><tr><td style="width: 156px"><asp:contentplaceholder id="cnhMainLeft" runat="server">
</asp:ContentPlaceHolder>
</td><td><asp:contentplaceholder id="cnhMain" runat="server">
</asp:ContentPlaceHolder>
</td></tr></table></td></tr>
<tr><td hight=50><asp:contentplaceholder id="cnhFooter" runat="server">
</asp:ContentPlaceHolder>
</td></tr></table>
</div>
</form>
</body>
</html>
在这个master页中,我们使用了四个Holder控件来占位。
接着,需要使用此Master页面来设计和显示最后显示的页面:
(1)新建页面,确定勾选了“选择母版页”
(2)选择刚才的生成的母版页
(3)设计新的页面如下:
使用主题
新建一个主题,选择项目上的右击,然后出现新建主题菜单
系统自动生成App_Themes目录,我生成了两个主题,一个叫Blue一个叫Default。目录如下:
(1)在Default中加入新的皮肤,右击Default文件夹,然后选择“添加新项”
对它进行相当的Coder
<asp:label runat="server" SkinID="DefaultLabelGray" class="MyDefaultLableGray"/>
<asp:label runat="server" SkinID="DefaultLabelWhite" class="MyDefaultLableWhite" />
<asp:TextBox runat="server" SkinID="DefaultGray" class="DefaultTextBoxGray"/>
<asp:textbox runat="server" SkinID="DefaultWhite" class="DefaultTextBoxWhite"/>
<asp:button runat="server" SkinID="BlueButton" BackColor="Orange" />
(2)使用CSS 文件来帮助SkinFile.Skin进行相应的样式设定:
然后设定CSS
.MyDefaultLableGray
{
color: mediumblue;
background-color: #cccccc;
}
.MyDefaultLableWhite
{
color: #99ff66;
background-color: #666699;
}
.DefaultTextBoxGray
{
border-left-color: #ff9966;
border-bottom-color: #ff9966;
border-top-style: inset;
border-top-color: #ff9966;
border-right-style: inset;
border-left-style: inset;
background-color: #9999ff;
border-right-color: #ff9966;
border-bottom-style: inset;
}
.DefaultTextBoxWhite
{
border-left-color: #cccc33;
border-bottom-color: #cccc33;
border-top-style: double;
border-top-color: #cccc33;
border-right-style: double;
border-left-style: double;
background-color: #cccccc;
border-right-color: #cccc33;
border-bottom-style: double;
}
.DefaultButton
{
border-right: #669966 thin solid;
border-top: #669966 thin solid;
border-left: #669966 thin solid;
border-bottom: #669966 thin solid;
background-color: #6666ff;
}
在ASP.NET 2.0下,终于可以相对可视的生成CSS样式了,操作过程跟Dreamweaver之类的软件相类似。
(3)使用固定样式皮肤
在设计视图中,对MyFirstPage使用Default布局,如上图:
然后,一个一个的设定控件的风格,即:SkinID,如下图:
然后按F5运行程序,结果如下所示:
这个改变来自于Page中的这样的一行代码:
<%@ Page Language="VB" MasterPageFile="~/MyDefault.master" AutoEventWireup="false" CodeFile="MyFirstPage.aspx.vb" Inherits="MyFirstPage" title="Untitled Page" Theme="Default" %>
现在你应当已经会使用固定不变的主题了。
(4)可以改变的主题
主题的设计就在于完全的改变风格。结合MasterPage,你可以将整个页面风格(包括布局方式)进行完全的改变。一般说来,不同的用户,需要不同的风格主题(不明白的就去看看msn spaces),所以动态加载主题是必要的。
在页面左边加入以下代码:
<asp:DropDownList
id="dropTheme"
AutoPostBack="true"
Runat="Server">
<asp:ListItem Text="DefaultTheme" />
<asp:ListItem Text="BlueTheme" />
</asp:DropDownList>
结果如下:
我们想到通过选择下拉列表框来显示动态的theme
在对应的codehind代码中加入Page的preinit事件
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
Page.Theme = Request("ctl00$cnhMainLeft$dropTheme")
End Sub
由于theme初始化相当早,所以,需要在preInit事件中处理它。同时是直接取dropTheme
的request串。由于postback来的是客户端ID,所以我们这儿直接使用客户端ID(因为使用了Master页,所以客户端ID的结果就成为"ctl00$cnhMainLeft$dropTheme"这样的格式,实际使用中要更麻烦一些,可以使用别的办法来变通)
对比blue样式(没有定义,所以相当于没有使用)
我们看到:它能正常的工作!!
综合使用动态的MasterPage 和theme
现在让我们做一下小小的修改,让程序可以现时支持动态的装入主题和母版页
(1) 新建一个MasterPage,要求内容跟原有的default一样,只是布局不同,如下:
我们看到,这个布局只是简单的把它左右交换了一下。名为Blue.master
(2) 为了方便,把原来的myDefult.master也改为Default.master
同时更改MyFirstPage.aspx文件的头部为:
<%@ Page Language="VB" MasterPageFile="~/Default.master" AutoEventWireup="false" CodeFile="MyFirstPage.aspx.vb" Inherits="MyFirstPage" title="Untitled Page" %>
才好与它对应。
(3) 然后把对应的aspx.vb代码改为:
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
Page.Theme = Request("ctl00$cnhMainLeft$dropTheme")
If Request("ctl00$cnhMainLeft$dropTheme") <> "" Then
Page.MasterPageFile = "~/" + Request("ctl00$cnhMainLeft$dropTheme") + ".master"
End If
End Sub
看看最后的结果:
对比可知:无论是样式还是布局都可以动态的改变,达到我们个性化界面的基本需要。