在ASP.NET2.0中切换Web应用程序样式的方法
主题是MicrosoftASP.NET2.0提供给开发人员的一项新增功能。
在Asp.NET2.0出现以前，给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。
现在这些担忧，都在Asp.NET2.0中得到了完善的解决。首先，您可以通过简单的代码编写实现复杂的功能；其次，Asp.NET2.0在处理主题的问题时提供了清晰的目录结构，使得资源文件的层级关系非常清晰，在易于查找和管理的同时，提供的良好的扩展性。
下面就让我们通过一个Demo感受一下Asp.NET2.0的新特性。
1.建立主题文件夹：
在应用程序的根目录上单击右键，点选AddFolder下的ThemeFolder选项后，会在根目录下出现名为App_Themes的空文件夹，所有的与主题有关的资源文件都会存储在这个文件夹下。
在本例中，选择以颜色不同的方式来区分主题，需要在主题文件夹（App_Themes）下建立两个以颜色为名称的文件夹。
操作方式：在App_Themes文件夹上单击右键，将鼠标移动到AddFolder选项上，发现在主题文件夹（App_Themes）新增文件夹的类型只有一种ThemeFolder：
建立两个主题文件夹，分别命名为BlueTheme和PorpleTheme。
将主题BlueTheme应用于页面：
<%@PageLanguage="C#"StylesheetTheme="BlueTheme"%>
Skin文件是实际包含主题所应用的格式设置的文件。一个主题可以包含一个或多个Skin文件。这没有关系，因为在将主题应用于页面时，ASP.NETFramework将把某个主题下的多个Skin文件合在一起，而将这些文件视为一个Skin文件。
您可以根据需要将Skin文件命名为任何名称，在文件中可以通过声明某个控件的实例设置一个或多个此控件中的属性，从而使用Skin文件指定控件的外观。（注：并不是所有属性都可以设置，能设置的多为外观属性）。
本例中先在主题BlueTheme中建立新文件Control.skin，在文件中对三个控件的某些属性进行了设置。
|
<asp:TextBoxBackColor="#c4d4e0"ForeColor="#0b12c6"Runat="Server"/> <asp:LabelForeColor="#0b12c6"Runat="Server"/> |
此时页面页面代码为:
|
<body> <formid="form1"runat="server"> <tablewidth="100%"cellpadding="0"cellspacing="0"border="0"> <tr> <tdheight="23px"colspan="2"></td> </tr> <tr> <tdalign="center"height="50px"> <asp:LabelID="Label1"runat="server"Text="EnterYourName:"></asp:Label> </td> <td> <asp:TextBoxID="TextBox2"runat="server"></asp:TextBox> </td> </tr> <tr> <tdalign="center"height="50px"> <asp:LabelID="Label2"runat="server"Text="EnterYourNickname:"></asp:Label> </td> <td> <asp:TextBoxID="TextBox1"runat="server"></asp:TextBox> </td> </tr> <tr> <tdalign="center"height="50px"> <asp:ButtonID="Button1"runat="server"Text="OK"/> </td> <td> <asp:ButtonID="Button2"runat="server"Text="Cancel"/> </td> </tr> <tr> <tdheight="23px"colspan="2"></td> </tr> <tr> <tdcolspan="2"><br/><br/></td> </tr> </table> </form> </body> |
此时页面效果为:
4.使用CSS文件做更细致的设置：
对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的.
本例中在主题BlueTheme中建立了新文件Default.css,在此文件中对页面中的body,table,td元素进行了设置.
|
body {margin:0;padding:0;overflow:hidden;} .tableStyle {font-family:"宋体";font-size:12px;color:#000000; line-height:120%;background-image:url(image/bg.jpg);} .tdStyle {background-image:url(image/Bar_out.gif);} |
再更改部分页面代码调用CSS样式后,效果如下
5.主题的动态切换：
在前台页面Default.aspx中添加一个下拉框,用来进行主题的选择.
|
<tr> <tdcolspan="2"> <br/>您可以在此处选择页面主题： <asp:dropdownlistid="ChooseTheme"runat="server"autopostback="true"> <asp:ListItemValue="BlueTheme">请选择颜色</asp:ListItem> <asp:ListItemValue="BlueTheme">蓝色</asp:ListItem> <asp:ListItemValue="PorpleTheme">紫色</asp:ListItem> </asp:dropdownlist> <br/><br/><br/> </td> </tr> |
在后台页面Default.aspx.cs中添加代码用来在每次刷新页面时替换新选的主题.
|
protectedvoidPage_PreInit(objectsender,System.EventArgse) { Page.Theme=Request["ChooseTheme"]; } |
点选下拉框中的选项,主题便会在页面刷新后改变,如:把蓝色主题切换为紫色主题，效果如下：
以上，便是ASP.NET2.0中新增的主题功能，利用此项功能，我们不仅可以快速的将各式各样的外观应用于整个Web应用程序。还可以更加轻松的完成网站的扩充和维护工作。
本文地址：http://www.45fan.com/bcdm/73046.html