ASP.NET 2.0中动态混合使用MasterPage和主题

本文链接：https://blog.csdn.net/Mint/article/details/666018

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">

</head>

<body>

</asp:ContentPlaceHolder>

</td></tr>

</asp:ContentPlaceHolder>

</td><td><asp:contentplaceholder id="cnhMain" runat="server">

</asp:ContentPlaceHolder>

</td></tr></table></td></tr>

</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" %>