1、1,第10章 主题、母版、 用户控件和Web部件,2,本章要点：,了解主题并掌握建立和使用主题的方法 理解母版页并能建立母版页 掌握利用母版页创建一致网页布局的方法 掌握建立和使用用户控件的方法 熟悉利用Web部件实现个性化用户界面的方法,3,目录,10.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.1 用户控件概述 10.3.2 创建用户控件 10.3.3 使用用户控件 10.4 Web部件 10.4.1 Web部件概述 10.4
2、.2 使用Web部件 10.4.3 显示模式 10.5 小结,4,10.1 主题,在Web应用程序中，通常所有的页面都有统一的外观和操作方式。ASP.NET 3.5通过应用主题，来提供统一的外观。 主题包括外观文件、CSS文件和图片文件等。,5,10.1.1 主题概述,主题是CSS的扩展。 主题包含外观文件、CSS文件、图片文件及其它资源（至少应包含外观文件）。 主题在存储时与一个主题文件夹对应。,6,10.1.1 主题概述（续）,主题分为全局主题和应用程序主题 全局主题：应用于服务器中的所有Web应用程序，存储于C:WINDOWSMicrosoft.NETFrameworkv2.0.5072
3、7ASP.NETClientFilesThemes文件夹下（假设操作系统安装于C盘）。 应用程序主题：应用于单个Web应用程序。存储于Web应用程序的App_Themes文件夹中。每个App_Themes文件夹中的子文件夹都对应一个应用程序主题。,7,10.1.2 自定义主题,自定义主题就是建立主题文件夹，然后添加外观文件（.skin）、样式文件（.css）、图片文件到主题文件夹中。 主题和外观文件 添加CSS到主题 添加图片文件到主题 注意：主题文件夹包含在App_Themes中,8,主题和外观文件,一个主题必须包含外观文件。 创建主题：右击项目，“添加ASP.NET文件夹”“主题”，在网站
4、根文件下自动添加文件夹App_Themes，并在该文件夹下建立主题文件夹（可重命名如Red） 添加外观文件：右击主题文件夹Red“添加新项”“外观文件”（可重命名如Red.skin ）,9,默认的样式模板（ Red.skin）,2. 默认外观。未定义 SkinId。在同一主题中每个控件类型只允许有一个默认的控件外观。-% 注意：控件外观样式只能对外貌属性进行定义 。,10,默认外观和已命名外观,利用属性SkinID可以为同种类型控件定义多种外观。 默认外观：没有SkinID的外观。已命名外观：有SkinID的外观。,11,使用外观,当为同种类型控件定义多种外观后，在网页中使用主题时应通过控件的
5、属性SkinID进行区分。如代码：表示Label1控件使用LabelBlue外观 Label2控件使用默认外观。,12,添加CSS到主题,通过在主题中添加CSS文件来设置HTML或HTML服务器控件的样式。 操作方式： 右击主题文件夹Red“添加新项”“样式表”，重命名为Red.css。然后在Red.css中添加HTML元素样式。,13,添加图片文件到主题,通常在App_Themes文件夹中创建Images文件夹，再添加合适的图片文件到Images文件夹中。 要使用Images文件夹中的图片文件，可以通过控件的相关链接图片文件的Url属性进行访问。,14,10.1.3 使用主题,自己定义或从网
6、上下载主题后，就可以在Web应用程序中使用主题了。 可以在单个网页中应用主题。 可以在网站中应用主题。 可以在网站部分网页中应用主题。 可以部分禁用主题 。,15,单个网页应用主题,注意： （1）属性StylesheetTheme表示主题为本地控件的从属设置。也就是说，如果在页面上为某个控件设置了本地属性，则主题中与控件本地属性相同的属性将不起作用。 （2）属性Theme本地属性会被覆盖（主题起作用，本地属性不起作用）。,16,网站应用主题,修改应用程序的web.config文件，可将主题应用于整个网站。例：,17,网站部分页应用主题,可以将这些页与它们自己的web.config文件放在一个文
7、件夹中。 在根web.config文件中创建一个元素以指定文件夹。为子文件夹sub1设置了主题： ,18,禁用主题,可以设置属性EnableTheming值为false来禁用主题实现。例如： 页面禁用主题：控件禁用主题： ,19,实例10-1 动态切换主题,当选择不同的主题后，页面中的控件将呈现不同的外貌。 源程序：Blue.skin 源程序：Green.skin 源程序：Theme.aspx,20,10.2 母版页,利用母版页可以方便快捷地建立统一风格的ASP.NET网站，并且容易管理和维护，大大提高了设计效率。,21,10.2.1 母版页概述,母版页为网页定义所需的外观和标准行为，然后在母
8、版页基础上创建要包含显示内容的各个内容页。当用户请求内容页时，这些内容页将与母版页合并 输出。 母版页优点： 使用母版页可以集中处理网页的通用功能，若要修改所有网页的通用功能，只需要修改母版页即可。 使用母版页可以方便地创建一组控件和代码，并应用于一组网页。 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。,22,母版页的组成,母版页由特殊的 Master指令识别，该指令替换了用于普通.aspx页的 Page指令。 母版页包含网页的所有顶级XHTML元素，如、和。 通常可以在母版页上建立一个HTML表用于布局。 将一个元素用于公司徽标。 使用服务器控件创建站点的标准导航。
9、 将静态文本用于版权声明。 母版页可以包含一个或多个可替换内容的占位符控件ContentPlaceHolder。 注意：母版页文件的扩展名是.master,23,简单母版页例子,母版页：MasterPageSample.master 内容页：MasterPageSample.aspx,24,母版页处理,25,10.2.2 创建母版页,创建母版页的方式和创建Web窗体类似。 操作步骤：在解决方案资源管理器中，右击网站的名称“添加新项”，选择“母版页”，重命名母版页名称。 注意：“选择母版页”复选框表示可以将其它母版页嵌入到当前的母版页中。,26,实例10-2 创建母版页,本实例将创建一个母版页M
10、asterPage.master，该母版页采用常见的“上中下”网页布局。 源程序：MasterPage.master,27,10.2.3 创建内容页,内容页仅包含要与母版页合并的内容，可以在其中添加用户请求该页面时要显示的文本和控件。,28,实例10-3 创建内容页,本实例将创建基于母版页MasterPage.master的内容页。 源程序：ContentPage.aspx 程序说明：页面包含一个 Page指令，此指令的属性MasterPageFile表示当前页将与根文件夹下的“MasterPage.master”母版页合并。,29,10.3 用户控件,用户控件： 在ASP.NET网页中，除了
11、使用Web服务器控件外，还可以根据需要创建重复使用的自定义控件，这些控件称作用户控件。 用户控件是一种复合控件，工作原理非常类似于ASP.NET网页，可以向用户控件添加现有的Web服务器控件和标记，并定义控件的属性和方法。 用户控件在实际工程中常用于统一网页显示风格。,30,10.3.1 用户控件概述,创建用户控件的原因： 实现内置ASP.NET Web服务器控件未提供的功能。 提取多个网页中相同的用户界面来统一网页显示风格。 创建用户控件的方法： 一种方法是创建用户控件，然后将用户控件作为一个单元对待，为其定义属性和方法。 另一种方法是自定义控件，就是编写一个类，此类从Control或Web
12、Control派生。 方法比较： 因为可以重用现有的控件，所以创建用户控件要比创建自定义控件方便得多。,31,用户控件与ASP.NET网页的比较,用户控件的文件扩展名为.ascx。 用户控件没有 Page指令，是包含 Control 指令。 用户控件不能作为独立文件运行，而必须像处理其它控件一样，只有将它们添加到 ASP.NET网页中后才能使用。 用户控件中没有、或元素，这些元素必须位于宿主网页中。 可以在用户控件上使用与在ASP.NET网页上所用相同的HTML元素（、 或元素除外）和Web服务器控件。,32,10.3.2 创建用户控件,可以像设计ASP.NET网页一样设计用户控件， 可以将A
13、SP.NET网页更改为一个用户控件。针对在已经开发好的ASP.NET网页并打算在整个Web应用程序中访问其功能的情况下使用。,33,10.3.2 创建用户控件（续）,设计用户控件 源程序：SearchUserControl.ascx,34,10.3.2 创建用户控件（续）,将单文件ASP.NET网页转换为用户控件（1）重命名.aspx文件扩展名为.ascx。（2）从页面中移除、和元素；将 Page指令更改为 Control指令；移除 Control指令中除Language、AutoEventWireup（如果存在）、CodeFile和 Inherits之外的所有属性。,35,10.3.2 创建
14、用户控件（续）,将代码隐藏ASP.NET网页转换为用户控件 （1）重命名.aspx文件扩展名为.ascx。 （2）重命名代码隐藏文件使其文件扩展名为.ascx.cs。 （3）打开代码隐藏文件并将该文件继承的类从Page更改为UserControl。 （4）在.aspx文件中，移除、和元素；将 Page指令更改为 Control指令；移除 Control指令中除Language、AutoEventWireup（如果存在）、CodeFile和Inherits之外的所有属性；在 Control指令中，将CodeFile属性值更改为指向重命名后的代码隐藏文件名。,36,10.3.3 使用用户控件,（1
15、）将其包含在ASP.NET网页中。 实现方法：在包含用户控件的ASP.NET网页中，创建一个 Register指令，如：（2）在网页的元素内部声明用户控件元素。如：注意：在ASP.NET网页的设计模式下，可以直接将用户控件文件从解决方案资源管理器窗口中拖到页面上，即在页面上添加了该用户控件。,37,实例10-4 使用用户控件,本实例将用户控件SearchUserControl添加到ASP.NET网页中。 源程序：UserControlTest.aspx,38,10.4 Web部件,主题、母版和用户控件为网站提供了统一的风格，但众口难调，有些用户希望对网站界面进行个性化设置。利用Web部件能很好
16、地解决这种问题。,39,10.4.1 Web部件概述,ASP.NET Web部件是一组集成控件，基于Web部件的网站能使最终用户可以直接从浏览器修改网页的内容、外观和行为。最终用户能动态地对Web应用程序进行个性化设置，而无需开发人员或管理员的干预。 要实现Web部件功能，需要二个关键要素。 个性化配置Profile。 Web部件控件集。,40,10.4.2 使用Web部件,要建立包含Web部件的网页，需要对web.config中的和配置节进行配置。,41,配置节,42,页面身份验证,当页面启用Windows验证时，建立的Web部件网页在浏览时可以直接对WebPart控件进行个性化设置。 而当
17、页面启用Forms验证时，以匿名用户访问Web部件网页将不能对WebPart控件进行个性化设置。只有当用户登录成功后才能对Web部件网页中的WebPart控件进行个性化设置。,43,建立 Web部件网页,在建立Web部件网页时，通常利用表格进行页面布局，可以根据页面上要显示的内容分成适当的行和列。 添加一个WebPartManager控件。 根据需要添加区域控件。 最后，在区域控件中添加Web部件。,44,添加一个WebPartManager控件,是Web部件的总控中心。 在网页浏览时不会呈现用户界面，并且一个WebPartManager控件只能管理一个页面。 在一个Web部件网页中，有且仅有
18、一个WebPartManager控件。,45,添加一个WebPartManager控件（续）, 注意：在建立Web部件网页时，应首先建立WebPartManager控件。也就是说，有关WebPartManager控件的源代码应出现在元素中其它Web部件控件的前面。,46,添加区域控件,在每个Web部件网页中，区域控件WebPartZone必不可少。 WebPartZone控件用于承载网页上的WebPart控件，并为其包含的控件提供公共的用户界面。 ,47,添加区域控件（续）,属性WebPartVerbRenderMode：用来改变显示方式。值Menu表示谓词呈现在标题栏的菜单中；值TitleB
19、ar表示谓词在标题栏中直接呈现为链接。 其它的区域控件应结合WebPartManager控件的不同页面模式进行添加。,48,在WebPartZone中添加WebPart控件,创建WebPart控件的方法： 一种是创建基于HTML服务器控件、Web服务器控件和用户控件的WebPart控件。这种方法包含的控件在使用时与普通方法相同，但在运行时，这些控件将自动被GenericWebPart类封装，进而成为真正的WebPart控件。 另一种方法是创建继承自WebPart类的WebPart控件。,49,在WebPartZone中添加WebPart控件（续）,50,10.4.3 WebPartManage
20、r显示模式,不同的显示模式情况下，Web部件网页就呈现不同内容，用户就能实现不同的功能。 属性DisplayMode：改变页面显示模式。 显示模式：BrowseDisplayMode、DesignDisplayMode、EditDisplayMode、CatalogDisplayMode、ConnectDisplayMode。 在同一时刻，只能选择一种显示模式。,51,BrowseDisplayMode,默认的显示模式 用户可以查看网页上的内容，也可以将WebPart控件最小化、最大化或关闭，但不能编辑、拖曵。,52,DesignDisplayMode,有BrowseDisplayMode模式
21、的功能 用户还可以将WebPart控件从一个区域拖到另一个区域；也可以在同一个区域内拖动，从而改变网页的布局。,53,EditDisplayMode,有DesignDisplayMode模式的功能 用户还能编辑WebPart控件的外观和行为。 具体实现时，还需配合使用EditorZone控件。,54,EditorZone控件,只有在Web部件网页进入EditDisplayMode模式时才变为可见。 WebPart控件的操作菜单中增加了一个“编辑”项。单击“编辑”项将显示包含于EditorZone中的EditorPart系列控件。 EditorPart控件是何种类型意味着用户能够进行何种类型的编
22、辑。,55,EditorPart系列控件对应表,56,CatalogDisplayMode,有DesignDisplayMode模式的功能 用户还能添加或删除WebPart控件。 常用于想重新启用被用户关闭的WebPart控件的应用场合。 具体实现时，还需配合使用CatalogZone控件。,57,CatalogZone控件,只有在Web部件网页进入CatalogDisplayMode模式时才变为可见。 CatalogZone控件只能包含CatalogPart系列控件。,58,CatalogPart系列控件对应表,59,ConnectDisplayMode,有DesignDisplayMode
23、模式的功能 用户还能在不同的WebPart控件之间建立连接，实现数据的相互传输。 任何一个WebPart控件，既可以是数据的提供者（Provider）,也可以是数据的消费者（Consumer）。,60,ConnectDisplayMode（续）,静态连接是开发人员在设计时建立的连接，而动态连接是网页在运行时建立的连接。,61,实例10-5 Web部件应用,本实例利用一个下拉列表框来动态改变页面模式。 源程序：WebParts.aspx,62,程序说明,当页面首次载入时，给每个WebPart控件设置标题，因为包含于WebPartZone中的WebPart控件是用户控件和服务器控件，会自动被Gen
24、ericWebPart类封装，所以，在判断语句中使用“part is GenericWebPart”进行判别。,63,程序说明（续）,当在下拉列表中选择不同的浏览模式时，将触发SelectedIndexChanged事件，修改属性MyPartManager.DisplayMode值，从而呈现不同的页面模式。其中DisplayModes“Browse“对应BrowseDisplayMode；DisplayModes“Design“对应DesignDisplayMode；DisplayModes“Catalog“对应CatalogDisplayMode；DisplayModes“Edit“对应Ed
25、itDisplayMode。,64,本章介绍了ASP.NET 3.5中的主题、母版、用户控件和Web部件，以及利用这些技术创建具有统一风格和个性化网站的方法。 主题包括外观文件、CSS文件和图片文件，外观文件为ASP.NET中的服务器控件提供一致的外观。主题分为全局主题和应用程序主题，全局主题可以应用于Web服务器上任意Web应用程序，而应用程序主题只能应用于单个Web应用程序。主题对应一个主题文件夹，应用程序主题文件夹必须放在ASP.NET专用文件夹App_Themes中。,65,10.5 小结（续）,利用母版页可以方便快捷地建立统一风格的ASP.NET网站，并且容易管理和维护，大大提高了设计效率。在使用时，母版页定义了整体布局，和内容页组合输出。用户控件在实际工程中常用于统一网页显示风格。与母版页相比较，用户控件用于网页局部。 基于Web部件的网站能使最终用户可以直接从浏览器修改网页的内容、外观和行为，从而实现用户的个性化设置。使用时，每个Web部件页中必须添加一个WebPartManager控件，可以通过修改该控件的DisplayMode值来改变页面显示模式，从而使用户可以在浏览器中添加、移动和修改WebPart控件。,
