你的Asp.net支持皮肤了吗

最新推荐文章于 2025-09-10 20:47:27 发布

weixin_33794672

最新推荐文章于 2025-09-10 20:47:27 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： ui

原文链接：http://www.cnblogs.com/wifi/articles/2458913.html

本文介绍ASP.NET中实现皮肤更换的方法，包括创建皮肤文件夹、定义不同样式的CSS及skin文件，通过基类BasePage自动加载用户选择的主题。

你的Asp.net支持皮肤了吗

当今IPhone现象已经引起了国内越来越多的企业家的反思，为什么苹果手机仅仅靠此一款就风靡全球了呢。

我记得当时有一个关于第三次经济浪潮的说法，说是当今社会是服务经济，也就是依靠于服务的经济社会，我想现在大家也可能有此体会，而软件就是服务这个论点我是比较支持的，往往软件并不是创造了什么，而是为什么事情提供了更好的服务，带来了业务上规范/便捷和高效等。

下一次的经济浪潮将是体验经验，一个人购买什么东西，这与这件东西带来的用户体验非常紧密。按照我的理解，iPhone现象也可能就是体验所带来的购买欲望吧。

废话少讲，不管大家能否看明白我所描述的上面这段文字，我想软件所带来的用户体验将是我们软件开发人员不断追求的目标。

单纯的Asp.net的换皮肤就能带来用户体验的提升吗，我想不全是，毕竟一个安全、稳定、可靠的系统是最基础的，否则无论软件做的怎么花哨，不可靠的软件都会降低软件的体验，甚至可能损坏开发人员、开发单位的名声。如果提高软件的质量，这个话题太大了，也不在本片文章内。

我们都知道，asp.net2005支持皮肤，实际上原先我们也可以直接用css来实现对皮肤的支持，只不过vs2005将这个问题更加简化了，但是原理还是一样的，也是利用css来实现的。那么，你如果想让你的程序更好的支持皮肤的话，建议还是要把CSS好好的掌握了。

下面来讲述一下Asp.net皮肤支持的步骤。

第一步：在web项目上添加asp。net文件夹，“皮肤”这一目录，然后将会显示App_Themes这个目录

第二部：这App_Themes目录下添加两个文件夹，譬如"BlueSky"，“Red”这两个目录，代表的就是我想要做的两个皮肤的名称

第三部：在这两目录中添加不同的资源文件，譬如所需要的图片，css文件，以及asp.net的skin文件

第四步：增加一个集成了Page的基类，如BasePage.cs文件，并且以后的aspx都继承这个BasePage，下面是我的BasePage的一段代码：

Code
using System;
using System.Data;
using System.Configuration;
using System.Security.Principal;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Mpc.Core.Dao;
using Mpc.Core.Model;

/// <summary>
/// BasePage 的摘要说明
/// </summary>
public partial class BasePage : System.Web.UI.Page
{
    public const string DefaultThemeName = "Blue";

    protected void Page_PreInit(object sender, EventArgs e)
    {
        string themeName = DefaultThemeName;

        if (Page.Request.Cookies[GetThemeCookieName()] != null)
        {
            themeName = Page.Request.Cookies[GetThemeCookieName()].Value;
        }

        string clientScriptBlock = "var CurrentThemeCookieName = \"" + GetThemeCookieName() + "\";";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CurrentThemeCookieName", clientScriptBlock, true);

        this.Theme = themeName;

    }

    protected string GetThemeCookieName()
    {
        string mpcCurrentTheme = "MpcCurrentTheme";
        string path = Page.Request.ApplicationPath;

        int startPos = path.IndexOf("ASPx");
        if (startPos != -1)
        {
            int endPos = path.IndexOf("/", startPos);
            if (endPos != -1)
                mpcCurrentTheme = path.Substring(startPos, endPos - startPos);
        }
        return mpcCurrentTheme;
    }

}

上面这段代码的简短说明：

1.BasePage要继承System.Web.UI.Page

2.覆盖Page_PreInit方法，在这个方法中我们要从Cookie中获取当前用户选择的皮肤的ID也就是第二步中的皮肤的名称

接下来最重要的就是对于皮肤的定义了，举一个简单的例子，譬如我想对button控件在不同的皮肤下，使用不同的样式。在我的程序中是这样定义的。

在每个皮肤中都添加一个Button.skin文件，这个文件的内容如下：

< asp:Button runat = " server " cssClass = " btn " >
</ asp:Button >

上面代码是我将引用cssClass="btn"作为我的样式，这样我们就需要在两个目录下分别定义两个css文件，譬如叫default.css。第一个css文件中的内容为：

Code
.btn {
     border-right: #ACB3CB 1px solid;
     padding-right: 10px;
     border-top: #ACB3CB 1px solid;
     padding-left: 10px;
     font-size: 12px;
     filter: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#DBE0F1);
     border-left: #ACB3CB 1px solid;
     cursor: hand;
     color: #04340C;
     padding-top: 2px;
     border-bottom: #ACB3CB 1px solid
}

第二个default。css文件的内容如下：