在 Asp.NET 2.0 出現以前， 給網站提供更換主題功能是一項繁重的工作，鑒於每切換一套主題，都需要在頁面更改相應的圖片、字型、網頁樣式等等細小的元素，因而在代碼編寫之餘，更要求資源的規範管理。而往往在網站的編寫初期，如果沒有一定的經驗，很難全面的考慮到資源檔的細緻歸類及放置問題。最終導致網站改版時，大量的遷移和更改，稍有不慎，還會引發檔案丟失的問題。
現在這些擔憂，都在 Asp.NET 2.0 中得到了完善的解決。首先，您可以通過簡單的代碼編寫實現複雜的功能；其次，Asp.NET 2.0 在處理主題的問題時提供了清晰的目錄結構，使得資源檔的層級關係非常清晰，在易於尋找和管理的同時，提供的良好的擴充性。
下面就讓我們通過一個Demo感受一下Asp.NET 2.0 的新特性。
1. 建立主題檔案夾：
在應用程式的根目錄上單擊右鍵，點選 Add Folder 下的 Theme Folder 選項後，會在根目錄下出現名為 App_Themes 的空檔案夾，所有的與主題有關的資源檔都會儲存在這個檔案夾下。
在本例中，選擇以顏色不同的方式來區分主題，需要在主題檔案夾（App_Themes）下建立兩個以顏色為名稱的檔案夾。
操作方式：在 App_Themes 檔案夾上單擊右鍵，將滑鼠移動到 Add Folder 選項上，發現在主題檔案夾（App_Themes）新增檔案夾的類型只有一種 Theme Folder：
建立兩個主題檔案夾，分別命名為 BlueTheme 和 PorpleTheme。
將主題 BlueTheme 應用於頁面：
| <%@ Page Language="C#" StylesheetTheme="BlueTheme" %> |
3. 分別給每個主題添加 Skin 檔案：
Skin 檔案是實際包含主題所應用的格式設定的檔案。一個主題可以包含一個或多個 Skin 檔案。這沒有關係，因為在將主題應用於頁面時，ASP.NET Framework 將把某個主題下的多個 Skin 檔案合在一起，而將這些檔案視為一個 Skin 檔案。
您可以根據需要將 Skin 檔案命名為任何名稱，在檔案中可以通過聲明某個控制項的執行個體設定一個或多個此控制項中的屬性，從而使用 Skin 檔案指定控制項的外觀。（註：並不是所有屬性都可以設定，能設定的多為外觀屬性）。
本例中先在主題 BlueTheme 中建立新檔案 Control.skin，在檔案中對三個控制項的某些屬性進行了設定。
<asp:TextBox BackColor="#c4d4e0" ForeColor="#0b prefix="st1" ?>12c6" Runat="Server" />
<asp:Label ForeColor="#0b12c6" Runat="Server" />
<asp:Button BackColor="#c4d4e0" ForeColor="#0b12c6" Runat="Server" /> |
此時頁面頁面代碼為:
| <body> <form id="form1" runat="server"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td height="23px" colspan="2"></td> </tr> <tr> <td align="center" height="50px"> <asp:Label ID="Label1" runat="server" Text="Enter Your Name:"></asp:Label> </td> <td> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="center" height="50px"> <asp:Label ID="Label2" runat="server" Text="Enter Your Nickname:"></asp:Label> </td> <td> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td> </tr> <tr> <td align="center" height="50px"> <asp:Button ID="Button1" runat="server" Text=" OK " /> </td> <td> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </td> </tr> <tr> <td height="23px" colspan="2"></td> </tr> <tr> <td colspan="2"><br /><br /></td> </tr> </table> </form> </body> |
此時頁面效果為:
4. 使用 CSS 檔案做更細緻的設定：
對於一套皮膚的設定,我們不僅需要對網頁中的控制項進行設定,還應該做到對網頁中的任一顯示元素都進行隨心所欲的修改,這時,我們可以通過對CSS樣式表檔案的控制來達到目的.
本例中在主題 BlueTheme 中建立了新檔案 Default.css, 在此檔案中對頁面中的 body,table,td 元素進行了設定.
| body { margin:0; padding:0; overflow:hidden; } .tableStyle .tdStyle |
再更改部分頁面代碼調用 CSS 樣式後, 效果如下
5. 主題的動態切換：
在前台頁面 Default.aspx 中添加一個下拉框,用來進行主題的選擇.
| <tr> <td colspan="2"> <br /> 您可以在此處選擇頁面主題： <asp:dropdownlist id="ChooseTheme" runat="server" autopostback="true"> <asp:ListItem Value="BlueTheme">請選擇顏色</asp:ListItem> <asp:ListItem Value="BlueTheme">藍色</asp:ListItem> <asp:ListItem Value="PorpleTheme">紫色</asp:ListItem> </asp:dropdownlist> <br /><br /><br /> </td> </tr> |
在後台頁面 Default.aspx.cs 中添加代碼用來在每次重新整理頁面時替換新選的主題.
| protected void Page_PreInit(object sender, System.EventArgs e) { Page.Theme = Request["ChooseTheme"]; } |
點選下拉框中的選項,主題便會在頁面重新整理後改變,如:把藍色主題切換為紫色主題，效果如下：
以上，便是 ASP.NET 2.0 中新增的主題功能，利用此項功能，我們不僅可以快速的將各式各樣的外觀應用於整個 Web 應用程式。還可以更加輕鬆的完成網站的擴充和維護工作。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
