1、12了解主題并掌握建立和使用主題的方法了解主題并掌握建立和使用主題的方法理解母版頁并能建立母版頁理解母版頁并能建立母版頁掌握利用母版頁創建一致網頁布局的方法掌握利用母版頁創建一致網頁布局的方法掌握建立和使用用戶控件的方法掌握建立和使用用戶控件的方法熟悉利用熟悉利用Web部件實現個性化用戶界面的方法部件實現個性化用戶界面的方法 310.1 主題主題10.1.1 主題概述主題概述10.1.2 自定義主題自定義主題10.1.3 使用主題使用主題10.2 母版頁母版頁10.2.1 母版頁概述母版頁概述10.2.2 創建母版頁創建母版頁10.2.3 創建內容頁創建內容頁10.3 用戶控件用戶控件10.3

2、.1 用戶控件概述用戶控件概述10.3.2 創建用戶控件創建用戶控件10.3.3 使用用戶控件使用用戶控件10.4 Web部件部件10.4.1 Web部件概述部件概述10.4.2 使用使用Web部件部件10.4.3 顯示模式顯示模式10.5 小結小結4在在Web應用程序中，通常所有的頁面都有應用程序中，通常所有的頁面都有統一的外觀和操作方式。統一的外觀和操作方式。ASP.NET 3.5通通過應用主題，來提供統一的外觀。過應用主題，來提供統一的外觀。主題包括外觀文件、主題包括外觀文件、CSS文件和圖片文件文件和圖片文件等。等。5主題是主題是CSS的擴展。的擴展。主題包含外觀文件、主題包含外觀文件

3、、CSS文件、圖片文文件、圖片文件及其它資源（至少應包含外觀文件）。件及其它資源（至少應包含外觀文件）。主題在存儲時與一個主題文件夾對應。主題在存儲時與一個主題文件夾對應。6主題分為全局主題和應用程序主題主題分為全局主題和應用程序主題全局主題：應用于服務器中的所有全局主題：應用于服務器中的所有Web應用程應用程序，存儲于序，存儲于C:WINDOWSMicrosoft.NETFrameworkv2.0.50727ASP.NETClientFilesThemes文件夾下文件夾下（假設操作系統安裝于（假設操作系統安裝于C盤）。盤）。應用程序主題：應用于單個應用程序主題：應用于單個Web應用程序。存應

4、用程序。存儲于儲于Web應用程序的應用程序的App_Themes文件夾中。文件夾中。每個每個App_Themes文件夾中的子文件夾都對應文件夾中的子文件夾都對應一個應用程序主題。一個應用程序主題。 7自定義主題就是建立主題文件夾，然后添加外觀文件（.skin）、樣式文件（.css）、圖片文件到主題文件夾中。主題和外觀文件添加CSS到主題添加圖片文件到主題注意：主題文件夾包含在注意：主題文件夾包含在App_Themes中中8一個主題必須包含外觀文件。一個主題必須包含外觀文件。創建主題：右擊項目，創建主題：右擊項目，“添加添加ASP.NET文件夾文件夾”“主題主題”，在網站根文件下，在網站根文件下

5、自動添加文件夾自動添加文件夾App_Themes，并在該文，并在該文件夾下建立主題文件夾（可重命名如件夾下建立主題文件夾（可重命名如Red） 添加外觀文件：右擊主題文件夾添加外觀文件：右擊主題文件夾Red“添加新項添加新項”“外觀文件外觀文件”（可（可重命名如重命名如Red.skin ）9%-默認的外觀模板。以下外觀僅作為示例提供。默認的外觀模板。以下外觀僅作為示例提供。1. 命名的控件外觀。命名的控件外觀。SkinId 的定義應唯一，因為在同一主題中不允許的定義應唯一，因為在同一主題中不允許一個控件類型有重復的一個控件類型有重復的 SkinId。 2. 默認外觀。未定義默認外觀。未定義 Sk

6、inId。在同一主題中每個控件類型只允許有一。在同一主題中每個控件類型只允許有一個默認的控件外觀。個默認的控件外觀。-%注意：控件外觀樣式只能對外貌屬性進行定義注意：控件外觀樣式只能對外貌屬性進行定義 。10利用屬性利用屬性SkinID可以為同種類型控件定可以為同種類型控件定義多種外觀。義多種外觀。默認外觀：沒有默認外觀：沒有SkinID的外觀。的外觀。 已命名外觀：有已命名外觀：有SkinID的外觀。的外觀。 11當為同種類型控件定義多種外觀后，在網頁中當為同種類型控件定義多種外觀后，在網頁中使用主題時應通過控件的屬性使用主題時應通過控件的屬性SkinID進行區分。進行區分。如代碼：如代碼：

7、 表示表示Label1控件使用控件使用LabelBlue外觀外觀Label2控件使用默認外觀。控件使用默認外觀。12通過在主題中添加通過在主題中添加CSS文件來設置文件來設置HTML或或HTML服務器控件的樣式。服務器控件的樣式。操作方式：操作方式：右擊主題文件夾右擊主題文件夾Red“添加新項添加新項”“樣樣式表式表”，重命名為，重命名為Red.css。然后在。然后在Red.css中添加中添加HTML元素樣式。元素樣式。13通常在通常在App_Themes文件夾中創建文件夾中創建Images文件夾，再添加合適的圖片文件到文件夾，再添加合適的圖片文件到Images文件夾中。文件夾中。要使用要使用

8、Images文件夾中的圖片文件，可文件夾中的圖片文件，可以通過控件的相關鏈接圖片文件的以通過控件的相關鏈接圖片文件的Url屬屬性進行訪問。性進行訪問。14自己定義或從網上下載主題后，就可以自己定義或從網上下載主題后，就可以在在Web應用程序中使用主題了。應用程序中使用主題了。可以在單個網頁中應用主題。可以在單個網頁中應用主題。可以在網站中應用主題。可以在網站中應用主題。可以在網站部分網頁中應用主題。可以在網站部分網頁中應用主題。可以部分禁用主題可以部分禁用主題 。 15 注意：注意：（1）屬性）屬性StylesheetTheme表示主題為本地控件表示主題為本地控件的從屬設置。也就是說，如果在頁

9、面上為某個的從屬設置。也就是說，如果在頁面上為某個控件設置了本地屬性，則主題中與控件本地屬控件設置了本地屬性，則主題中與控件本地屬性相同的屬性將不起作用。性相同的屬性將不起作用。（2）屬性）屬性Theme本地屬性會被覆蓋（主題起作本地屬性會被覆蓋（主題起作用，本地屬性不起作用）。用，本地屬性不起作用）。 16修改應用程序的修改應用程序的web.config文件，可將主文件，可將主題應用于整個網站。例：題應用于整個網站。例： 171.可以將這些頁與它們自己的可以將這些頁與它們自己的web.config文件放在一個文件放在一個文件夾中。文件夾中。2.在根在根web.config文件中創建一個文件中

10、創建一個元素以指元素以指定文件夾。為子文件夾定文件夾。為子文件夾sub1設置了主題：設置了主題： 18可以設置屬性可以設置屬性EnableTheming值為值為false來來禁用主題實現。例如：禁用主題實現。例如：頁面禁用主題：頁面禁用主題：控件禁用主題：控件禁用主題： 19當選擇不同的主題后，頁面中的控件將當選擇不同的主題后，頁面中的控件將呈現不同的外貌。呈現不同的外貌。源程序：源程序：Blue.skin源程序：源程序：Green.skin 源程序：源程序：Theme.aspx 20利用母版頁可以方便快捷地建立統一風利用母版頁可以方便快捷地建立統一風格的格的ASP.NET網站，并且容易管理和

11、維網站，并且容易管理和維護，大大提高了設計效率。護，大大提高了設計效率。21母版頁為網頁定義所需的外觀和標準行為，然后在母母版頁為網頁定義所需的外觀和標準行為，然后在母版頁基礎上創建要包含顯示內容的各個內容頁。當用版頁基礎上創建要包含顯示內容的各個內容頁。當用戶請求內容頁時，這些內容頁將與母版頁合并戶請求內容頁時，這些內容頁將與母版頁合并 輸出。輸出。母版頁優點：母版頁優點：使用母版頁可以集中處理網頁的通用功能，若要修改所有網使用母版頁可以集中處理網頁的通用功能，若要修改所有網頁的通用功能，只需要修改母版頁即可。頁的通用功能，只需要修改母版頁即可。使用母版頁可以方便地創建一組控件和代碼，并應用

12、于一組使用母版頁可以方便地創建一組控件和代碼，并應用于一組網頁。網頁。通過允許控制占位符控件的呈現方式，母版頁可以在細節上通過允許控制占位符控件的呈現方式，母版頁可以在細節上控制最終頁的布局。控制最終頁的布局。22母版頁由特殊的母版頁由特殊的 Master指令識別，該指令替指令識別，該指令替換了用于普通換了用于普通.aspx頁的頁的 Page指令。指令。母版頁包含網頁的所有頂級母版頁包含網頁的所有頂級XHTML元素，如元素，如、和和。通常可以在母版頁上建立一個通常可以在母版頁上建立一個HTML表用于布局。表用于布局。將一個將一個元素用于公司徽標。元素用于公司徽標。使用服務器控件創建站點的標準導

13、航。使用服務器控件創建站點的標準導航。將靜態文本用于版權聲明。將靜態文本用于版權聲明。母版頁可以包含一個或多個可替換內容的占位母版頁可以包含一個或多個可替換內容的占位符控件符控件ContentPlaceHolder。 注意：母版頁文件的擴展名是注意：母版頁文件的擴展名是.master 23母版頁：母版頁：MasterPageSample.master內容頁：內容頁：MasterPageSample.aspx2425創建母版頁的方式和創建創建母版頁的方式和創建Web窗體類似。窗體類似。操作步驟：操作步驟：在解決方案資源管理器中，右擊網站的在解決方案資源管理器中，右擊網站的名稱名稱“添加新項添加新

14、項”，選擇，選擇“母版頁母版頁”，重命名母版頁名稱。重命名母版頁名稱。注意：注意：“選擇母版頁選擇母版頁”復選框表示可以將復選框表示可以將其它母版頁嵌入到當前的母版頁中。其它母版頁嵌入到當前的母版頁中。 26本實例將創建一個母版頁本實例將創建一個母版頁MasterPage.master，該母版頁采用常見，該母版頁采用常見的的“上中下上中下”網頁布局。網頁布局。源程序：源程序：MasterPage.master27內容頁僅包含要與母版頁合并的內容，內容頁僅包含要與母版頁合并的內容，可以在其中添加用戶請求該頁面時要顯可以在其中添加用戶請求該頁面時要顯示的文本和控件。示的文本和控件。 28本實例將創

15、建基于母版頁本實例將創建基于母版頁MasterPage.master的內容頁。的內容頁。源程序：源程序：ContentPage.aspx程序說明：頁面包含一個程序說明：頁面包含一個 Page指令，指令，此指令的屬性此指令的屬性MasterPageFile表示當前頁表示當前頁將與根文件夾下的將與根文件夾下的“MasterPage.master”母版頁合并。母版頁合并。 29用戶控件：用戶控件：在在ASP.NET網頁中，除了使用網頁中，除了使用Web服務器控件外，服務器控件外，還可以根據需要創建重復使用的自定義控件，這些控還可以根據需要創建重復使用的自定義控件，這些控件稱作用戶控件。件稱作用戶控件

16、。用戶控件是一種復合控件，工作原理非常類似用戶控件是一種復合控件，工作原理非常類似于于ASP.NET網頁，可以向用戶控件添加現有的網頁，可以向用戶控件添加現有的Web服務器控件和標記，并定義控件的屬性和服務器控件和標記，并定義控件的屬性和方法。方法。用戶控件在實際工程中常用于統一網頁顯示風用戶控件在實際工程中常用于統一網頁顯示風格。格。30創建創建用戶用戶控件的原因：控件的原因：實現內置實現內置ASP.NET Web服務器控件未提供的功能。服務器控件未提供的功能。提取多個網頁中相同的用戶界面來統一網頁顯示風格。提取多個網頁中相同的用戶界面來統一網頁顯示風格。創建創建用戶用戶控件的方法：控件的方

17、法：一種方法是創建用戶控件，然后將用戶控件作為一個單元對一種方法是創建用戶控件，然后將用戶控件作為一個單元對待，為其定義屬性和方法。待，為其定義屬性和方法。另一種方法是自定義控件，就是編寫一個類，此類從另一種方法是自定義控件，就是編寫一個類，此類從Control或或WebControl派生。派生。方法比較：方法比較：因為可以重用現有的控件，所以創建用戶控件要比創建自定因為可以重用現有的控件，所以創建用戶控件要比創建自定義控件方便得多。義控件方便得多。31用戶控件的文件擴展名為用戶控件的文件擴展名為.ascx。用戶控件沒有用戶控件沒有 Page指令，是包含指令，是包含 Control 指令。指令

18、。用戶控件不能作為獨立文件運行，而必須像處理其它用戶控件不能作為獨立文件運行，而必須像處理其它控件一樣，只有將它們添加到控件一樣，只有將它們添加到 ASP.NET網頁中后才能網頁中后才能使用。使用。用戶控件中沒有用戶控件中沒有、或或元素，這些元素，這些元素必須位于宿主網頁中。元素必須位于宿主網頁中。可以在用戶控件上使用與在可以在用戶控件上使用與在ASP.NET網頁上所用相同網頁上所用相同的的HTML元素（元素（、 或或元素除外）元素除外）和和Web服務器控件。服務器控件。32可以像設計可以像設計ASP.NET網頁一樣設計用戶網頁一樣設計用戶控件，控件，可以將可以將ASP.NET網頁更改為一個用

19、戶控網頁更改為一個用戶控件。針對在已經開發好的件。針對在已經開發好的ASP.NET網頁網頁并打算在整個并打算在整個Web應用程序中訪問其功應用程序中訪問其功能的情況下使用。能的情況下使用。33設計用戶控件設計用戶控件源程序：源程序：SearchUserControl.ascx34將單文件將單文件ASP.NET網頁轉換為用戶控件網頁轉換為用戶控件（1）重命名）重命名.aspx文件擴展名為文件擴展名為.ascx。（2）從頁面中移除）從頁面中移除、和和元素；將元素；將 Page指令更改為指令更改為 Control指令；移除指令；移除 Control指令中除指令中除Language、AutoEvent

20、Wireup（如果存（如果存在）、在）、CodeFile和和 Inherits之外的所有屬之外的所有屬性。性。35將代碼隱藏將代碼隱藏ASP.NET網頁轉換為用戶控件網頁轉換為用戶控件（1）重命名）重命名.aspx文件擴展名為文件擴展名為.ascx。（2）重命名代碼隱藏文件使其文件擴展名為）重命名代碼隱藏文件使其文件擴展名為.ascx.cs。（3）打開代碼隱藏文件并將該文件繼承的類從）打開代碼隱藏文件并將該文件繼承的類從Page更改為更改為UserControl。（4）在）在.aspx文件中，移除文件中，移除、和和元素；元素；將將 Page指令更改為指令更改為 Control指令；移除指令；移

21、除 Control指令指令中除中除Language、AutoEventWireup（如果存在）、（如果存在）、CodeFile和和Inherits之外的所有屬性；在之外的所有屬性；在 Control指令中，指令中，將將CodeFile屬性值更改為指向重命名后的代碼隱藏文件名。屬性值更改為指向重命名后的代碼隱藏文件名。36（1）將其包含在）將其包含在ASP.NET網頁中。網頁中。實現方法：在包含用戶控件的實現方法：在包含用戶控件的ASP.NET網頁中，創網頁中，創建一個建一個 Register指令，如：指令，如：（2）在網頁的）在網頁的元素內部聲明用戶控件元素內部聲明用戶控件元素。如：元素。如：

22、注意：在注意：在ASP.NET網頁的設計模式下，可以直接將用網頁的設計模式下，可以直接將用戶控件文件從解決方案資源管理器窗口中拖到頁面戶控件文件從解決方案資源管理器窗口中拖到頁面上，即在頁面上添加了該用戶控件。上，即在頁面上添加了該用戶控件。37本實例將用戶控件本實例將用戶控件SearchUserControl添添加到加到ASP.NET網頁中。網頁中。源程序：源程序：UserControlTest.aspx 38主題、母版和用戶控件為網站提供了統主題、母版和用戶控件為網站提供了統一的風格，但眾口難調，有些用戶希望一的風格，但眾口難調，有些用戶希望對網站界面進行個性化設置。利用對網站界面進行個性

23、化設置。利用Web部件能很好地解決這種問題。部件能很好地解決這種問題。 39ASP.NET Web部件是一組集成控件，基于部件是一組集成控件，基于Web部件的網站能使最終用戶可以直接從瀏覽部件的網站能使最終用戶可以直接從瀏覽器修改網頁的內容、外觀和行為。最終用戶能器修改網頁的內容、外觀和行為。最終用戶能動態地對動態地對Web應用程序進行個性化設置，而無應用程序進行個性化設置，而無需開發人員或管理員的干預。需開發人員或管理員的干預。要實現要實現Web部件功能，需要二個關鍵要素。部件功能，需要二個關鍵要素。個性化配置個性化配置Profile。 Web部件控件集。部件控件集。 40要建立包含要建立包

24、含Web部件的網頁，需要對部件的網頁，需要對web.config中的中的和和配置節進行配置。配置節進行配置。41 42當頁面啟用當頁面啟用Windows驗證時，建立的驗證時，建立的Web部件網頁在瀏覽時可以直接對部件網頁在瀏覽時可以直接對WebPart控件進行個性化設置。控件進行個性化設置。而當頁面啟用而當頁面啟用Forms驗證時，以匿名用驗證時，以匿名用戶訪問戶訪問Web部件網頁將不能對部件網頁將不能對WebPart控件進行個性化設置。只有當用戶登錄控件進行個性化設置。只有當用戶登錄成功后才能對成功后才能對Web部件網頁中的部件網頁中的WebPart控件進行個性化設置。控件進行個性化設置。4

25、3在建立在建立Web部件網頁時，通常利用表格部件網頁時，通常利用表格進行頁面布局，可以根據頁面上要顯示進行頁面布局，可以根據頁面上要顯示的內容分成適當的行和列。的內容分成適當的行和列。添加一個添加一個WebPartManager控件。控件。根據需要添加區域控件。根據需要添加區域控件。最后，在區域控件中添加最后，在區域控件中添加Web部件。部件。 44是是Web部件的總控中心。部件的總控中心。在網頁瀏覽時不會呈現用戶界面，并且在網頁瀏覽時不會呈現用戶界面，并且一個一個WebPartManager控件只能管理一個控件只能管理一個頁面。頁面。在一個在一個Web部件網頁中，有且僅有一個部件網頁中，有且

26、僅有一個WebPartManager控件。控件。45 注意：注意：在建立在建立Web部件網頁時，應首先部件網頁時，應首先建立建立WebPartManager控件。也就是說，控件。也就是說，有關有關WebPartManager控件的源代碼應出控件的源代碼應出現在現在元素中其它元素中其它Web部件控件的部件控件的前面。前面。 46在每個在每個Web部件網頁中，區域控件部件網頁中，區域控件WebPartZone必不可少。必不可少。 WebPartZone控件用于承載網頁上的控件用于承載網頁上的WebPart控件，并為其包含的控件提供控件，并為其包含的控件提供公共的用戶界面。公共的用戶界面。 47屬性

27、屬性WebPartVerbRenderMode：用來改：用來改變顯示方式。值變顯示方式。值Menu表示謂詞呈現在標表示謂詞呈現在標題欄的菜單中；值題欄的菜單中；值TitleBar表示謂詞在標表示謂詞在標題欄中直接呈現為鏈接。題欄中直接呈現為鏈接。其它的區域控件應結合其它的區域控件應結合WebPartManager控件的不同頁面模式進行添加。控件的不同頁面模式進行添加。 48創建創建WebPart控件的方法：控件的方法：一種是創建基于一種是創建基于HTML服務器控件、服務器控件、Web服服務器控件和用戶控件的務器控件和用戶控件的WebPart控件。這種控件。這種方法包含的控件在使用時與普通方法相

28、同，方法包含的控件在使用時與普通方法相同，但在運行時，這些控件將自動被但在運行時，這些控件將自動被GenericWebPart類封裝，進而成為真正的類封裝，進而成為真正的WebPart控件。控件。另一種方法是創建繼承自另一種方法是創建繼承自WebPart類的類的WebPart控件。控件。 49 50不同的顯示模式情況下，不同的顯示模式情況下，Web部件網頁就部件網頁就呈現不同內容，用戶就能實現不同的功能。呈現不同內容，用戶就能實現不同的功能。屬性屬性DisplayMode：改變頁面顯示模式。：改變頁面顯示模式。顯示模式：顯示模式：BrowseDisplayMode、DesignDisplayM

29、ode、EditDisplayMode、C a t a l o g D i s p l a y M o d e 、ConnectDisplayMode。在同一時刻，只能選擇一種顯示模式。在同一時刻，只能選擇一種顯示模式。51默認的顯示模式默認的顯示模式用戶可以查看網頁上的內容，也可以將用戶可以查看網頁上的內容，也可以將WebPart控件最小化、最大化或關閉，控件最小化、最大化或關閉，但不能編輯、拖曵。但不能編輯、拖曵。 52有有BrowseDisplayMode模式的功能模式的功能用戶還可以將用戶還可以將WebPart控件從一個區域控件從一個區域拖到另一個區域；也可以在同一個區域拖到另一個區域

30、；也可以在同一個區域內拖動，從而改變網頁的布局。內拖動，從而改變網頁的布局。 53有有DesignDisplayMode模式的功能模式的功能用戶還能編輯用戶還能編輯WebPart控件的外觀和行控件的外觀和行為。為。具體實現時，還需配合使用具體實現時，還需配合使用EditorZone控件。控件。 54只 有 在只 有 在 W e b 部 件 網 頁 進 入部 件 網 頁 進 入EditDisplayMode模式時才變為可見。模式時才變為可見。WebPart控件的操作菜單中增加了一個控件的操作菜單中增加了一個“編輯編輯”項。單擊項。單擊“編輯編輯”項將顯示包項將顯示包含于含于EditorZone中

31、的中的EditorPart系列控件。系列控件。EditorPart控件是何種類型意味著用戶能控件是何種類型意味著用戶能夠進行何種類型的編輯。夠進行何種類型的編輯。 55AppearanceEditorPart用于編輯WebPart控件的外觀屬性。BehaviorEditorPart用于重新排列或刪除WebPart控件以更改頁面布局。LayoutEditorPart用于編輯WebPart控件的布局屬性。PropertyGridEditorPart用于編輯WebPart控件的自定義屬性。56有有DesignDisplayMode模式的功能模式的功能用戶還能添加或刪除用戶還能添加或刪除WebPart

32、控件。控件。常 用 于 想 重 新 啟 用 被 用 戶 關 閉 的常 用 于 想 重 新 啟 用 被 用 戶 關 閉 的WebPart控件的應用場合。控件的應用場合。具體實現時，還需配合使用具體實現時，還需配合使用CatalogZone控件。控件。 57只 有 在只 有 在 W e b 部 件 網 頁 進 入部 件 網 頁 進 入CatalogDisplayMode模式時才變為可見。模式時才變為可見。CatalogZone控件只能包含控件只能包含CatalogPart系系列控件。列控件。 58CatalogPart系列控件說明DeclarativeCatalogPart顯示聲明在中的WebPa

33、rt控件列表。PageCatalogPart顯示頁面中已刪除的WebPart控件列表。ImportCatalogPart顯示從.webpart文件中導入的WebPart控件列表。59有有DesignDisplayMode模式的功能模式的功能用戶還能在不同的用戶還能在不同的WebPart控件之間建控件之間建立連接，實現數據的相互傳輸。立連接，實現數據的相互傳輸。任何一個任何一個WebPart控件，既可以是數據控件，既可以是數據的提供者（的提供者（Provider）,也可以是數據的也可以是數據的消費者（消費者（Consumer）。）。60靜態連接是開發人員在設計時建立的連靜態連接是開發人員在設計時

34、建立的連接，而動態連接是網頁在運行時建立的接，而動態連接是網頁在運行時建立的連接。連接。 61本實例利用一個下拉列表框來動態改變本實例利用一個下拉列表框來動態改變頁面模式。頁面模式。 源程序：源程序：WebParts.aspx 62當頁面首次載入時，給每個當頁面首次載入時，給每個WebPart控控件設置標題，因為包含于件設置標題，因為包含于WebPartZone中的中的WebPart控件是用戶控件和服務器控件是用戶控件和服務器控件，會自動被控件，會自動被GenericWebPart類封裝，類封裝，所以，在判斷語句中使用所以，在判斷語句中使用“part is GenericWebPart”進行判別。進行判別。63當在下拉列表中選擇不同的瀏覽模式時，將觸當在下拉列表中選擇不同的瀏