在ASP.net 2.0之后便引入了主题(Theme)的概念,将CSS文件并入到主题的统一概念中,也不需要通过<link>标记来引入CSS文件了,下面先来看一看主题的使用实例:
第一步:在解决方案资源管理器中,网站上点击右键选择“添加ASP.net文件夹à主题”,系统会新建一个名为“App_Themes”的目录,在该目录下还会自动建立一个“主题1”的目录。
“主题1”目录就是所定义的主题名称,为了更有实际意见,将“主题1”修改为“WinXP_Blue”。
第二步:在WinXP_Blue目录上点击右键,选择“添加新项…”,选择“样式表”类型,命名为blue.css。完善blue.css中CSS的定义。
第三步:在网站根目录下新建名为“TestTheme.aspx”的页面,注意:不要选择从母版中生成。在@ Page指令中加入StylesheetTheme="WinXP_Blue"属性,如:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestTheme.aspx.cs" Inherits="TestTheme" StylesheetTheme="WinXP_Blue" %>
第四步:在页面中拖入一个Button按钮,在属性面板中找到CssClass属性,该属性是一个下拉列表,列表中显示了blue.css中所有用户自定义类别的名称。
如果将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue",重新打开TestTheme.aspx页面进行编辑,则控件的CssClass属性下拉列表中什么也不会出现。这是因为Theme属性的强制页面中的控件都只能通过“主题”进行界面设置,不允许控件在页面中进行自定义CSS风格;而StylesheetTheme属性则表示,既可以使用“主题”中的界面设置,也可以页面中进行自定义。
由此可以看出,CSS文件已经被“主题”的概念封装了。在实际使用“主题”技术时,还有一个称之为“皮肤Skin”的技术。Skin技术也可以将CSS做了一次封装,下面是Skin的实例:
第一步:在blue.css文件中加入下面两种CSS类的定义:
.btn
{
font-family: Arial;
background-color: #FFFF00;
border-style: dotted;
border-color: #008000;
}
.btnSubmit
{
background-color: #008080;
color: #FFFFFF;
border-style: outset;
}
第二步:在“WinXP_Blue”上点击右键添加新项,添加“外观文件”,取名为Blue.skin。这个文件便是Skin的定义文件。在blue.skin文件中加入如下代码:
<asp:Button runat="server" CssClass="btn" />
<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />
这样就定义了Button服务器控件的默认CSS效果与SkinId="SubmitSkin"的CSS效果。
第三步:在TestTheme.aspx页面删除之前所建的按钮,将@ Page指令中的StylesheetTheme="WinXP_Blue"更改成Theme="WinXP_Blue",另外新加入两个Button按钮,将其中一个按钮的SkinId属性定义为SubmitSkin(可以在按钮的属性面板中SkinId属性中通过下拉列表进行选择)。
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" Text="Button" SkinID="SubmitSkin" />
在浏览器中查看TestTheme.aspx页面,可以发现Button1按钮应用的是btn类的风格,在Skin定义文件中,没有指定SkinID的定义条目,即该控件的默认风格。Button2按钮应用的是btnSubmit风格。由此可见SkinID又是对CSS类的一次封装。
但皮肤Skin技术并不止限于对CSS类的封装,而是对服务器控件所有属性的一次封装,CssClass只是其中的一个属性。由此也可以看出,Skin技术只能应用于服务器控件。如将blue.skin文件中:
<asp:Button runat="server" CssClass="btnSubmit" SkinId="SubmitSkin" />
更改为:
<asp:Button runat="server" CssClass="btnSubmit" Text="提交" SkinId="SubmitSkin" />
加入了一个Text属性,再在浏览器中查看TestTheme.aspx页面可以发现Button2按钮的Text文字变成了“提交”。
尤其可以得出一个结论:SkinID是服务器控件属性定义的一个集合。应用SkinID的控件,就应用了这个集合中所有定义的属性。
当SkinID中定义的属性值与aspx页面中定义的属性值发冲突时,系统会如何处理呢?如在aspx页面中,Button2按钮也定义了Text属性为“Button”,SkinID中定义的Text属性是“提交”,优先使用哪一个定义要看@ Page指令中引入Theme的属性是用的哪一个。
如果使用Theme="WinXP_Blue",则会优先使用SkinID中定义的属性;如果使用StylesheetTheme="WinXP_Blue",则会优先使用aspx中定义的属性。母版中不能定义主题,即不能在@ Master指令中使用Theme或StylesheetTheme属性。如果需要集中定义所有页面的主题,可以通过web.config文件配置<system.web>à<pages>节的Theme或StylesheetTheme属性来实现。
程序动态加载主题的方法与动态加载母版的方法相似,都必须在Page类的OnPreInit方法(或其触发事件)中实现,如在TestTheme.aspx.cs中动态加载主题:
protected void Page_PreInit(Object sender, EventArgs e)
{
if (Request["theme"] == "Red")
{
this.Theme = " WinXP_Red";
}
else
{
this.Theme = " WinXP_Blue";
}
}
或是:
protected override void OnPreInit(EventArgs e)
{
if (Request["theme"] == "Red")
{
this.Theme = " WinXP_Red";
}
else
{
this.Theme = " WinXP_Blue";
}
base.OnPreInit(e);
}