论文导读：现在，Web站点的风格切换已经是很常见，尤其是主题换肤功能是很受大家欢迎的功能，比如大家熟知的个性化Google（http://www.google.cn/ig/china）就提供了几十款风格各异的主题供大家选择。本文介绍一种基于ASP.NET的主题Theme功能轻松实现网站的换肤功能。
关键词：ASP.NET，主题，皮肤
现在，Web站点的风格切换已经是很常见，尤其是主题换肤功能是很受大家欢迎的功能，比如大家熟知的个性化Google（http://www.google.cn/ig/china）就提供了几十款风格各异的主题供大家选择。免费论文。本文介绍一种基于ASP.NET的主题Theme功能轻松实现网站的换肤功能。
在 ASP.NET 2.0 出现以前， 给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。现在这些担忧，都在 ASP.NET 2.0 中得到了完善的解决。首先，您可以通过简单的代码编写实现复杂的功能；其次，ASP.NET 2.0 在处理主题的问题时提供了清晰的目录结构，使得资源文件的层级关系非常清晰，在易于查找和管理的同时，提供的良好的扩展性。
1.ASP.NET主题功能介绍
主题是 MicrosoftASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 Textbox控件定义共同的外观，如背景颜色和前景颜色。 使用主题功能可以轻松建立并维护整个网站外观的一致性。
主题是在网站或 Web 服务器上的特殊目录中定义的，主题由一组元素组成：外观、级联样式表 (CSS)、图像和其他资源1。
l 外观，外观文件具有文件扩展名 .skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含您要作为主题的一部分来设置的属性。有两种类型的控件外观：“默认外观”和“已命名外观”，当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有“ SkinID” 属性，则是默认外观，已命名外观是设置了 “SkindID”属性的控件外观。
SKIN文件代码：
＜asp: Button runat='server'BorderColor='red' BackColor='red' Width='150'BorderWidth='2px' SkinID='red' /＞
皮肤应用于按钮控件：
＜asp:Button ID='Button2'runat='server' Text='Button' SkinID='Blue'/＞
l 级联样式表，主题还可以包含级联样式表（.css 文件）。将 .css 文件放在主题文件夹中时，样式表自动作为主题的一部分加以应用。使用文件扩展名 .css 在主题文件夹中定义样式表。
2.三种 ASP.NET主题应用方法
主题应用有三种办法：
l 全局主题：在Web.config中<system.web>中添加<pages StyleSheetTheme='ThemeName'/>节，这样在整个应用中都会自动应用名为ThemeName 的主题。
l 页面主题：在ASPX文件顶部加入：<%@ PageLanguage='C#' StylesheetTheme=' ThemeName ' %>，这样当前页面都会应用名为ThemeName 的主题。
l 角色主题：需要使用母版页（“masterpage”） 来辅助实现 ，通过User.IsInRole(“RoleName”) 来判断用户是否属于某个角色，然后决定使用何种主题(Page. StyleSheetTheme =“ThemeName”)；这样就可以应用用户选择的主题。
3.应用主题实现换肤功能的过程
本文采用最新的ASP.NET 3.5WEB开发技术结合最新的VisulStudio2008可视化开发平台实现网站换肤功能。功能效果如图1所示。免费论文。
具体实现过程如下：
第一步，创建主题。免费论文。首先需要在应用程序中创建正确的文件夹结构，为此，在Visual Studio中右击项目，选择Add ASP.NET Folder | Theme，来创建这个文件夹。注意此时，App_Themes文件夹中的主题文件夹不使用通常的文件夹图标，而使用包含一个画笔的文件夹图标，其次，建立主题文件夹，此文件夹的名称也就是页主题的名称。例如，如果您创建一个名为App_ThemesFirstTheme 的文件夹，则主题的名称为 FirstTheme。最后，将构成主题的控件外观、样式表和图像的文件添加到新文件夹中。本文所介绍的系统中，创建了四个主题：“海阔天空”、“梦幻天际”、“天地万物”和“默认”，当然在App_Themes文件夹中也创建了四个有相应名称的文件夹。效果如图2所示：
第二步，生成用户交互页面。在页面中放置一ListView控件，在每个数据行中添加以Image图像控件和Button按钮控件，并进行相应的设置，如图3所示。
ListView控件关键代码如下：
<asp:ImageID='Image2' runat='server' BorderStyle='Solid'BorderWidth='1px'ImageUrl='<%#Eval('Preview')%>'></td></tr><tr><td><%#Eval('Name') %>
</td></tr><tr><td align='center'>
<asp:ButtonID='Button1' runat='server' Text='添加主题' CommandName='btnthemeset'CommandArgument='<%#Eval('Name')%>' OnCommand='btn_OnClick'/>
</td>
第三步，后台功能逻辑处理。所需关键函数和代码如下：
protectedvoid getThemeSet()//获取系统主题，并生成DataTable对象。
{
DirectoryInfo di = newDirectoryInfo(Server.MapPath('~/App_Themes/'));
DirectoryInfo[] subDirs = di.GetDirectories();
DataTable dt = new DataTable();
dt.Columns.Add('ID');
dt.Columns.Add('PreView');
dt.Columns.Add('Name');
for (int i = 0; i < subDirs.Length; i++)
{
DataRow dr = dt.NewRow();
dr['ID'] = i;
dr['Preview'] = '~/App_Themes/' + subDirs[i].Name +'/background.jpg';
dr['Name'] = subDirs[i].Name;
dt.Rows.Add(dr);
}
ListView1.DataSource =dt.DefaultView;
ListView1.DataBind();
}
protectedvoid btn_OnClick(object sender, CommandEventArgs e)//获取主题，并应用于页面。
{
if (e.CommandName == 'btnthemeset')
{
Profile.theme =e.CommandArgument.ToString();
Server.Transfer('default.aspx');
}
}
结语
总之，页面人性化，个性化是大势所趋，今后将有越来越多的作品加入到主题中来，而且很有可能将开通自定义风格的功能。
【参考文献】
[1] http://msdn.microsoft.com/zh-cn/library/ykzx33wh(VS.80).aspx
|
