主題機制使得開發人員能夠很輕鬆地對頁面的設置實現更多的選擇。它在處理主題的設置時提供了清晰的目錄結構,提供了良好的擴展性。所以使用主題能夠提升設計和維護網站的效率。css
主題是有關頁面和控件的外觀屬性設置的集合,由一組元素組成,包括外觀文件、級聯樣式表(CSS)、圖像和其餘資源。程序員
主題至少包含外觀文件(.skin文件),主題是在網站或Web服務器上的特殊目錄中定義的,通常把這個特殊目錄稱爲專用目錄,目錄的名字爲App_Themes。App_Themes目錄下能夠包含多個主題目錄,主題目錄的命名由程序員決定。而外觀文件等資源則是放在主題目錄下的。web
主題的組成元素安全
1.外觀文件服務器
外觀文件又稱皮膚文件,是具備文件擴展名.skin的文件,在皮膚文件裏,能夠定義控件的外觀屬性。網站
外觀文件形式通常具備下面形式:spa
<asp:Label runat="serve BackColor="Blue"></asp:Label>設計
上面定義了Label控件的一個皮膚,能夠在網頁引用該皮膚去設置Label控件的外觀。code
2.級聯樣式表server
級聯樣式表就是CSS文件,是具備文件擴展名.css的文件,也是用來存放定義控件外觀屬性的代碼的文件。
3.圖像和其餘資源
圖像就是圖形文件,其餘資源多是聲音文件、腳本文件等。有時候爲了控件美觀,只是靠顏色、大小和輪廓來定義並不能知足要求,這時候就會考慮把一些圖片、聲音等加到控件外觀屬性定義中去。
主題的分類
主題按照應用範圍可分爲頁面主題和全局主題。
頁面主題應用於單個Web應用程序它是一個位於\App_Themes文件夾下的主題文件夾,包含控件外觀、樣式表、圖形文件和其餘資源。
全局主題可應用於服務器上的全部網站,全局主題和頁面主題相似,全局主題存儲在Themes文件夾中,服務器上的任何網站以及任何網站中的任何頁面均可以引用全局主題。
主題的特性
1.主題只在ASP.NET控件中有效。
2.母版頁上不能設置主題,但主題能夠在內容頁面上設置。
3.主題上設置的ASP.NET控件的樣式覆蓋頁面上設置的樣式。
4.若是在頁面上設置EnableTheming="false",則主題無效。
5.在頁面中動態設置主題,必須在頁面生命週期Page_Preinit事件以前進行設置。
6.主題包括.skin和.css。
使用主題時可能會引發安全問題
1.改變控件的行爲,致使有異於預期的行爲。
2.插入客戶端腳本,致使跨站點式腳本風險。
3.改變驗證。
4.公開敏感信息。
緩解措施
1.使用正確的訪問控制設置來保護全局和應用程序的主題目錄,應只容許受信任的用戶將文件寫入主題目錄中。
2.不要使用來自不受信任的主題,若要在網站上使用來自單位外部的主題,應先檢查是否包含惡意代碼。
3.不要在查詢數據中公開主題名稱,惡意用戶能夠經過此信息來使用開發人員不知道的主題,從而公開敏感信息。
主題的建立
1.右鍵單擊要爲之建立主題的網站項目,在彈出的菜單中選擇「添加ASP.NET文件夾」|「主題」命令。此時就會在該網站項目下添加一個名爲App_Themes文件夾,並在該文件夾中自動添加一個默認名爲主題1的文件夾。
2. 右鍵單擊主題1文件夾,在彈出的菜單裏選擇「添加」命令,彈出添加菜單,該菜單提供了在主題1文件夾裏能夠添加的文件的模板。
3. 選擇新建項,在彈出對話框裏選擇「外觀文件」,修改文件名爲Skin1,單擊「添加」,Skin1.skin就會添加在Themes1目錄下。
主題的應用
在網頁中使用某個主題,只需在網頁定義中加上「Theme=[主題目錄]」屬性,示例代碼以下:
<%@ Page Theme="主題1"%>
經過把屬性Themes設置爲Themes1來把該主題應用於網頁。
爲了將主題應用於整個項目,能夠項目的根目錄下的Web.config文件裏進行配置,示例代碼以下:
1 <configuration> 2 <system.web> 3 <Pages Themes="主題1"></Pages> 4 </system.web> 5 </configuration>
SkinID的應用
SkinID是ASP.NET爲Web控件提供的一個聯繫到皮膚的屬性,用來標識控件使用哪一種皮膚。有時須要同時爲一種控件定義不一樣的顯示風格,這時能夠在皮膚文件中定義SkinID屬性來區別不一樣的顯示風格,例如,在LabelSkinFile1.skin文件中對Label控件定義了三種顯示風格的皮膚,代碼以下:
1 <asp:Label runat="server" BackColor="Red"></asp:Label> 2 <asp:Label runat="server" SkinID="Style2"BackColor="Pink"></asp:Label> 3 <asp:Label runat="server" SkinID="Style3" BackColor="Green"></asp:Label>
主題的禁用
當不但願主題重寫頁和控件外觀的本地設置時,就能夠利用禁用方法來禁用主題。禁用頁的主題經過設置@Page指令的EnableTheming屬性爲false來實現,例如:
<%@ Page EnableTheming="false"%>
禁用控件的主題經過將控件的EnableTheming屬性設置爲false來實現,例如:
<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
使用實例1:
在項目中新建App_Themes文件夾,添加主題1文件夾,並新建外觀文件Skin1.skin,代碼以下:
1 <asp:Label runat="server" BackColor="Green"/> 2 <asp:TextBox runat="server" BackColor="Pink"/> 3 <asp:Button runat="server" BackColor="White" ForeColor="Blue" Font-Italic="True" Font-Bold="true"/>
在Default.aspx中,在網頁定義中添加Theme="主題1"屬性,並添加以下代碼:
1 <div> 2 <table> 3 <tr> 4 <td> 5 <asp:Label ID="Label1" runat="server" Text="用戶名:" /> 6 </td> 7 <td> 8 <asp:TextBox ID="TextBox1" runat="server" /> 9 </td> 10 </tr> 11 <tr> 12 <td> 13 <asp:Label ID="Label2" runat="server" Text="密碼:" /> 14 </td> 15 <td> 16 <asp:TextBox ID="TextBox2" runat="server" /> 17 </td> 18 </tr> 19 <tr> 20 <td> 21 <asp:Button ID="Button1" runat="server" Text="登陸"/> 22 </td> 23 </tr> 24 </table> 25 </div>
使用實例2:
在項目中新建App_Themes文件夾,添加主題1文件夾,並新建外觀文件Skin1.skin,代碼以下:
1 <asp:Label runat="server" BackColor="Yellow"/> 2 <asp:TextBox runat="server" BackColor="Yellow"/> 3 <asp:Button runat="server" BackColor="White" ForeColor="Yellow" Font-Bold="true"/> 4 <asp:DropDownList runat="server" BackColor="Yellow"/>
添加主題2文件夾,並新建外觀文件Skin2.skin,代碼以下:
1 <asp:Label runat="server" BackColor="Pink"/> 2 <asp:TextBox runat="server" BackColor="Pink"/> 3 <asp:Button runat="server" BackColor="White" ForeColor="Pink" Font-Bold="true"/> 4 <asp:DropDownList runat="server" BackColor="Pink"/>
添加主題3文件夾,並新建外觀文件Skin3.skin,代碼以下:
1 <asp:Label runat="server" BackColor="Violet"/> 2 <asp:TextBox runat="server" BackColor="Violet"/> 3 <asp:Button runat="server" BackColor="White" ForeColor="Violet" Font-Bold="true"/> 4 <asp:DropDownList runat="server" BackColor="Violet"/>
在Default.aspx中,在網頁定義中添加Theme="主題1"屬性,並添加以下代碼:
1 <div> 2 <table> 3 <tr> 4 <td> 5 <asp:Label ID="Label1" runat="server" Text="用戶名:" /> 6 </td> 7 <td> 8 <asp:TextBox ID="TextBox1" runat="server" /> 9 </td> 10 </tr> 11 <tr> 12 <td> 13 <asp:Label ID="Label2" runat="server" Text="密碼:" /> 14 </td> 15 <td> 16 <asp:TextBox ID="TextBox2" runat="server" /> 17 </td> 18 </tr> 19 <tr> 20 <td colspan="2"> 21 <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"> 22 <asp:ListItem Value="主題1">黃色</asp:ListItem> 23 <asp:ListItem Value="主題2">粉色</asp:ListItem> 24 <asp:ListItem Value="主題3">紫色</asp:ListItem> 25 </asp:DropDownList> 26 </td> 27 </tr> 28 <tr> 29 <td colspan="2"> 30 <asp:Button ID="Button1" runat="server" Text="登陸"/> 31 </td> 32 </tr> 33 </table> 34 </div>
在Default.aspx.cs中,添加Page_PreInit事件,設置當前的被選中主題(主題的設置必須在Page_Load事件以前)。
1 protected void Page_PreInit(object sender, System.EventArgs e) 2 { 3 if (IsPostBack) 4 { 5 Page.Theme = Request["DropDownList1"]; 6 } 7 }