《ASP NET程序设计案例教程》课件第3章.ppt

1、第3章 模块2站点界面设计3.1 【任务任务4】站点母版页设计站点母版页设计3.2 【任务任务5】使用主题和外观设置站点使用主题和外观设置站点页面页面3.3 【任务任务6】站点导航设计与广告显示站点导航设计与广告显示【本章提要本章提要】无论是大的门户网站还是只有少量页面的个人主页，一个主题明确和风格统一的网站总能给浏览者留下深刻的印象。本章以校园在线超市站点界面设计为主线，详细介绍了站点母版页的设计、主题、外观和站点导航控件的使用。【学习目标学习目标】理解母版页的工作原理。掌握使用母版页来处理站点中的统一布局的方法。掌握ASP.NET使用主题和外观来设置页面的方法。掌握站点导航与广告显示控件的

2、使用。掌握在母版页中使用控件的方法。任务描述任务描述在校园在线超市案例中，希望站点中的所有页面都有统一的风格，并且为了提高维护的效率，能快速修改网站整体风格，因此将母版页引入进来处理站点的统一布局。3.1 【任务任务4】站点母版页设计站点母版页设计 必备知识必备知识知识知识1 母版页概述母版页概述我们在访问站点的时候，经常会看到不同的页面上有着很多相似的内容，如公司的Logo、站点导航菜单等，并且这些页面布局也基本一致。对于页面上相同的内容是如何处理的呢？是在每一页都设计相同的内容还是通过其他技术实现的呢？ASP.NET2.0提供的母版页可以很好地解决这个问题。1母版页的概念母版页的概念母版页

3、实际上是网站的框架或模板，它为应用程序中的页创建一致布局，为应用程序中的所有页(或一组页)定义所需的外观和标准行为。通过创建要显示内容的各个内容页，并将内容页和母板页关联起来。因此当用户请求内容页时，这些内容页与母版页合并，并将母版页的布局与内容页的内容组合在一起输出，呈现到浏览器。2母版页的工作原理母版页的工作原理母版页由两部分组成，即母版页本身与一个或多个内容页。所有那些相对固定的内容放在母板页中，而可变内容放在内容页中。1)母版页母版页为具有扩展名.master(如MySite.master)的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊

4、的Master指令识别，该指令替换了用于普通.aspx页的Page指令。由上述代码可知，母版页和普通的网页的代码模型一致，既有单文件页模型，又有代码隐藏页模型。除Master指令外，母版页还包含所有顶级HTML元素，如Html、head和form。例如，在母版页上可以将一个HTML表格用于布局，将一个img元素用于公司徽标，将静态文本用于版权声明，并使用服务器控件创建站点的标准导航。可以在母版页中使用任何HTML元素和ASP.NET元素。除了在所有页上显示的静态文本和控件外，母版页还允许包括一个或多个ContentPlaceHolder控件。这些占位符控件定义可替换内容的区域，然后在内容页中定

5、义可替换的内容。无标题页 以上代码中，通过使用控件定义一个内容可替换区“PlaceHolder1”。也可以根据设计需要通过添加多个控件来定义多个内容可替换区，即每一个控件定义一个可替换区。2)内容页通过创建各个内容页来定义母版页的占位符控件的内容，这些内容页为绑定到特定母版页的ASP.NET页(.aspx文件以及可选的代码隐藏文件)。通过包含指向要使用的母版页的MasterPageFile属性，可在内容页的Page指令中建立绑定。例如，一个内容页可能包含下面的Page指令，该指令将该内容页绑定到MasterPage.master页。在内容页中，通过添加Content控件并将这些控件映射到母版页

6、上的contentplaceholder控件来创建内容。例如，母版页可能包含名为PlaceHolder1的内容占位符。在内容页中，可以创建一个Content控件，并将它映射到id为PlaceHolder1的contentplaceholder控件上。在内容页中，将页面内容添加到Content控件内，包括静态文本、HTML控件或服务器控件。在ASP.NET页中所执行的所有任务都可以在内容页中执行。例如，可以使用服务器控件和数据库查询或其他动态机制来生成Content控件的内容等。/添加内容，如静态文本、HTML控件或服务器控件在请求内容页(index.aspx)时，index.aspx与Mast

7、erPage.master合并以将MasterPage.master中定义的布局与index.aspx中的内容组合在一起输出，最终呈现给用户。这个关系如图3-1所示。母版页不能单独被执行，即不能在浏览器中直接请求母版页。如果尝试在浏览器中直接访问母版页，将得到如图3-2所示的结果。图3-1 母版页和内容页的合并图3-2 直接访问母版页3)母版页和内容页中的事件母版页和内容页都可以包含控件的事件处理程序。对于控件而言，事件是在本地处理的，即内容页中的控件在内容页中触发事件，母版页中的控件在母版页中触发事件。控件事件不会从内容页发送到母版页，同样，也不能在内容页中处理来自母版页控件的事件。在某些情

8、况下，内容页和母版页中会触发相同的事件。例如，两者都触发Init和Load事件。当页面运行时，由于母版页会合并到内容页并被视为内容页的一个控件，因此，母版页与内容页合并后事件发生的先后顺序如下：母版页控件Init事件。内容页控件Init事件。母版页Init事件。内容页Init事件。内容页Load事件。母版页Load事件。内容页控件Load事件。内容页PreRender事件。母版页PreRender事件。母版页控件PreRender事件。内容页控件PreRender事件。知识知识2 使用母版页使用母版页1创建母版页创建母版页在VS 2005中，打开ASP.NET网站，选择“添加新项”，界面如图3

9、-3所示。图3-3 创建母版页创建母版页名称为“MasterPage.master”，保持其他默认选项，新建母版页MasterPage.master。MasterPage.master的文件代码如下：无标题页从上述代码可以看到，ASP.NET默认创建了一个内容可替换区。实际应用中还需要对该文件进行布局设计。假如页面设计为上、中、下三部分区域：上、下两部分显示固定内容；中间部分显示动态变化内容。经过部分设计代码修改如下：页面顶部显示区域页面底部显示区域在上面代码中，通过插入table元素，并添加三个单列行，将页面分成三个区域。其中，表格第二行存放可替换内容控件；第一行输入“页面顶部显示区域”，并

10、将该行背景色设为蓝色；第三行输入“页面底部显示区域”，并将该行背景色设为绿色。2实现内容页实现内容页虽然前面新增了一个母版页(MasterPage.master)，但无法看到该母版页的设计效果。下面通过两种方式来应用母版页。1)新增内容页打开“添加新项”对话框，在模板列表中选择“Web窗体”，如图3-4所示。图3-4 添加内容页图3-5 选择母版页由图3-5可以看出，该对话框中左窗口列出了该站点的目录结果，右窗口则显示对应左边选定目录下的母版页。这里选择“MasterPage.master”母版页，单击“确定”按钮完成内容页的添加。切换到内容页的设计视图，将看到母版页的内容同内容页一起呈现出来

11、。在内容页中输入“Hello World！”，然后浏览该页，显示效果如图3-6所示。图3-6 显示效果2)在已有的页面应用母版页对于已创建但还未使用母版页的页面，可以通过简单地修改将它应用到母版页。这个过程只要将现有页面中的元素之间的内容放置到内，然后修改页面的Page指令的MasterPageFile属性，指定所应用的母版页即可，如MasterPageFile=MasterPage.master。3在内容页中访问母版页在内容页中访问母版页在实际应用中，有时候需要在内容页中访问母版页的内容。例如，在母版页中有一个输入搜索条件的文本框(txtSearch)，需要在内容页中访问该文本框的内容。一般

12、可以通过弱类型引用和强类型引用两种方式来进行。为了提高对母版页成员的访问，Page类公开了Master属性，通过它可以获取对页面的母版页的访问。也可以通过创建MasterType指令创建对母版页的强类型引用。1)弱类型引用该方式是通过调用FindControl方法进行访问的。这种方式需要显式地给FindControl方法传递一个控件ID值，然后将返回值转换成已知类型的控件，再访问其属性。例如，要访问母版页中txtSearch控件的值，其代码如下所示：string strSearch=(TextBox)Master.FindControl(txtSearch).Text;要实现上面的代码，需要在

13、编写代码时知道该控件的类型和ID值。如果ID值输入错误，而在编译时编译器并不能发现错误，则直到运行时才会发现。2)强类型引用该方式是通过将母版页的内容通过公开的属性或方法暴露出来，让内容页直接访问。在下面的例子中，在母版页中以属性的方式公开母版页中的txtSearch控件的Text属性。public string SearchText get return txtSearch.Text;set txtSearch.Text=value;上述代码将txtSearch控件的Text属性公开为SearchText属性，因此在内容页中可以直接访问。string strSearch=(MasterPag

14、e)Master).SearchText;在上面的代码中，需要将Master显式地转换成母版页类的类型(MasterPage)。如果在页面中使用MasterType指令，则可以创建对母版页的强类型引用，代码如下：这时，访问母版页中的属性的代码如下：String strSearch=Master.SearchText;任务实现任务实现步骤1 打开校园在线超市ASP.NET网站，在“解决方案资源管理器”中打开“添加新项”对话框，在模板列表中选择“母版页”，给出母版页的名称为“MasterPage.master”，如图3-3所示。步骤2 双击打开登录页面“Login.aspx”，复制元素之间的内容，

15、粘贴到母版页文件“MasterPage.master”的元素之间。步骤3 将右边空白区中实现登录功能的控件布局用到的元素删除，代码范围如下所示：用户名：密  码：步骤4 在删除代码的位置添加如下代码：步骤5 修改登录页面“Login.aspx”，使其应用母版页。在Page指令中添加MasterPageFile属性，并指向“MasterPage.master”文件，代码如下所示：步骤6 删除登录页面“Login.aspx”文件中除Page指令的其他所有代码，在Page指令下面添加Content控件，代码如下所示：步骤7 将步骤3中所删除的代码粘贴在元素之间。步骤8 进入“设计

16、”界面，查看其设计效果，如图3-7所示。步骤9 浏览“Login.aspx”页面，查看其显示效果。图3-7 设计界面显示效果 任务描述任务描述在校园在线超市案例中，希望将网页的呈现风格通过统一的方式进行配置和管理，并且希望使界面风格的呈现变得更灵活、更丰富。在特定情况下，能使用更换主题来更换整个站点的风格和布局。3.2 【任务任务5】使用主题和外观设使用主题和外观设置站点页面置站点页面 必备知识必备知识知识知识1 ASP.NET主题和外观概述主题和外观概述1主题和外观的定义主题和外观的定义在网站设计时，往往需要将网页的呈现风格通过统一的方式进行配置和管理。在ASP.NET 2.0之前，这一工作

17、往往是通过级联样式表(CSS)来完成的，而在ASP.NET 2.0中，还可以通过主题来设置站点的样式，这为规划界面的呈现风格又提出了一种全新的解决方案，可以使界面风格的呈现变得更灵活、更丰富。主题是属性设置的集合，使用这些设置可以定义页面和控件的外观，然后在某个站点的所有页、整个站点或服务器上所有的站点中一致地应用此外观。外观是主题的主要构成元素之一，通过外观可以对服务器控件(如Button、Label、TextBox)进行属性或样式设置。2主题的组成主题的组成主题在站点的App_Themes目录中定义，由一组元素组成，包括外观、级联样式表(CSS)、图像和其他资源。1)外观外观文件的文件扩展

18、名为.skin，包括各个控件(如Button、Label、TextBox)的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如，Button控件的控件外观代码如下：在Themes文件夹中创建.skin文件。一个.skin文件可以包含一个或多个控件类型的一个或多个控件外观。可以为每个控件创建一个单独的文件以定义其外观，也可以在一个文件中定义所有主题的外观。有两种类型的控件外观，即默认外观和已命名外观，其定义和使用情况如下：(1)当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有SkinID属性，则是默认外观。例如，如果为Button控件创

19、建一个默认外观，则该控件外观适用于使用本主题的页面上的所有Button控件。默认外观严格按控件类型来匹配，因此Button控件外观适用于所有Button控件，但不适用于LinkButton控件或从Button对象派生的控件。(2)已命名外观是设置了SkinID属性的控件外观。已命名外观不会自动按类型应用于控件，而应当通过设置控件的SkinID属性将已命名外观显式地应用于控件。通过创建已命名外观，可以为站点中的同一控件的不同实例设置不同的外观。2)级联样式表主题还可以包含级联样式表(.css文件)。将.css文件放在主题目录中时，样式表自动为主题的一部分。使用文件扩展名.css在主题文件夹中定义

20、样式表。3)主题图形和其他资源主题还可以包含图形和其他资源，如脚本文件或声音文件。例如，页面主题的一部分可能包括TreeView控件的外观。可以在主题中包括用于表示展开按钮和折叠按钮的图形。通常，主题的资源文件与该主题的外观文件位于同一文件夹中，但也可以放在站点的其他地方，如主题目录的某个子文件夹中。若要引用主题目录的某个子文件夹中的资源文件，应使用类似Image控件外观中显示的路径，代码如下：也可以将资源文件存储在主题目录以外的位置。如果使用“”符号来引用资源文件，站点将自动查找相应的图像。例如，如果将主题的资源放在应用程序的某个子目录中，则可以使用格式为“/SubFolder/filena

21、me.ext”的路径来引用这些资源文件。3主题的类型主题的类型我们可以定义单个站点的主题，也可以定义供Web服务器上的所有站点使用的全局主题。定义主题之后，可以使用Page指令的Theme或StyleSheetTheme属性将该主题放置在单个页上，或者通过设置站点配置文件Web.config中的元素将其应用于应用程序中的所有页。如果在Machine.config文件中定义了元素，则主题将应用于服务器上的站点中的所有页。1)页面主题页面主题是一个主题文件夹，其中包括控件外观、样式表、图形文件和其他资源，该文件夹是作为站点中的App_Themes文件夹的子文件夹创建的。每个主题都是App_Them

22、es文件夹下一个不同的子文件夹。图3-8 页面主题2)全局主题全局主题是可以应用于服务器上的所有站点的主题。当需要维护同一个服务器上的多个站点时，可以使用全局主题定义域的整体外观。全局主题与页面主题类似，因为它们都包括属性设置、样式表设置和图形。但是，全局主题存储在Web服务器的名为Themes的全局文件夹中。服务器上的任何站点以及任何页面都可以引用全局主题。知识知识2 定义、应用主题和外观定义、应用主题和外观1定义主题和外观定义主题和外观通常，可以使用主题来定义与某个页或控件的外观或静态内容有关的属性。并不是所有的控件属性都可以通过主题来定义，只能设置那些其ThemeableAttribut

23、e属性(Attribute)已设置为true(在控件类中)的属性(Property)。例如，不能使用主题来设置Button控件的CommandName属性。创建主题和外观的主要步骤如下所述。1)创建页面主题 在站点上创建名为App_Themes的新文件夹。在App_Themes文件夹下创建一个新子文件夹来保存主题文件。该子文件夹的名称就是主题名称。例如，要创建名为BlueTheme的主题，应创建名为App_ThemesBlueTheme的文件夹。向新文件夹中添加组成主题的外观、样式表和图像文件。2)创建全局主题 使用iisdefaultrootaspnet_clientsystem_webve

24、rsionThemes路径创建Themes文件夹。例如，如果默认Web根文件夹位于Web服务器上的C:Inetputwwwroot中，则新的Themes文件夹可能为C:Inetputwwwrootaspnet_clientsystem_webversionThemes。创建一个作为Themes文件夹子文件夹的主题文件夹。该子文件夹的名称就是主题名称。例如，要创建名为BlueTheme的全局主题，应创建名为.ThemesBlueTheme的文件夹。向新文件夹中添加组成主题的外观、样式表和图像文件。3)创建外观 使用.skin扩展名，在主题子文件夹中创建一个新的文本文件。默认约定是为每个控件创建一

25、个.skin文件，如Button.skin或Calendar.skin。也可以根据自己的需要创建多个.skin文件，外观文件可包含多个外观定义。在.skin文件中，添加常规控件定义(使用声明性语法)，但仅包含为主题设置的属性(Property)，且不包含ID属性(Attribute)。控件定义必须包含runat=server属性。对于要创建的每个控件外观，重复步骤和。2在页面或配置文件中使用主题在页面或配置文件中使用主题我们可以对页或站点应用主题，也可以对全局应用主题。在站点级设置主题会对站点上的所有页和控件应用样式和外观，除非对个别页重写主题。在页面级设置主题会对该页及其所有控件应用样式和外

26、观。默认情况下，主题重写本地控件设置，或者，可以设置一个主题作为样式表主题，以便该主题仅应用于未在控件上进行显式设置的控件设置。1)对站点应用主题在应用程序的Web.config文件中，将元素设置为全局主题或页面主题的主题名称，代码如下：要将主题设置为样式表主题，并作为本地控件设置的从属设置，应改为设置StyleSheetTheme属性，代码如下：Web.config文件中的主题设置会应用于该应用程序中的所有ASP.NET网页。Web.config文件中的主题设置遵循常规的配置层次结构约定。例如，要仅对一部分页应用某主题，可以将这些页与它们自己的Web.config文件放在一个文件夹中，或者在

27、根Web.config文件中创建一个元素以指定文件夹。2)对单个页应用主题将Page指令的Theme或StyleSheetTheme属性设置为要使用的主题的名称，如下面的示例所示：该主题及其对应的样式和外观仅应用于声明它的页。3)对控件应用外观主题中定义的外观应用于已应用该主题的应用程序或页中的所有控件实例。在某些情况下，可能希望对单个控件应用一组特定属性。这就可以先创建命名外观(.skin文件中设置了SkinID属性的一项)，然后按ID将它应用于各个控件来实现。4)对控件应用命名外观设置控件的SkinID属性，代码如下：如果页面主题不包括与SkinID属性匹配的控件外观，则控件使用该控件类型

28、的默认外观。任务实现任务实现步骤1 打开校园在线超市ASP.NET网站，在“解决方案资源管理器”中右键选择“添加ASP.NET文件夹”，选择“主题”，如图3-9所示。图3-9 添加主题文件夹步骤2 修改主题文件夹名称为“Default”。步骤3 将“CSS”文件夹下的“css.css”文件剪切到主题“Default”文件夹下，并给它改名为“Default.css”，如图3-10所示。图3-10 Default.css的创建步骤4 在Web.config配置文件的元素节点中，添加元素节点，并设置全局主题的主题名称，代码如下所示：步骤5 浏览Login.aspx页面，查看其显示效果。任务描述任务描

29、述在校园在线超市案例中，希望在站点的每一个页面都能显示一组广告，当用户每次打开或重新加载网页时，希望显示不同的广告图像、可以控制每一个广告的出现频率，并且在站点的每个页面都能显示当前用户访问站点的位置。如何利用ASP.NET所提供的Web服务器控件实现此希望呢？3.3 【任务任务6】站点导航设计与广站点导航设计与广告显示告显示 必备知识必备知识知识知识1 广告控件广告控件在ASP.NET中，提供了一些具有特殊用途的Web服务器控件，开发者可以更便捷地完成以前可能需要很长时间才能完成的工作。这里我们主要介绍使用比较广泛的广告控件。例如，网站中要显示一组广告，当用户每次打开或重新加载网页时，希望显

30、示不同的广告图像，并且可以控制每个广告的出现频率。AdRotator控件可用于制作这样的广告轮换效果。1AdRotator配置文件配置文件AdRotator控件在用户每次打开或重新加载网页时，在页面上会放置一幅不同的广告图像，显示的广告图像取决于AdRotator配置文件。AdRotator配置文件是一个XML格式的文件，包含显示的图像和链接信息的显示频率等。表3-1列出了XML文件中数据元素的含义。表3-1 AdRotator控件的XML文件中数据元素的含义下面的代码是控制广告轮换的XML文件“ad.xml”：/Images/index/ad/img1.jpg/1.aspx DHY90/Im

31、ages/index/ad/img2.jpg/2.aspx Better502AdRotator控件控件AdRotator控件与XML文件通过广告控件的AdvertisementFile属性实现关联。下面的代码在网页上添加了AdRotator控件，并设置属性AdvertisementFile关联“ad.xml”文件：运行该网页，效果如图3-11所示。图3-11 广告控件运行效果图知识知识2 站点导航站点导航几乎所有站点都具有站点导航功能，即当用户访问一个站点时，可以很容易地了解整个站点的布局结构，并能方便地找到想要的资源。而在一个站点中，站点导航几乎需要在所有网页中显示，并且布局基本一致，因此

32、非常适合使用母版页来统一处理。ASP.NET提供了几个导航控件(Menu、SiteMapPath和TreeView)和一个站点地图数据源控件(SiteMapDataSource)，通过它们可以方便地实现站点的导航。1建立站点地图建立站点地图若要在ASP.NET站点中实现导航，必须描述站点结构以便站点导航API和站点导航控件可以正确公开站点结构。默认情况下，站点导航系统使用一个包含站点层次结构的XML文件。ASP.NET的默认站点地图提供程序(XmlSiteMapProvider)自动选取此站点地图来为站点提供站点结构。Web.sitemap文件必须位于应用程序的根目录中，它还可以引用其他站点地

33、图提供程序，或其他目录中的其他站点地图文件，或是同一应用程序中的其他站点地图文件。默认情况下，ASP.NET配置为阻止客户端下载具有已知文件扩展名(如sitemap)的文件。为保护数据，可将文件扩展名不是.sitemap的所有自定义站点地图数据文件放入App_Data文件夹中。站点地图是基于XML的文件，它只包含一个直接位于siteMap元素下方的siteMapNode元素，然后在该元素下通过插入任意多的siteMapNode元素来构建站点的层次结构，但要求siteMapNode元素的URL属性不能重复。可以通过“添加新项”来完成站点地图文件的创建。下面的代码构建了一个五层结构的站点地图：2S

34、iteMapDataSource对象对象SiteMapDataSource控件是站点地图数据的数据源，站点数据则由为站点配置的站点地图提供程序进行存储。SiteMapDataSource作为数据源控件，它的每个实例都为单个帮助器对象关联，该帮助器对象称为数据源视图(SiteMapDataSourceView)。SiteMapDataSourceView是一个基于站点地图数据的视图，根据数据源的属性进行设置，并且通过调用GetHierarchicalView方法来检索此视图，它维护控件所绑定的SiteMapNodeCollection对象。SiteMapDataSource使那些并非专门作为站点

35、导航控件的Web服务器控件(如TreeView、Menu和DropDownList控件)能够绑定到分层的站点地图数据。因此，可以使用这些Web服务器控件将站点地图显示为一个目录，或者一个菜单。当然，也可以使用SiteMapPath控件来实现站点导航。SiteMapDataSource绑定站点地图数据，并基于在站点地图层次结构中指定的起始节点来显示其视图。默认情况下，起始节点是层次结构的根节点，但也可以是层次结构中的任何其他节点。起始节点由以下几个SiteMapDataSource属性的值来标识，如表3-2所示。表3-2 SiteMapDataSource的属性如果StartingNodeOff

36、set属性设置为非0值，则它会影响起始节点以及由SiteMapData-Source控件基于该节点公开的站点地图数据层次结构。StartingNodeOffset的值为一个负整数或正整数，该值标识从StartFromCurrentNode和StartingNodeUrl属性所标识的起始节点沿站点地图层次结构上移或下移的层级数，以便对数据源控件公开的子树的起始节点进行偏移计算。如果StartingNodeOffset属性设置为负数-n，则由该数据源控件公开的子树的起始节点是所标识的起始节点上方n个级别的上级节点。如果n的值大于层次结构树中所标识起始节点上方的所有上级层级数，则子树的起始节点是站点

37、地图层次结构的根节点。如果StartingNodeOffset属性设置为正数+n，则公开的子树的起始节点是位于所标识的起始节点下方n个级别的子节点。由于层次结构中可能存在多个子节点的分支，因此，如果可能，SiteMapDataSource会尝试根据所标识起始节点与表示当前被请求页的节点之间的路径，直接解析子节点。如果表示当前被请求页的节点不在所标识起始节点的子树中，则忽略StartingNodeOffset属性的值。如果当前被请求页的节点与位于其上方的所标识起始节点之间的层级差距小于n个级别，则使用当前被请求页作为起始节点。例如，在上页的站点地图代码中，设置SiteMapDataSource控

38、件的属性StartingNodeUrl为“/Users/Default.aspx”，将属性StartingNodeOffset设为“0”，浏览页面显示效果如图3-12所示。将StartingNodeOffset设为“-1”后，显示的当前节点自动上升到上级节点，浏览效果如图3-13所示。图3-12 设置为0的效果图3-13 设置为-1的效果3使用使用Menu控件显示导航信息控件显示导航信息利用Menu服务器控件可以开发ASP.NET网页的静态和动态显示菜单。既可以在Menu控件中直接配置其内容，也可以通过将该控件绑定到数据源的方式来指定其内容。1)Menu的显示控制Menu控件具有两种显示模式：

39、静态模式和动态模式。静态显示意味着Menu控件始终是完全展开的，整个结构都是可视的，用户可以单击任何部位；在动态显示的菜单中，只有指定的部分是静态的，而当用户将鼠标指针放置在父节点上时才会显示其子菜单项。Menu控件还通过Orientation属性控制菜单静态部分的呈现方式：水平和垂直方式。(1)静态显示使用Menu控件的StaticDisplayLevels属性可控制静态显示行为，该属性指示从根菜单算起，静态显示的菜单的层数。例如，如果将StaticDisplayLevels设置为3，则菜单将以静态显示的方式展开其前三层。静态显示的最小层数为1(默认值),如果该值设置为0或负数，则该控件将会

40、发生异常。(2)动态显示MaximumDynamicDisplayLevels属性指定在静态显示层后应显示的动态显示菜单的节点层数。例如，如果菜单有两个静态层和两个动态层，则菜单的前两层为静态显示，后两层为动态显示。如果将MaximumDynamicDisplayLevels设置为0，则不会动态显示任何菜单节点。如果将MaximumDynamicDisplayLevels设置为负数，则会引发异常。2)定义菜单内容(1)手动添加内容可以通过在Items属性中指定菜单项的方式向控件添加单个菜单项。Items属性是MenuItem对象的集合，通过它可以遍历所有菜单项。首先，将Menu控件添加到Web

41、Form中，界面显示如图3-14所示。图3-14 添加Menu控件界面显示选择“编辑菜单项”后打开“菜单项编辑器”，添加“主页”、“产品”和“会员”三个菜单项，并在“会员”菜单项下建立两个子项(“注册”和“登录”)，如图3-15所示。图3-15 菜单项编辑器通过在“菜单项编辑器”中添加菜单项，系统将自动同步产生代码。代码如下所示：通过浏览页面，查看设计的效果，如图3-16所示。图3-16 显示效果图(2)使用站点地图对于一些小型站点或个人站点，可以通过手工方式添加导航菜单的内容，但对于一些企业级的站点，通常是将菜单内容集中存储，如站点地图，然后通过使用SiteMapDataSource控件和M

42、enu控件关联站点地图来展示站点的导航层次结构。在下面的例子中，首先将Menu和SiteMapDataSource控件添加到页面，然后设置Menu的DataSourceID属性，以指定它将使用的数据源控件。浏览页面，将会发现菜单只显示了一级，如图3-17所示。当鼠标移动到菜单项“主页”上时，将会看到其下级子菜单，如图3-18所示。图3-17 显示效果图 图3-18 显示效果图因此，可以看出菜单是按垂直方式显示的，并且只显示一级静态菜单。很显然，这不是我们所期望的，故需重新设置Menu1的属性Orientation和StaticDisplayLevels，将Orientation设为“Horiz

43、ontal”，再将StaticDisplayLevels设为“2”。代码如下：再次浏览页面，界面显示效果如图3-19所示。图3-19 显示效果图 任务实现任务实现步骤1 打开校园在线超市ASP.NET网站，在“解决方案资源管理器”中选择“添加新项”，在“添加新项”对话框的模板列表中选择“站点地图”，名称为“web.sitemap”，并点击“添加”按钮。步骤2 修改“web.sitemap”站点地图文件代码，代码如下：步骤3 打开“MasterPage.master”母版页文件，删除原导航条的代码，代码范围如下所示：超市首页/最新上架/特价商品/热销商品/BBS论坛/会员天地/校园广播/交流中心

44、步骤4 在代码删除位置插入Menu控件，并在“选择数据源”下拉列表中选择“新建数据源”，出现“数据源配置向导”对话框，如图3-20所示。图3-20 “数据源配置向导”对话框步骤5 在“数据源配置向导”对话框中选择“站点地图”，点击“确定”按钮，并设置Menu控件的Orientation属性为“Horizontal”，ForeColor属性为“White”，StaticDisplayLevels属性为“2”。其HTML代码如下所示：步骤6 浏览Login.aspx页面，查看其显示效果。步骤7 在App_Data目录下创建XML文件，名称为ad.xml，代码如下所示：/Images/index/ad/1.jpg流行女装90/Images/index/ad/2.jpg畅销鞋款50/Images/index/ad/3.jpg美容护肤70步骤8 打开“MasterPage.master”母版页文件，删除原导航条下方中间的广告图片，代码范围如下所示：步骤9 在删除原导航条下方中间的广告图片的位置插入广告控件，并设置其AdvertisementFile属性，代码如下所示：步骤10 浏览Login.aspx页面，并刷新页面，查看其显示效果。