ASP.NET 2.0中动态混合使用MasterPage和主题
2006-04-16 23:42
721 查看
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 "-//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>无标题页</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
看看最后的结果：
对比可知：无论是样式还是布局都可以动态的改变，达到我们个性化界面的基本需要。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 如何在ASP.NET 2.0 中的Master Page具体页面中 使用CSS?
- Asp.Net MVC 2.0 动态加载Master Page数据（一）
- Asp.net 2.0的一些小心得 (三) Master Page的使用
- Asp.Net MVC 2.0 动态加载Master Page数据（二）
- 在ASP.NET 2.0中使用样式、主题和皮肤
- ASP.NET 2.0新特性-使用样式、主题和皮肤
- [转] ASP.NET 2.0 主题的动态切换
- ASP.NET 2.0 之 Master Page 学习笔记
- ASP.NET 2.0 之 Master Page 学习笔记
- 在ASP.NET 2.0中使用样式、主题和皮肤
- 在asp.net 2.0中使用主题
- [转]Asp.net中masterpage的使用
- 设置页面的默认焦点控件和默认接受事件控件How Do I Set the DefaultFocus or DefaultButton in a Page Based on a Master Page in ASP.NET 2.0
- ASP.NET 2.0 之 Master Page 学习笔记
- ASP.NET 2.0 之 Master Page 学习笔记
- asp.net 2.0中tablecontrol搭配masterpage的小bug
- asp.net 2.0生命周期 以及Page_Load Page_Init方法使用原理
- Rewrite the master page form action attribute in asp.net 2.0
- 在ASP.NET 2.0中使用样式、主题和皮肤
- 关于ASP.NET中使用MasterPage和PageBase页面基类的一些体会