在 ASP.NET 2.0 中建立 Web 應用程式主題

來源:互聯網
上載者:User
asp.net|web|程式|建立

引言

主題是 Microsoft ASP.NET 2.0 的一項新增功能,使用此功能可以一次定義一組控制項的外觀,並可以將該外觀應用於整個 Web 應用程式。例如,通過利用主題功能,您可以在一個中心位置為應用程式中的所有 TextBox 控制項定義共同的外觀,如背景顏色和前景顏色。使用主題功能可以輕鬆建立並維護整個網站外觀的一致性。

主題與階層式樣式表並不相同。使用階層式樣式表可以控制瀏覽器上的 HTML 標籤的外觀。而主題則應用在伺服器上,並適用於 ASP.NET 控制項的屬性。例如,您可以使用主題來指定 GridView 控制項是否顯示頁首或頁尾,但不能使用階層式樣式表來執行此操作。

主題與主版頁面也並不相同。主版頁面也是 ASP.NET 2.0 的一項新增功能,使用此功能可以為 Web 應用程式中的多個內容頁指定共同的布局。使用主題可以控制頁面中各個控制項的外觀,而主版頁面則不能。(在設計 Web 應用程式時,您可以並且可能將同時使用主版頁面和主題。)

在本文中,您要學習如何在 ASP.NET 2.0 應用程式中利用主題功能。您會學習到如何在主題中同時使用階層式樣式表和映像。此外,我們還將學習如何在運行時動態載入主題。

返回頁首

建立和應用簡單主題

ASP.NET 2.0 不附帶任何預設主題。當 ASP.NET 2.0 發布之後,您可以從網站(例如 www.ASP.net)上下載並使用主題。但是,現在,您必須從頭開始建立自己要使用的所有主題。

此外,系統會警告您 Microsoft Visual Web Developer 不提供任何用於建立主題的工具支援。儘管您確實可以使用 Visual Web Developer 來建立主題並將主題應用於網頁;但在 網頁瀏覽器中實際開啟頁面前,您看不到將主題應用於頁面的效果。換句話說,Visual Web Developer 不提供任何用於建立主題的設計器支援。

瞭解這些警告後,我們繼續建立簡單主題。建立主題所需的第一步是在應用程式的根目錄中建立一個名為 Themes 的新檔案夾。(當 ASP.NET 2.0 的 BETA 2 版本發布後,您就需要將此檔案夾命名為 Application_Themes 了。)當您嘗試應用主題時,ASP.NET Framework 將自動尋找此檔案夾。

建立了 Themes 檔案夾之後,您可以通過向該 Themes 檔案夾中添加子檔案夾來建立一個或多個主題。我們將建立的第一個主題名為 OrangeTheme。因此,我們需要在 Themes 檔案夾中添加一個名為 OrangeTheme 的新檔案。

然後,我們需要將 Skin 檔案添加到 OrangeTheme 檔案夾中。Skin 檔案是實際包含主題所應用的格式設定的檔案。換句話說,該檔案包含主題所應用的一個或多個控制面板。您可以將 Skin 檔案命名為任何名稱,只要以副檔名 .Skin 結尾即可。

一個主題可以包含一個 Skin 檔案,也可以包含數百個 Skin 檔案。您可以根據需要將 Skin 檔案命名為任何名稱。這沒有關係,因為在將主題應用於頁面時,ASP.NET Framework 將把所有 Skin 檔案合并在一起,而將這些檔案視為單個 Skin 檔案。

通過使用 Theme 或 @ Page 指令的 StyleSheetTheme 屬性,或者通過在應用程式設定檔中設定 pages 元素(ASP.NET 設定架構)元素,都可以應用主題。Visual Web Developer 只以可視方式顯示使用 StyleSheetTheme 屬性應用的主題。

建立頁面主題

  1. 在方案總管中,右擊要為其建立頁面主題的網站名稱,然後單擊“添加 ASP.NET 檔案夾”。

  2. 單擊“主題”。

    如果 App_Themes 檔案夾不存在,Visual Web Developer 則會建立該檔案夾。Visual Web Developer 即為主題建立一個新檔案夾,作為 App_Themes 檔案夾的子檔案夾。

  3. 鍵入新檔案夾的名稱。

    此檔案夾的名稱也是頁面主題的名稱。例如,如果您建立一個名為 \App_Themes\FirstTheme 的檔案夾,則主題的名稱為 FirstTheme。

  4. 將構成主題的控制面板、樣式表和映像的檔案添加到新檔案夾中。

我們將在主題 OrangeTheme 中使用列表 1 中的 Skin 檔案(名為 FormControls.Skin):

列表 1:FormControls.Skin

<asp:TextBox    BackColor="Orange"    ForeColor="DarkGreen"    Runat="Server" /><asp:Button    BackColor="Orange"    ForeColor="DarkGreen"   Font-Bold="True"   Runat="Server" />

您應當注意到了,列表 1 中的 Skin 檔案包含 TextBox 和 Button 控制項的聲明。分別為這兩個控制項的 BackColor 和 ForeColor 屬性提供了值。此外,還聲明 Button 控制項使用加粗字型。

請注意,您可以通過聲明一個控制項執行個體並設定一個或多個控制項屬性,從而使用 Skin 檔案指定控制項的外觀。您可以在 Skin 檔案中設定的控制項屬性是有限的。通常,僅可以設定外觀屬性。例如,您可以設定 TextBox 控制項的 BackColor、ForeColor 甚至 Text 屬性。但是不能在 Skin 檔案中設定 TextBox 控制項的 AutoPostBack 屬性。

此外,您不能將外觀用於每個 ASP.NET 控制項。例如,您不能將外觀用於 重複器控制項、Literal 控制項或 LoginView 控制項,也不能將外觀用於 User 控制項(但是,可以將外觀應用於 User 控制項中所包含的控制項)。

將 FormControls 外觀應用於頁面之後,頁面中的每個 TextBox 和 Button 控制項都將使用在 Skin 檔案中指定的屬性值來顯示。即便已經為該頁面中的 TextBox 控制項的 BackColor 屬性指定了值,也是如此。Skin 檔案將替代頁面中的控制項屬性。

列表 2 中的頁面應用了主題 OrangeTheme:

列表 2:OrangePage.aspx

<%@ Page Theme="OrangeTheme" %><html><head runat="server">    <title>Orange Page</title></head><body>    <form id="form1" runat="server">    Enter your name:    <br />    <asp:TextBox        ID="txtName"         Runat="Server" />    <br /><br />    <asp:Button        ID="btnSubmit"         Text="Submit Name"         Runat="Server" />        </form></body></html>

列表 2 中的頁麵包含用於詢問使用者名稱的表單。除了在頁面頂部添加了主題指令之外,此頁面沒有任何特殊的地方。該主題指令用於將 OrangeTheme 主題應用於頁面。

當您在 網頁瀏覽器中開啟列表 2 中的頁面時,TextBox 和 Button 控制項將使用在 Skin 檔案中聲明的格式設定來顯示(請參見圖 1)。


圖 1:將簡單主題應用於 ASP.NET 頁面

Skin 檔案可以包含比列表 1 中所包含的格式設定更複雜的格式設定。例如,列表 3 中的 GridView.Skin 檔案包含了用作 GridView 控制項的格式設定的指令碼和模板。(在 ASP.NET 2.0 Framework 中,GridView 控制項替換了 DataGrid 控制項。)

列表 3:GridView.Skin (C#)

<script language="C#" runat="Server">  string DisplayInStock(object inStock)  {    if ( (Int16)inStock > 0 )        return "In Stock";    else        return "Out of Stock";  }</script><asp:GridView     AutoGenerateColumns="false"    ShowHeader="false"    CellPadding="5"    Font-Name="Arial"    Runat="Server">    <AlternatingRowStyle BackColor="LightBlue" />    <Columns>          <asp:TemplateField>            <ItemTemplate>            <%# Eval("ProductName") %>            </ItemTemplate>          </asp:TemplateField>          <asp:BoundField             DataField="UnitPrice"             DataFormatString="{0:c}" />          <asp:TemplateField>            <ItemTemplate>            <%# DisplayInStock(Eval("UnitsInStock")) %>            </ItemTemplate>          </asp:TemplateField>    </Columns></asp:GridView>

列表 3:GridView.Skin (Visual Basic .NET)

<script language="VB" runat="Server">  Function DisplayInStock(inStock As Object) As String    If CType(inStock, Int16) > 0 Then        Return "In Stock"    Else        Return "Out of Stock"   End If  End Function</script><asp:GridView     AutoGenerateColumns="false"    ShowHeader="false"    CellPadding="5"    Font-Name="Arial"    Runat="Server">    <AlternatingRowStyle BackColor="LightBlue" />    <Columns>          <asp:TemplateField>            <ItemTemplate>            <%# Eval("ProductName") %>            </ItemTemplate>          </asp:TemplateField>          <asp:BoundField             DataField="UnitPrice"             DataFormatString="{0:c}" />          <asp:TemplateField>            <ItemTemplate>            <%# DisplayInStock(Eval("UnitsInStock")) %>            </ItemTemplate>          </asp:TemplateField>    </Columns></asp:GridView>

列表 3 中的 Skin 檔案包含一個 GridView 控制項,該控制項具有三列(請參見圖 2)。第一列是一個 TemplateField 列,用於顯示 ProductName 欄位的值。第二列是一個 BoundField 列,用於顯示 UnitPrice 欄位(請注意,此列使用 DataFormatString 屬性將價格形式設定為貨幣)。最後,第三列是另一個 TemplateField 列。此列將從 Skin 檔案所包含的指令碼中調用 DisplayUnitsInStock 方法,以顯示文本“In Stock”或“Out of Stock”。


圖 2:複雜的 GridView 外觀

您可以將 GridView.Skin 外觀用於列表 4 中的頁面(假如您已將該外觀添加到了 OrangeTheme 檔案夾中)。

列表 4:SkinnedGridView.aspx

<%@ Page Theme="OrangeTheme" %><html><head runat="server">    <title>Skinned GridView</title></head><body>    <form id="form1" runat="server">    <asp:GridView        ID="GridView1"        DataSourceID="ProductSource"        Runat="Server" />        <asp:SqlDataSource        ID="ProductSource"        ConnectionString="Server=localhost;Trusted_Connection=true;Database=Northwind"        SelectCommand="Select ProductName,UnitPrice,UnitsInStock FROM Products"        Runat="Server" />            </form></body></html>

列表 4 中的頁面顯示了 Products 資料庫表中的內容。該頁麵包含一個綁定到 SqlDataSource 控制項的 GridView 控制項。SqlDataSource 控制項用於串連到 Northwind 資料庫表,以檢索該資料庫中的資料。

返回頁首

預設面板與命名外觀

在上一部分中,您學習了如何建立應用於某一類控制項的所有執行個體的外觀。例如,您學習了如何建立應用於所有 TextBox 控制項或 GridView 控制項的外觀。但是,您很快就會發現,您需要為同一控制項建立多個外觀。例如,您會希望能夠將不同外觀應用於不同頁面(甚至同一頁面)中的 GridView 控制項。

如果您建立的是“命名外觀”,那麼就可以建立應用於同一類控制項的多個外觀。命名外觀就是包含 SkinID 的外觀。例如,列表 5 中的 Skin 檔案包含了三個可以應用於 TextBox 控制項的外觀。

列表 5:TextBox.Skin

<asp:TextBox    BackColor="Green"    Runat="Server" />    <asp:TextBox    SkinID="BlueTextBox"    BackColor="Blue"    Runat="Server" />    <asp:TextBox    SkinID="RedTextBox"    BackColor="Red"    Runat="Server" />    

在列表 5 中,第一個 TextBox 外觀稱為預設面板。由於該外觀不包含 SkinID,因此,預設情況下,該外觀應用於所有 TextBox 控制項。而第二個和第三個 TextBox 外觀包含各自的 SkinID 屬性值。只有在通過其 SkinID 值明確引用這兩個外觀時,它們才應用於 TextBox 控制項。

例如,列表 6 中的頁面使用了 TextBox.Skin Skin 檔案中的全部三個外觀。

列表 6:SkinnedTextBoxes.aspx

<%@ Page Theme="OrangeTheme" %><html><head runat="server">    <title>Skinned TextBoxes</title></head><body>    <form id="form1" runat="server">    <asp:TextBox        id="TextBox1"        Runat="Server" />    <br />    <asp:TextBox        id="TextBox2"        SkinID="BlueTextBox"        Runat="Server" />    <br />    <asp:TextBox        id="TextBox3"        SkinID="RedTextBox"        Runat="Server" />    </form></body></html>

由於列表 6 中的第一個 TextBox 控制項不包含 SkinID 屬性,因此其外觀為預設面板。第二個 TextBox 控制項的外觀為 BlueTextBox 外觀,最後一個 TextBox 控制項的外觀為 RedTextBox 外觀(請參見圖 3)。


圖 3:應用預設面板和命名外觀

返回頁首

將主題應用於整個應用程式

到目前為止,我們已經通過使用“頁面”指令的主題屬性將多個主題應用於了各個頁面。如果需要,您可以在 Web 設定檔中將某個主題應用於整個應用程式。

例如,列表 7 中的 Web 設定檔將 OrangeTheme 主題應用於了應用程式中的每個頁面。

列表 7:Web.Config

<configuration>    <system.web>   <pages theme="OrangeTheme" />    </system.web></configuration>

列表 7 中的 Web.Config 檔案將把 OrangeTheme 主題應用於尚未在“頁面”指令中指定主題的所有頁面。換句話說,“頁面”指令能夠替代 Web.Config 檔案中所指定的任何主題。

同一應用程式可以包含用於指定主題的多個 Web.Config 檔案。您可以將不同的 Web 設定檔添加到不同的子檔案夾中,每個 Web 設定檔都可以指定不同的主題。

返回頁首

主題與 StyleSheetTheme

將主題應用於頁面時,主題中所設定的任何控制項屬性都優先於頁面中所設定的任何屬性。例如,如果主題指定所有 TextBox 控制項的背景都應當顯示為橙色,那麼即使個別 TextBox 控制項的 BackColor 屬性具有不同的值,頁面中所有 TextBox 控制項的背景也仍然都將顯示為橙色。

但是,在某些情況下,您會希望替代頁面中的特定外觀設定。例如,當頁面中存在多個 TextBox 控制項時,您可能會希望將某個 TextBox 控制項的 BackColor 更改為紅色,以便反白該控制項。在這種情況下,您就需要利用 StyleSheetTheme。StyleSheetTheme 的工作方式與普通主題非常相似,只不過它可以被個別控制項的屬性所替代。

與普通主題相比,StyleSheetTheme 的工作方式與階層式樣式表更為相似。您可以將階層式樣式表規則替代為指定給個別 HTML 標籤的樣式規則,使用相同的方式也可以將 StyleSheetTheme 屬性設定替代為個別控制項的屬性設定。

例如,列表 8 中的 Skin 檔案包含一個 TextBox 外觀,該外觀將每個 TextBox 控制項的 BackColor 設定為了橙色,將 ForeColor 設定為了綠色。

列表 8:TextBox.Skin

<asp:TextBox    BackColor="Orange"    ForeColor="Green"    Runat="Server" />

假設將列表 8 中的外觀添加到了 OrangeTheme 主題中。列表 9 中的頁面將使用 StyleSheetTheme 屬性而不是 theme 屬性來應用該外觀。

列表 9:StyleSheetThemedTextBox.aspx

<%@ Page StyleSheetTheme="OrangeTheme" %><html><head runat="server">    <title>Style Sheet Themed TextBox</title></head><body>    <form id="form1" runat="server">    <b>First Name:</b>    <asp:TextBox        ID="txtFirstName"        Runat="Server" />            <br /><br />    <b>Last Name:</b>    <asp:TextBox        ID="txtLastName"        BackColor="Yellow"        Runat="Server" />            <br /><br />        <asp:Button        Text="Submit"        Runat="Server" />    </form></body></html>

當您開啟列表 9 中的頁面時,第一個 TextBox 控制項的 BackColor 將顯示為橙色,而第二個 TextBox 控制項的 BackColor 將顯示為黃色(請參見圖 4)。第一個 TextBox 控制項的 BackColor 是由顯示在“頁面”指令中的 StyleSheetTheme 屬性設定的。第二個 TextBox 控制項的 BackColor 屬性值是由頁面本身設定的。


圖 4:使用 StyleSheetTheme

返回頁首

映像和主題

您可以在主題中包含映像。處理某些控制項(例如 Menu、TreeView 或 BulletedList 控制項)時,在主題中添加映像會很有用。

例如,列表 10 包含用於 BulletedList 控制項的外觀。該外觀包含對 OrangeTheme 檔案夾的 BulletImages 子檔案夾中名為 OrangeBullet 的映像的引用。

列表 10:BulletedList.Skin

<asp:BulletedList    BulletStyle="CustomImage"    BulletImageUrl="BulletImages/OrangeBullet.gif"    Runat="Server" />

列表 11 中的頁面使用 BulletedList 外觀來顯示 Titles 資料庫表中的書目的項目符號清單。

列表 11:ShowBulletedList.aspx

<%@ Page Theme="OrangeTheme" %><html><head runat="server">    <title>Show BulletedList</title></head><body>    <form id="form1" runat="server">    <asp:BulletedList        ID="BulletedTitles"        DataSourceID="TitleSource"        DataTextField="Title"        Runat="Server" />            <asp:SqlDataSource        ID="TitleSource"        ConnectionString="Server=localhost;Trusted_Connection=true;Database=Pubs"        SelectCommand="SELECT Title FROM Titles"        Runat="Server" />    </form></body></html>

開啟列表 11 中的頁面時,BulletedList 控制項將從 Titles 資料庫表中檢索標題列表,並顯示該列表。請注意,BulletList 外觀將 OrangeBullet 映像應用到了 BulletedList 控制項中(請參見圖 5)。


圖 5:應用程式套件含映像的主題

返回頁首

階層式樣式表和主題

您還可以在主題中使用階層式樣式表。如果您將階層式樣式表添加到主題檔案夾中,那麼當您將該主題應用於某個頁面時,階層式樣式表將自動應用於該頁面。如果 Themes 檔案夾的內容被編譯為某一類,則 Themes 檔案夾中存在的任何階層式樣式表都將被添加到該類中。

例如,假設您要為頁面中的所有超連結建立懸停效果。您可以使用列表 12 中的階層式樣式表,以便當滑鼠移至上方在超連結上時使超連結的顏色更改為橙色。

列表 12:Hover.css

A:hover{    color: orange;}

如果將列表 12 中的階層式樣式表添加到 OrangeTheme 檔案夾中,那麼當 OrangeTheme 應用於某個頁面時,樣式表將自動應用於該頁面。使樣式表自動應用於頁面的一個要求是該頁面必須包含伺服器端 <head runat="Server" /> 標記。此標記用於使連結呈現樣式表中的樣式。

由於列表 13 中的頁麵包含 <head runat="Server" /> 標記,並且應用了 OrangeTheme,因此該頁面將自動連結到 Hover.css 樣式表。

列表 13:Menu.aspx

<%@ Page Theme="OrangeTheme" %><html><head runat="server">    <title>Menu</title></head><body>    <form id="form1" runat="server">    <a href="Home.aspx">Home</a>    <br />    <a href="Products.aspx">Products</a>    <br />    <a href="Services.aspx">Services</a>        </form></body></html>

如果開啟列表 13 中的頁面並將滑鼠移至上方在某個超連結上,該超連結將變為橙色(請參見圖 6)。


圖 6:在主題中使用階層式樣式表

可以在一個主題中包含多個階層式樣式表。如果您添加了多個階層式樣式表,則伺服器端 <head runat="Server"/> 標記將自動產生每個樣式表的連結。

返回頁首

動態載入主題

假設您要動態更改網站的外觀。您可能會希望使用者在與您的 Web 應用程式進行互動時,可以自訂 Web 應用程式的顏色和總體外觀。通過利用動態載入主題操作,您可以將此功能提供給 ASP.NET 2.0 應用程式的使用者。

通過修改 Page 對象的 theme 屬性值,您可以在運行時修改頁面使用的主題。您可以將任一有效主題的名稱指派給此屬性。您必須瞭解使用 theme 屬性時的一個限制。即 theme 屬性只能在 Page PreInit 事件發生過程中或發生之前設定。

在頁面的 PreInit 方法的處理常式中,設定頁面的 Theme 屬性。

下面的程式碼範例示範如何根據查詢字串中傳遞的值按條件設定頁面主題。

Protected void Page_PreInit(object sender, EventArgs e)
{
    switch (Request.QueryString["theme"])
    {
        case "Blue":
            Page.Theme = "BlueTheme";
            break;
        case "Pink":
            Page.Theme = "PinkTheme";
            break;
    }
}

例如,假設您在 Themes 檔案夾中建立了兩個新的主題檔案夾,名為 RedTheme 和 YellowTheme。您可以將列表 14 中的外觀添加到 RedTheme 檔案夾中,將列表 15 中的外觀添加到 YellowTheme 檔案夾中(這些外觀將把 DropDownList 控制項的 BackColor 更改為紅色或黃色)。

列表 14:RedTheme/DropDownList.Skin

<asp:DropDownList    BackColor="Red"    Runat="Server" />

列表 15:YellowTheme/DropDownList.Skin

<asp:DropDownList    BackColor="Yellow"    Runat="Server" />

列表 16 中的頁面將根據使用者在 DropDownList 控制項中的選擇動態載入 RedTheme 或 YellowTheme 主題(請參見圖 7)。請注意,“請求”集合用於在 PreInit 事件處理常式中檢索使用者的選擇。由於 PreInit 事件在頁面執行循環中引發過早,以至於無法使用 dropTheme DropDownList 控制項的任何屬性,因此您必須使用“請求”集合。


圖 7:動態載入主題

列表 16:DynamicTheme.aspx (C#)

<%@ Page Language="C#" %><script runat="server">    void Page_PreInit(object sender, EventArgs e)    {        Page.Theme = Request["dropTheme"];    }</script><html><head runat="server">    <title>Dynamic Theme</title></head><body>    <form id="form1" runat="server">        <asp:DropDownList        id="dropTheme"        AutoPostBack="true"        Runat="Server">        <asp:ListItem Text="YellowTheme" />        <asp:ListItem Text="RedTheme" />    </asp:DropDownList>    </form></body></html>
以編程方式應用控制面板
在頁面的 PreInit 方法的處理常式中,設定控制項的 SkinID 屬性。

下面的程式碼範例示範如何設定 Calendar 控制項的 SkinID 屬性。
void Page_PreInit(object sender, EventArgs e)
{
    Calendar1.SkinID = "MySkin";
}

返回頁首

結論

在本文中,我們學習了 ASP.NET 2.0 主題的基礎知識和進階應用程式。主題是一項強大的 ASP.NET Framework 新增功能。通過利用主題功能,可以顯著減少您需要添加到各個 ASP.NET 頁面的內容量。使用主題功能可以一次定義控制項的外觀,並可以將該外觀應用於整個 Web 應用程式。因此,使用主題功能可以輕鬆建立具有一致的並可維護的外觀設計的網站。

返回頁首

參考資料

ASP.NET Unleashed

ASP.NET v. 2.0-The Beta Version

ASP.NET 2.0 Beta Preview

Introducing Microsoft ASP.NET 2.0

作者簡介

Stephen Walther 編寫了有關 ASP.NET 的暢銷書 ASP.NET Unleashed。此外,他還是 ASP.NET Community Starter Kit(Microsoft 開發的 ASP.NET 應用程式範例)的體繫結構設計師和主要開發人員。他還通過自己的公司 Superexpert (http://www.superexpert.com/) 為美國的公司(包括 NASA 和 Microsoft)提供 ASP.NET 培訓。




相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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