你的Asp.net支援皮膚了嗎

來源:互聯網
上載者:User

當今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檔案的內容如下:

 

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
}

這兩個定義只是顏色不一樣。

 

這樣我在系統運行時,將會看到不同的效果。

 

 

 

 

好的,有關於如何使用皮膚的更詳細的內容,請大家自己參考其他的文章,我在此處只是想引出這個問題,給大家一些協助。

當然對於一個開發組織來講,只需要構建好的asp.net開發平台能夠支援皮膚就可以了,並不需要所有的人都來掌握這些內容,畢竟項目的核心還在於商務程序及業務方法。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.