ASP.NET使用主題完成換膚

ASP.NET中的主題(Theme)與母版頁比較類似,都可以統一網站多個網頁的外觀界面,但細細分析,還是有區別的。

主題與母版頁的區別:

1、母版頁是一個文件,擴展名爲.master;主題是一個目錄,而且是ASP.NET中的系統目錄,目錄名爲App_Themes,在該目錄下有CSS文件、外觀文件(.skin)等;

2、母版頁屬於DIV + CSS概念,定義的是靜態的網頁外觀;主題是動態概念,主要用來定義控件的外觀(即.skin外觀文件完成的功能),它是多個外觀文件的集合

網頁的換膚功能一般由主題(Theme)完成。

創建主題的辦法:

1、如果網站根目錄沒有App_Themes文件夾,可以在解決方案管理器中右擊網站項目名,單擊“添加ASP.NET文件夾”,單擊“主題”,App_Themes文件夾創建成功;

2、在App_Themes文件夾上右擊,單擊“添加ASP.NET文件夾”,單擊“主題”,創建了一個新的主題,可以對這個主題給一個有意義的名字,如“greenSkin”

3、在“greenSkin”上右擊,單擊“添加新項”,可以選擇新建外觀文件(.skin)或者樣式表文件(.css)。注意外觀文件要起名爲和控件相同的名字,如Button.skin,Label.skin,RadioButton.skin,則起作用的網頁內相應控件可以直接應用,CSS文件名字任意,只要有,會自然引用。

對整個網站設置默認主題:

需要修改web.config文件。在system.web元素內加入pages元素並作如下設置:

<configuration>

   <system.web>

     <pages theme="greenleaf" />

   </system.web>

</configuration>

需要說明的是,如果web.config文件中原來已經存在pages元素,直接把屬性theme="greenleaf"加入到元素起始標籤即可,不要再添加元素終止符“/”,因爲後邊應該有</pages>

用戶在運行中的網頁進行換膚:

這是網站換膚最重要的一環。換膚是用戶個性化定製的一個方面,需要記住不同用戶的所選定的主題。完成這個工作一般使用兩種辦法完成。一是使用cookies的辦法,存在用戶本地硬盤內,用戶一進入網站,就從cookies調用數據,使用相應的外觀,如360安全網址即使用這種辦法;另外一種是使用Profile的辦法,即將用戶的選擇存入到數據表內(aspnet_Profile表),這種辦法對已經登錄的用戶有效,用戶無論在任何一臺聯網的電腦上登錄網站,都可以看到自己選擇的外觀,下例使用第二種辦法進行說明。

1、修改web.config文件,在system.web元素內添加如下代碼,使profile可以使用theme屬性設置並存儲用戶選擇

<profile enabled="true">
       <properties>
       <add name="theme"/>
       </properties>
       </profile>

2、在需要換膚的頁面(如Index.aspx)的代碼文件中,對頁面的PreInit事件編寫代碼,使換膚起作用,代碼如下:

protected void Page_PreInit(object sender, EventArgs e)
        {
              if (!Profile.IsAnonymous)
              {
                  Page.Theme = Profile.theme;
              }
        }

3、給用戶以換膚選擇的操作。可以使用DropDownList控件、RadioButton控件(像360安全網址一樣),也可以使用Button控件。爲使代碼簡單明瞭,本例使用Button控件。在Index.aspx頁面創建兩個Button控件,代碼如下(注意兩個按鈕的click事件使用的是同一個處理代碼,即Set_Theme):

<asp:Button ID="btnGreen" runat="server" οnclick="Set_Theme" Text="綠色葉子" />
       <asp:Button ID="btnBlue" runat="server" οnclick="Set_Theme" Text="藍天白雲" />

4、在Index.aspx.cs代碼文件中,對Set_Theme處理程序編寫如下代碼:

protected void Set_Theme(object sender, EventArgs e)
       {
            Button btn = (Button)sender;
            if (btn.Text == "綠色葉子")
           {
             Profile.theme = "greenleaf";
           }
           else
          {
           Profile.theme = "bluesky";
          }
            Response.Redirect("Index.aspx"); //強行對本頁面刷新
       }

注意在App_Themes中必須有“greenSkin”和“blueSkin”兩個主題。

首先使用用戶名登錄,再運行Index.html頁面,嘗試單擊“綠色”、“藍色”按鈕,檢查是否達到自己設定的主題效果。註銷用戶,再次以同樣用戶名登錄,測試上次設定的外觀是否起作用。

注意:以上辦法只能對一個頁面的外觀進行設置,不能對網站所有外觀進行設置。

解決辦法:

1、將所有內容都做到一個頁面上,小頁面做爲tab,類似360安全網址導航

2、對每個頁面都做類似的上例的處理,即使大網站,可能也只有幾個十幾個頁面,一一設置並不麻煩;

3、只設置主頁頁面,其它不設置,目前許多網站就是這樣做的;

4、使用基類的辦法對Page進行定義,一次代碼完成對所有網頁的換膚,這個辦法筆者還沒有試過。仍然在設想Visual Studio未來的版本會有更簡單的辦法。

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章