任务6. 2　网上书店的导航实现

图6.2添加母版页

①母版页的后缀名为.master，而一般网页的后缀名为.aspx。

②母版页与一般网页的HTML代码不同，不同之处是：

A.母版页使用Master关键字进行声明（顶部第一条语句），代码如下所示：

而一般网页使用Page关键字进行声明，代码如下所示：

B.母版页包含ContentPlaceHolder控件，该控件用于确定母版页中的可变部分，在母版页中无需编辑该控件，代码如下所示：

与一般ASP.NET网页类似，设计者能够在母版页中通过拖放控件或直接编写HTML进行布局，母版页能容纳各种页面元素，如HTML代码、Web控件、用户定义控件等。所不同的是，母版页的布局是为一系列网页所共享的，因此需要在母版页定义出各网页的公共不变部分，确定大致的版式，如顶部Logo信息和通用功能，底部版权信息，而将各网页的可变部分用ContentPlaceHolder控件标识出来，留待创建具体内容网页时进行扩展。

使用母版页具有以下好处：

a.可以集中地处理网页的不变部分和通用功能，包括布局和控件定义。

b.能够为其他页面提供模板进行以二次开发。

c.能将整个网站的布局集中到个别页面，这样就将页面功能和页面布局实现了分离。

（2）创建内容页

使用母版页作为模板创建的页面称为内容页，内容页的特定功能部分与母版页的公共布局部分会组合一个具体页面呈现给客户端。

在VS 2008中能很轻松地以母版页作为模板创建内容页，在解决方案资源管理器中，在对应的网站项目右键单击，并在下拉菜单中选择“添加新项”命令，弹出“添加新项”对话框，在模板中选择“Web窗体”，并同时勾选对话框下部的“选择母版页”复选框，如图6.3所示。

图6.3创建内容页

单击“添加”按钮，系统会提示选择对应的母版页，在选择相应的母版页后，单击“确定”按钮即可创建内容页，如图6.4所示。

图6.4选择已创建的母版页作为模板

创建后的内容页的页面代码有两个地方需要进行说明：

①声明语句为

MasterPageFile属性指明了该内容网页使用母版页作为模板，该母版页所在路径为～／MasterPage.master。

②母版页ContentPlaceHolder占位控件所对应的区域，在内容页中由Content控件指示。因此，Content控件所标识的区域就是内容页的可扩展部分，其他区域会被母版页的公共模板部分自动替代，并且不允许修改，Content控件代码如下所示：ContentPlace-Holder占位控件所确定的区域，用户能够通过编辑Content控件并向该控件中添加HTML或Web控件，实现内容页的特有功能。

运行时，内容页的Content控件内容将被映射到母版页的ContentPlaceHolder控件，母版页和内容页会进行整合，形成结果页面呈现给客户端用户。母版页和内容页都是独立的页面，各自具有自身的功能和职责，只是在运行时才会进行合并并生成对应的结果页面。

在创建一个完整的母版页之后，接下来必然要创建内容页，对一般浏览者而言，内容页与最终结果页面的访问路径相同，好像两者是同一文件，其实不然，最终结果页是一个虚拟页面，没有实际代码，其内容是运行时母版页和内容页合并的结果。

虽然内容页与普通页的扩展名相同，都是.aspx。然而，两者的代码结构却有着很大的差别，体现在：

A.内容页中所有具体内容必须包含在Content控件中。

B.内容页必须绑定母版页。

【任务实施】

网上书店的版式设计实现步骤。

①创建母版页：在解决方案资源管理器中，在网上书店项目名称BookStoreOnWeb上右键单击，在下拉菜单中选择“添加新项”菜单项，弹出“添加新项”对话框，在模板中选择“母版页”，采用默认名称，向网站项目中添加一个母版页MasterPage.master。

②在母版页中进行布局

打开母版页MasterPage.master，在设计视图模式下添加一个5行1列的HTML表格，宽度设置为100%，并将第1行拆分为2列。

在第1个单元格中加入Logo图片，在第1个单元格实现搜索功能：加入1个文本框控件，ID设置为tbKeyWord；加入1个下拉列表框，ID设置为ddlType，在Items属性中打开集合编辑器，添加Text属性分别为“图书名称”“作者”“出版社”“内容介绍”的4个选项，对应的Value属性分别设置为“BookName”“Author”“Publisher”“BookContent”；加入一个按钮，ID设置为btnSearch，Text设置为“搜索”。

在第2行中加入一条HTML直线作为分隔符，宽度设置为100%。

在第3行中加入ContentPlaceHolder控件，属性全部采用默认值，使该行成为母版页中的可变部分，以便在制作内容页时进行扩展。

在第4行中加入一条HTML直线作为分隔符，宽度设置为100%。

在第5行中设置单元格居中，加入版权声明。

母版页布局完成后，整体效果如图6.5所示。

图6.5网上书店母版页布局

③为母版页实现搜索功能：在母版页中，双击“搜索”按钮，生成对应的单击事件处理方法，添加如下代码：

④使用母版页制作其他功能页面：在解决方案资源管理器中，在网上书店项目右键单击，在下拉菜单中选择“添加新项”菜单项，弹出“添加新项”对话框，在模板中选择“Web窗体”，并同时勾选对话框下部的“选择母版页”选项。单击“添加”按钮，系统会弹出选择母版页对话框，选择母版页MasterPage.master后，单击“确定”按钮即可创建内容页，如图6.6所示。

图6.6网上书店内容页

⑤在设计视图模式下，在内容页的可扩展部分，即ContentPlaceHolderID为“ContentPlace-Holder1”的Content控件中进行布局，添加Web控件，生成具体的功能页面，通过该方式生成的注册页面和购物车页面如图6.7和图6.8所示，这里只考虑具体页面的界面设计，而不考虑功能的实现。

图6.7网上书店用户注册页面

图6.8网上书店购物车页面

⑥单击绿色箭头按钮或按快捷键“F5”运行和调试各具体页面。

【拓展与提高】

母版页和内容页的数据交换

内容页的一般代码如下所示：

从上述代码可以看出内容页与普通.aspx文件的不同：内容页没有＜html＞、＜body＞、＜form＞等关键HTML元素，这些元素被放置在母版页中，内容页中除了头部声明，仅包含Content控件：内容页的头部声明与普通.aspx文件基本相似，仅仅新增加了属性MasterPage-File，该属性用于设置所绑定的母版页路径，从而能够指定所绑定的母版页；Content控件内部包含的内容是页面的非公共部分，通过设置Content控件的ContentPlaceHolderID属性，将Content控件与母版页对应ID的ContentPlaceHolder控件进行对应，页面运行时，Content控件的内容将显示在母版页对应ContentPlaceHolder控件的位置。

①如果内容页需要得到母版页中的数据，较为典型的是从内容页中获取母版页控件中的用户输入，即可以通过页面的内部对象Master的Findcontrol方法找到母版页中输入控件的ID号。Master对象是对内容页所绑定母版页的引用，一旦内容页在头部声明中通过MasterPage-File属性指定了母版页，则Master对象可用。例如，从内容页面获取网上书店母版页中搜索关键字文本框的值：

②另一方面，如果母版页需要得到内容页中的数据，较为典型的是从母版页获取内容页控件中的用户输入，即可以通过母版页中ContentPlaceHolder控件的FindControl方法，找到该控件匹配的内容页Content控件中的用户输入控件的ID号。例如，从母版页获取网上书店用户注册内容页中用户输入的用户名：

【教学评价】

评价标准见表6.1。

表6.1任务6.1评价标准

任务6. 2　网上书店的导航实现

【任务描述】

大型商场和超市一般都会设置比较详细的购物指示牌，按照购物指示牌的指示，消费者能很快找到欲购商品所在的楼层和区域。对于网上书店这种商品数量庞大、页面内容丰厚的电子商务系统，也应该提供类似机制，以方便购书者能快速浏览、查找和挑选图书，这种机制称为网站导航。在以往的Web开发中，要实现良好的网站导航功能并不容易，而ASP.NET自2.0版本开始就为网站导航的建立提供了完整的解决方案：首先，提供Web.sitemap站点地图文件，该文件采用XML格式，能够方便地定义整个网站的站点结构（即站点地图）；其次，提供了SitMapDataSource站点地图数据源控件，能够方便地将站点地图信息作为数据源与可视化导航控件进行绑定，这些导航控件包括Menu、TreeView和SiteMapPath等，它们能采用级联菜单、树型结构、超链接当前路径等多种形式实现网站导航。将以上的几方面综合就能轻松地实现网站导航。

本任务首先使用站点地图文件定义网上书店系统的网站结构，使用SitMapDataSource控件自动提取站点地图文件信息，形成数据源，在首页上使用Menu控件实现网上书店的菜单导航，在母版页上使用SiteMapPath控件，以实现内容页的超链接当前路径的显示和导航，界面效果如图6.9和图6.10所示。

图6.9网上书店首页菜单导航

图6.10网上书店内容页的路径导航

下面首先对本任务将会使用的Web.sitemap站点地图文件、SiteMapDataSource站点地图数据源控件，Menu控件和SiteMapPath控件的基本性质和使用方法分别进行介绍。

【知识准备】

（1）建立SitMapDataSource站点地图数据源

1）新建Web.sitemap

在Visual studio 2008开发环境的“解决方案资源管理器”窗口，右键单击网上书店系统项目名称，在弹出的快捷菜单中选择“添加新项”菜单项，打开“打开新项”对话框中，在其中选择“站点地图”模板，此时站点地图文件默认命名为Web.sitemap，一般不要修改该文件的名称。单击“添加按钮”，“添加新项”对话框会自动关闭，然后，在“解决方案资源管理器”窗口网上书店项目中就会新增一个Web.sitemap文件，而且，Visual studio 2008开发环境中部的编辑窗口中会显示Web.sitemap文件的默认内容。

2）编写站点地图文件

Web.sitemap文件是一个XML格式的文件，默认内容如下：

该文件主要包含两个标记，即siteMap标记和siteMapNode标记：siteMap标记为XML文件必备的根节点。siteMapNode标记定义了首页下的各级页面节点，其中，siteMap标记下的第一个siteMapNode标记代表了站点首页，因此，这一级的siteMapNode标记只能有一个。siteMap-Node标记的url属性用于设置该页面节点所对应的URL路径；title属性用于设置该页面节点在导航控件中所对应的超链接文本；description属性用于设置对该页面节点的描述，当鼠标移至对应的超链接文本时，将显示该描述信息。siteMapNode标记所形成的层次结构与网站结构一一对应。

可以根据在网站设计阶段已经形成的网站结构图对Web.sitemap文件进行修改，例如：

在网站结构中，首页Default.aspx为一级页面，art.aspx、manage.aspx、literature.aspx、hostory.aspx、philo＿reli.aspx为二级页面，在art.aspx页面下还有三级页面drawing.aspx和music. aspx。

3）建立SitMapDataSource数据源

在Visual studio 2008的编辑窗口的设计视图状态下，从“工具箱”窗口的“数据”栏目下，拖动一个SiteMapDataSource控件到页面上，默认名为SiteMapDataSource1，该控件无需进行设置，它能够自动识别并提取Web.sitemap站点地图文件中的信息，条件是站点地图文件的文件名必须为Web.sitemap。这样，SitMapDataSource站点地图数据源就成功建立了。

SitMapDataSource数据源控件的常用属性为ShowStartingNode，该属性用户指示是否在导航控件中显示起始节点，起始节点即为首页节点，一般不需要在导航控件中显示出来。

（2）Menu控件

Menu控件在Web页中显示为菜单，Menu控件支持将菜单项绑定到分层数据源（一般为XML格式），因此常与SiteMapDataSource控件结合使用；Menu控件可以进行编程控制，如创建菜单、修改菜单项，设置相应属性等；Menu控件提供诸多样式属性，可以通过CSS样式、自定义图像和自定义模板等方式按需要灵活地定义菜单外观，下面首先对Menu控件的一些常用属性、方法和事件进行介绍。

1）常用属性、方法和事件

StaticDisplayLevels属性：静态菜单的菜单显示级别数。默认值为1级，根节点不计入。

M aximumDynam icDisplayLevels属性：动态菜单的菜单呈现级别数，默认值为3级。

DisappearAfter属性：鼠标指针不再置于菜单上，动态菜单显示的是持续时间（单位为ms），默认值为500。

说明：Menu控件显示出两种类型的菜单：静态菜单和动态菜单。静态菜单始终显示出来，通过设置StaticDisplayLevels属性，可以规定静态显示的子菜单级别，级别高于StaticDisplay-Levels属性值的子菜单项则显示为动态菜单，只有当用户将鼠标指针移至该动态菜单对应的父菜单项时，才会显示出该动态菜单。另外，可以通过设置MaximumDynamicDisplayLevels属性，限制动态菜单的最高显示级别数，高于该属性值级别的子菜单会被丢弃。当鼠标移开后，在持续一定的时间后，动态菜单会自动消失，可以通过设置DisappearAfter属性指定动态菜单持续时间。

Item s属性：包含Menu控件中的所有根菜单项，通过该属性，可以递归地访问到Menu控件所有的菜单项（MenuItem对象），也可以添加、插入、移除菜单项。

说明：Menu控件由菜单项形成的树结构组成，顶级菜单项称为根菜单，具有父菜单的菜单项称为子菜单，所有根菜单都存储在Menu控件的Items集合中，子菜单存储在父菜单项的ChildItems集合中。下面对MenuItem菜单项对象的一些常用属性进行介绍。

ChildItems属性：包含当前菜单项的所有子菜单项。

Text属性：获取或设置Menu控件中显示的菜单项文本。

Value属性：获取或设置一个预设值，用于存储与菜单项相关联的其他数据。

NavigateUrl属性：获取或设置单击菜单项时要导航到的URL。如未设置该属性，则单击该菜单项时，Menu控件将进行提交，由服务器进行处理。

Target属性：获取或设置用来显示菜单项的关联网页内容的目标窗口或框架。

ImageUrl属性：获取或设置显示在菜单项文本旁边的图像的URL。

DataSourceID属性：设置所绑定的数据源控件的ID，Menu控件可以绑定到任意分层数据源控件，如XmlDataSource控件或SiteMapDataSource控件。

Orientation属性：获取或设置Menu控件的呈现方向，可以指定为水平呈现或垂直呈现。

可以为不同类型和不同状态的菜单项指定不同样式，见以下属性：

Dynam icHoverStyle属性：动态菜单项在鼠标指针置于其上时的样式设置。

Dynam icMenuItem Style属性：单个动态菜单项的样式设置。

Dynam icM enuStyle属性：动态菜单的样式设置。

Dynam icSelectedStyle属性：当前所选动态菜单项的样式设置。

StaticHoverStyle属性：静态菜单项在鼠标指针置于其上时的样式设置。

StaticM enuItem Style属性：单个静态菜单项的样式设置。

StaticM enuStyle属性：静态菜单的样式设置。

StaticSelectedStyle属性：当前所选静态菜单项的样式设置。

以下是Menu控件最为常用的两个事件：

Menu ItemClick事件：单击菜单项时触发，如果未设置菜单项NavigateUrl属性，可以为该事件生成后台事件处理方法，并实现菜单功能，代码示例如下：

Menu ItemDataBound事件：当菜单项绑定到数据时触发，用来在数据绑定的菜单项呈现之前对菜单项进行修改。

2）菜单的静态编辑

如果只是实现Menu控件的静态导航，可以直接编辑菜单项。编辑过程如下：

①在设计视图状态下，从“工具箱”窗口的“导航”控件组中，将一个Menu控件拖到首页上。

②右击该Menu控件，单击控件上的“＞”智能按钮，然后选择“编辑菜单项”选项，或在对应的属性面板中，移动至Items属性，单击该属性后面的“...”浏览按钮，两种方式都将打开菜单项编辑器。

③在菜单项编辑器的“项”文字下方，单击“添加根项”图标按钮，则会在项列表中创建一个“新建项”，在“新建项”对应的属性列表中，将Text属性设置为“艺术”，将NavigateUrl属性设置为“art.aspx”，并将ToolTip属性设置为“艺术类书籍”。

④同理，添加其余4个根项，Text属性分别设置为“管理”“文学”“历史”“哲学／宗教”；NavigateUrl属性分别设置为“manage.aspx”“literature.aspx”“history.aspx”“philo＿reli.aspx”；ToolTip属性分别设置为“管理类书籍”“文学类书籍”“历史类书籍”“哲学／宗教类”。

⑤在项列表中选中“艺术”项，单击“添加子项”图标按钮，则会在“艺术”项下创建一个子项，在对应的属性列表中将Text属性设置为“绘画”，将NavigateUrl属性设置为“drawing.aspx”，并将ToolTip属性设置为“绘画类书籍”。

⑥同理，在“艺术”项下创建另一个子项，将Text属性、NavigateUrl属性、ToolTip属性分别设置为“音乐”“music.aspx”“音乐类书籍”。以上设置完成后效果如图6.11所示。

图6.11 Menu菜单项编辑器

⑦至此，Menu控件编辑完成，单击确定按钮关闭菜单项编辑器，在页面上选中控件，单击控件上的“＞”智能按钮，选择“自动套用格式”选项，为Menu控件设置某种预定义的样式。同时，在属性面板中将其Orientation属性设置为水平（Horizontal），网页运行后的效果如图6.12所示。同时注意，要使Menu控件能正确导航，还需要制作单击菜单项跳转到的目标网页。使用此方法的优点是直接简单，无需编程，缺点是只能实现静态导航，不易修改和扩展。

图6.12 Menu运行效果图

⑧设置完成后，静态菜单对应的页面HTML代码如下：

（3）SiteMapPath控件

SiteMapPath控件称为站点地图路径，显示了当前页的超链接分层路径，从而能够从当前位置，沿着页层次结构向上进行跳转。它是当前页在站点中的位置的引用点，能够轻松实现以当前位置为基点的导航。同时，相对于其他导航控件如TreeView或Menu，它只占用极少的页面空间，被称为页眉或面包屑。由于其具备上述特点，故该控件对于分层结构较深的站点极为有用。

SiteMapPath控件直接使用站点地图文件的数据，要使它能正常运行，则必须在站点地图文件中定义好站点地图的结构。如果将SiteMapPath控件用到未在站点地图中定义的页面，则该控件将无法显示出分层路径。为了方便在内容页使用SiteMapPath控件进行导航，一般可将其放置在母版页中，当使用该母版页生成了内容页后，内容页将自动获得该控件，并且，该控件将正确显示内容页在站点地图中的超链接路径。

SiteMapPath控件的分层路径中的每个元素都称为节点（SiteMapNodeItem对象）。分层路径最上层的节点称为根节点，当前页的节点称为当前节点，当前节点与根节点之间的其他节点都称为父节点，SiteMapPath控件由这3种节点构成。SiteMapPath控件提供属性，可以分别为这3种节点定义样式：

NodeStyle属性：获取用于站点导航路径中所有节点的显示文本的样式。

RootNodeStyle属性；获取根节点显示文本的样式。

CurrentNodeStyle属性：获取用于当前节点显示文本的样式。

以上3个属性都包含若干子属性，可以用于设置显示文本的字体、大小、边框、颜色等样式，可以在SiteMapPath控件属性面板中直接进行设置。也可以单击SiteMapPath控件上的“＞”智能按钮，选择“自动套用格式”选项，为控件设置某种预设样式。

为控件设置简单格式后的页面HTML代码如下：

【任务实施】

网上书店的导航系统的实现步骤如下：

①创建站点地图文件：在解决方案资源管理器中，在网上书店项目名称BookStoreOnWeb上右键单击，在下拉菜单中选择“添加新项”菜单项→弹出“添加新项”对话框，在模板中选择“站点地图”，采用默认名称Web.Sitemap，向网站项目添加一个Web.Sitemap站点地图文件。

②双击打开站点地图文件Web.Sitemap，对其默认内容进行修改并保存，修改后的内容如下：

以上代码内容虽多但并不复杂，一共只有3级页面节点，第一级为首页节点，首页节点下包含若干二级节点，每个二级节点下包含两个三级节点。

③打开网上书店项目的首页，放置一个SiteMapDataSource站点地图数据源控件，采用默认名称SiteMapDataSource1，在对应的属性面板中将ShowStartingNode设置为False，使导航控件不显示首页节点，而从首页节点的下一级节点开始显示。SiteMapDataSource数据源控件会自动读取Web.sitemap站点地图文件中的数据，因此无须进行任何配置。

④在网上书店系统首页自定义内容顶部区域放置一个Menu控件，单击控件上的“＞”智能按钮，将第3）步定义的SiteMapDataSource1控件选为Menu控件的数据源；并选中“自动套用格式”选项，为Menu控件选择“彩色型”预设样式模板，并在对应的属性面板中将Orientation属性（显示方向）设置为“Horizontal”（水平）；同时将Font属性下的字型设置为“宋体”，大小设置为“Medium”（中号）。

⑤在网上书店项目下双击打开母版页MasterPage.master，在网上书店的Logo下方放置一个SiteMapPath控件，采用默认标识号SiteMapPath1，单击控件上的“＞”智能按钮选择“自动套用格式”，为控件选择“专业型”样式模板。在对应的属性面板中将字体修改为较大字号，将超链接路径上不同类型的节点修改为不同的背景颜色（在属性面板中找到前面介绍的节点样式属性，展开即可修改背景颜色）。

⑥在网上书店项目下以母版页为基础生成在站点地图文件中定义过的目标页，在这些导航目标页上实现具体逻辑功能，使导航系统能够正常跳转。

⑦单击Visual Studio 2008工具栏上的绿色箭头按钮或按快捷键“F5”启动调试运行，对程序进行调试后使程序正确运行，运行效果如“任务描述”部分的效果图所示。

【拓展与提高】

（1）TreeView控件

TreeView控件在外观上表现为一个树结构，与Menu控件类似，TreeView控件也用于显示分层数据和导航，例如文件目录。具体而言，它支持以下功能：

①数据绑定：控件的树节点可以绑定到XML格式数据和关系数据；

②站点导航：与SiteMapDataSource控件结合实现，树节点文本显示为超链接；

③编程控制：借助编程方式可以动态地创建树、填充节点、设置属性等；

④自定义外观：通过用户定义的图像和样式可实现控件的自定义外观。

下面首先对TreeView控件的常用属性、方法、事件进行介绍，在学习的同时，请读者注意同Menu控件的主要属性、方法和事件进行类比，以便快速掌握TreeView控件的重要特征。

1）常用属性、方法和事件

Nodes属性：包含TreeView树控件中所有根节点的集合，通常的树结构只有一个根节点；但控件也支持添加多个根节点。通过首先访问根节点，可以递归地访问到控件中所有的树节点，也可以添加、插入、移除树节点。

说明：TreeView控件由节点组成，树结构的每个元素称为一个节点（TreeNode对象）。节点分为以下几种类型：

①包含其他节点的节点称为“父节点”；

②被其他节点包含的节点称为“子节点”；

③没有子节点的节点称为“叶节点”；

④不被其他任何节点包含同时是所有其他节点的上级节点称为“根节点”。

下面对TreeNode节点对象的一些常用属性进行介绍：

ChildNodes属性：获取TreeNodeCollection集合，该集合包含当前节点的第一级子节点。

Text属性：获取或设置为TreeView控件中的节点显示的文本。

Value属性：获取或设置用于存储有关节点的任何其他数据的非显示值。

NavigateUrl属性：获取或设置单击节点时导航到的URL。

PopulateOnDemand属性：指示是否在单击某节点时动态填充下级节点。

Target属性：获取或设置用来显示与节点关联的网页内容的目标窗口或框架。

ValuePath属性：获取从根节点到当前节点的路径。

ImageUrl属性：获取或设置节点旁显示的图像的URL。

节点可以处于两种状态之一：选定状态和导航状态。节点默认处于选定状态，若要使某个节点处于导航状态，只需将该节点的NavigateUrl属性值设置为具体的URL地址，若未设置，则节点处于选定状态。

下面是关于数据绑定的属性：

DataSourceID属性：设置所绑定的数据源控件的ID，TreeView控件可以绑定到任意分层数据源控件，如XmlDataSource控件或SiteMapDataSource控件。

DataBindings属性：获取TreeNodeBinding对象的集合，这些对象定义数据源的数据项与其绑定到的节点之间的关系。例如，如果是XML元素作为数据项，节点文本默认显示该元素的名称。通过使用DataBindings集合指定树节点绑定，可以将节点绑定到特定数据项的属性。TreeNodeBinding对象定义数据项与其绑定到的节点之间的关系，用于指定在节点中显示的绑定条件和数据项属性，具体如何使用将在本部分的下一个内容中介绍。

下面属性可以为不同的节点类型指定不同的样式（例如字号和颜色）：

HoverNodeStyle属性：鼠标指针停在节点上时该节点的样式。

LeafNodeStyle属性：设置叶节点的样式。

NodeStyle属性：设置节点的默认样式。

ParentNodeStyle属性；设置父节点的样式。

RootNodeStyle属性：设置根节点的样式。

SelectedNodeStyle属性：设置选定节点的样式。

下面是TreeView控件的常用事件：

SelectedNodeChanged事件：当选择控件中的节点时触发。

TreeNodeExpanded事件：当扩展TreeView控件中的节点时触发。

TreeNodeCollapsed事件：当折叠TreeView控件中的节点时触发。

TreeNodePopulate事件：当某节点的PopulateOnDemand属性为true时，该节点在Tree-View控件中展开时触发。

TreeNodeDataBound事件：当数据项绑定到TreeView控件中的节点时发生。

2）TreeView控件的静态编辑

如果只是实现TreeView控件的静态导航，可以直接编辑控件节点。编辑过程如下：

①在设计视图状态下，从“工具箱”窗口的“导航”控件组中，将一个TreeView控件拖到首页上。

②右击该TreeView控件，单击控件上的“＞”智能按钮，然后选择“编辑节点”选项，打开TreeView节点编辑器。

③在菜单项编辑器的“节点”文字下方，单击“添加根节点”图标按钮，则会在节点列表中创建一个“新建节点”，在“新建节点”对应的属性列表中，将Text属性设置为“艺术”，将NavigateUrl属性设置为“art.aspx”，将ToolTip属性设置为“艺术类书籍”。

④同理，添加其余4个根节点，Text属性分别设置为“管理”“文学”“历史”“哲学／宗教”；NavigateUrl属性分别设置为“manage.aspx”“literature.aspx”“history.aspx”“philo＿reli.aspx”；ToolTip属性分别设置为“管理类书籍”“文学类书籍”“历史类书籍”“哲学／宗教类”。

⑤在节点列表中选中“艺术”根节点，单击“添加子节点”图标按钮，在“艺术”根节点下创建一个子节点，在对应的属性列表中将Text属性设置为“绘画”，将NavigateUrl属性设置为“drawing.aspx”，将ToolTip属性设置为“绘画类书籍”，并将Checked属性设置为True（默认选中该子节点）。

⑥同理，在“艺术”根节点下创建另一个子节点，将Text属性、NavigateUrl属性、ToolTip属性分别设置为“音乐”“music.aspx”“音乐类书籍”，以上设置完成后效果如图6.13所示。

⑦至此，TreeView控件编辑完成，单击确定按钮关闭编辑器。运行网页后的效果如图6.14所示。同时注意，要使TreeView能正确导航，还需要制作单击树节点跳转到的目标网页。使用此方法的优点是简单直接，无须编程，缺点是只能实现静态导航，不易修改和扩展。

图6.13 TreeView节点编辑器

图6.14编辑后的TreeView效果图

⑧设置完成后，TreeView控件对应的页面HTML代码如下：

3）绑定SitMapDataSource数据源

TreeView控件也可以直接使用SitMapDataSource数据源控件实现导航，只需单击TreeView控件上的“＞”智能按钮，然后在“选择数据源”下拉列表框中选择对应的SitMapDataSource数据源控件ID。例如，选择本任务中站点地图文件对应的SitMapDataSource1控件作为TreeView控件的数据源，运行效果如图6.15所示。

图6.15网上书店TreeView导航

4）TreeView控件的典型编程方式

可以使用TreeView控件的属性、事件、方法对控件进行操作。例如可以根据后台数据动态地创建树节点、修改外观等。

下面用一个典型的实例进行说明：假设数据库中有两级分类表，分类表的典型设计见表.2和表6.3。

表6.2一级分类表（Level1＿Class）

表6.3二级分类表（Level2＿Class）

用户希望将一级类别作为TreeView控件的静态、唯一的根节点（文本为“图书分类”）的子节点，将二级类别作为对应一级类别子节点下的子节点显示出来，而且要求一级类别静态显示，二级类别在单击某个一级类别时才展开显示。实现动态展开二级类别的方法是：在单击一级类别节点时动态填充对应的二级类别。此时，需要为根节点生成TreeNodePopulate事件处理方法，在方法中实现填充二级类别节点的逻辑；并在一级类别节点初始显示时，通过代码将其PopulateOnDemand属性设置为true。

另外，该实例还涉及对数据库的访问，这部分内容已经在前面的内容中进行了详细的介绍，此处使用了一个自定义的数据库查询方法。该实例的具体实现步骤如下：

①从工具箱的导航组中拖动一个TreeView控件到首页上，将ID设置为tv＿BookClass。

②右击该TreeView控件，单击控件上的“＞”智能按钮，然后选择“编辑节点”选项，打开TreeView节点编辑器。

③单击“添加根节点”图标按钮，创建一个根节点，在对应的属性列表中，将Text属性设置为“图书分类”，并将PopulateOnDemand设置为true。

④单击“确定”按钮，即可创建最顶部的根节点，该节点是静态的。

⑤右击TreeView控件，在事件面板中，双击TreeNodePopulate事件后面的框生成对应的事件处理方法tv＿BookClass＿TreeNodePopulate（）。

⑥切换到首页对应的.cs代码文件中，首先在Page＿Load（）方法中添加根节点下的一级分类节点，代码如下：

⑦然后在tv＿BookClass＿TreeNodePopulate（）事件处理方法中动态添加当前一级类别节点下的二级类别节点，代码如下：

⑧单击Visual Studio 2008工具栏上的绿色箭头按钮或按快捷键“F5”启动运行，对程序进行调试。

（2）XmlDataSource数据源控件

Xml数据源控件主要用于显示分层XML数据，它能将来自文件或内存字符串的XML数据轻易地在Web窗体页显示出来，该控件主要用于只读情况，虽然它也支持对XML数据来源进行修改。DataFile属性是XmlDataSource控件的较为重要的属性，用于设置绑定数据源的XML文件的文件名。

1）XmlDataSource控件的配置

下面的实例演示了配置XmlDataSource控件的过程：

①创建XML文件。在“解决方案资源管理器”的项目上右键单击，在弹出的菜单中选择“添加新项”，打开“添加新项”对话框，在模板列表中选择“XML文件”，并命名为SiteStruct. xml，确定后，该文件就会在项目下创建并显示。

②双击打开XML文件进行修改，完成后的内容如下，注意区分它和站点文件内容的不同之处：

③从“工具箱”的“数据”控件组拖动一个XmlDataSource控件到页面上，采用默认名称“XmlDataSource1”，选中该控件，在对应的属性面板中找到DataFile属性，单击后边框中的浏览按钮，打开“选择XML文件”，选中右边框中自动出现的SiteStruct.xml，如图6.16所示。

图6.16选择XML文件对话框

④单击“确定”按钮关闭对话框，此时，XmlDataSource控件配置完成，就能够直接与Web界面控件结合，在页面上即可显示XML数据信息。XmlDataSource控件对应的HTML代码如下：

2）XmlDataSource控件的使用

XmlDataSource控件在配置完成后，就能与Web界面控件结合使用。例如，可以和Tree-View控件结合使用，将对应Xml数据源的分层信息显示出来，具体过程如下：

①从“工具箱”的“导航”控件组拖放一个TreeView控件到页面，选中TreeView控件，单击“＞”智能按钮，将1）中配置好的XmlDataSource1控件选作数据源，对应的HTML为：

运行后TreeView的效果图如图6.17所示。

图6.17使用XmlDataSource1数据源的原始TreeView效果

可以清楚地看到，TreeView控件只能显示XML文件中各个XML元素的名称，不能显示诸如元素属性等其他信息，因此需要将XML中的数据项与TreeView控件节点进行自定义的数据绑定。配置过程如下：选中控件，单击“＞”智能按钮，选择“编辑TreeNode数据绑定”选项，打开“TreeView DataBinding”编辑器，选择TreeView控件的节点添加到“所选数据绑定”列表，并在右侧的“数据绑定属性”列表中进行设置，可能需要设置的属性包括：DataMember、Text-Field、ValueField、NavigateUrlField等，DataMember属性指示TreeView控件的节点数据来自XML数据源的哪个元素，即是将节点信息和XML元素对应起来；后面几个包含“Field”的属性和并未列出的包含“Field”的属性指示，节点对象的属性值来自对应XML元素的哪个属性，即是将节点对象的属性与XML元素的属性对应起来。配置了根节点后的“TreeView DataBinding”编辑器的效果图如图6.18所示。

②将其他节点配置完成后，对应的HTML代码如下：

运行后，TreeView控件节点显示为TextField所对应XML元素的属性值，当用户将鼠标移至节点上时，显示为ToolTipField所对应的XML元素的属性值，如图6.19所示。

图6.18 TreeView DataBinding编辑器

图6.19与XmlDataSource1进行数据绑定后的TreeView效果

【教学评价】

评价标准见表6.4。

表6.4任务6.2评价标准

【归纳总结】

①母版页是一种“页面复用”技术，它能将页面中版式不变的部分固化下来，作为基于它生成的内容页的模板。这样既统一了网站风格，又能提高开发效率。母版页的使用分为母版页的创建和内容页的创建两个步骤，同时，.NET框架也为母版页和内容页之间交换数据提供了接口。

②ASP.NET为开发者提供了一整套的实现站点导航的方案：通过Web.sitemap站点地图文件统一保存导航信息；通过SiteMapDataSource读取Web.sitemap中导航信息，并作为各种导航控件的数据源；通过Menu、TreeView提供集中式的绝对路径导航，通过SiteMapPath提供分散式的相对路径导航。

③Menu、TreeView导航控件与项目5中介绍的数据控件有很多相似之处，如都用于显示批量数据，都能够进行数据绑定等。不同之处在于：项目5中的数据控件更适于显示和处理元素之间是线性关系的批量数据，因此一般使用关系型数据源（如SqlData Source等），使其与数据库能更好地结合；而Menu和TreeView更适于显示和处理元素之间是层次关系的批量数据，因此一般使用层次型数据源（如XmlDataSource、SiteMapDataSource等），使其与XML文件能更好地结合。

【练习与实训】

实训1按照你自己的想法修改任务1中母版页的版式，并使用修改后的母版页创建其他内容页，如图书搜索结果显示页面等，并实现内容页的功能。

实训2使用XmlDataSource和TreeView重新实现任务2中首页的菜单导航的功能，即是说，使用XmlDataSource替代SiteMapDataSource，使用TreeView替代Menu，以使其实现相同的功能。

实训3在网上书店的后台数据库中创建一个图书分类表，字段为分类号（自增标识）和分类名称（字符型），尝试分别对TreeView和Menu控件进行编程，实现将数据库中的分类名称显示为TreeView的一级节点和Menu一级菜单，单击节点和菜单，能实现分类导航，即显示出该分类下的所有图书信息。