通过

演练：向网站添加站点导航

  • 项目

更新：2007 年 11 月

在含有大量页的任何网站中，构造一个可使用户随意在页间切换的导航系统可能颇有难度，尤其是在您更改网站时。ASP.NET 网站导航可使您创建页的集中网站地图。

本演练向您演示如何配置网站地图，以及如何使用依赖于网站地图的控件向网站中的页添加导航。

通过此演练，您将学会如何执行以下任务：

  • 创建含有示例页以及描述页布局的网站地图文件的网站。

  • 使用 TreeView 控件作为可使用户跳转到网站中任何页的导航菜单。

  • 使用 SiteMapPath 控件添加导航路径（也称为 breadcrumb），导航路径使用户能够查看从当前页向前的网站层次结构，并可沿着层次结构向回移动。

  • 使用 Menu 控件添加可使用户一次查看一级节点的导航菜单。将鼠标指针悬停在含有子节点的节点上方会生成子节点的子菜单。

  • 在母版页上使用网站导航和控件，这样您就只需定义网站导航一次。

先决条件

为了完成本演练，您需要：

  • Microsoft Visual Web Developer Web 开发工具。

  • .NET Framework。

此演练假定您了解如何使用 Visual Web Developer。

创建含有示例页和网站地图的网站

如果您已经通过完成 演练：在 Visual Web Developer 中创建基本网页 在 Visual Web Developer 中创建了网站，则可以使用该网站，并转至下一部分。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上，单击“新建网站”（或在“文件”菜单上，单击“新建”，然后单击“网站”）。

    出现“新建网站”对话框。

  3. 在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

  4. 在最左侧的“位置”框，单击“文件系统”，然后在最右侧的“位置”框中，输入您想保存网站所包含的页的文件夹的名称。

    例如，键入文件夹名“C:\WebSites\SiteNavigation”。

  5. 在“语言”框中，单击您想使用的编程语言。

    您选择的编程语言将是网站的默认语言，但您可以为每个页面分别设置编程语言。

  6. 单击“确定”。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

创建网站地图

若要使用网站导航，您需要一种方式来描述网站中的页如何布局。默认方法是创建一个包含网站层次结构的 .xml 文件，其中包括页标题和 URL。

.xml 文件的结构反映了网站的结构。每个页表示为网站地图中的一个 siteMapNode 元素。最上面的节点表示主页，子节点表示网站中更深层的页。

创建网站地图

  1. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

  2. 在“添加新项 <路径>”对话框中：

    1. 在“Visual Studio 已安装的模板”之下单击“网站地图”。

    2. 在“名称”框中，确保名称为“Web.sitemap”。

      说明：

      该文件必须名为“Web.sitemap”，并且必须出现在网站的根节点中。

    3. 单击“添加”。

  3. 将下面的 XML 内容复制到 Web.sitemap 文件中，覆盖默认内容。

    <siteMap>
  <siteMapNode title="Home" description="Home" url="~/home.aspx" >
    <siteMapNode title="Products" description="Our products"
         url="~/Products.aspx">
        <siteMapNode title="Hardware" 
             description="Hardware we offer" 
             url="~/Hardware.aspx" />
        <siteMapNode title="Software" 
             description="Software for sale" 
             url="~/Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" description="Services we offer" 
        url="~/Services.aspx">
        <siteMapNode title="Training" description="Training" 
            url="~/Training.aspx" />
        <siteMapNode title="Consulting" description="Consulting" 
            url="~/Consulting.aspx" />
        <siteMapNode title="Support" description="Support" 
            url="~/Support.aspx" />
      </siteMapNode>
  </siteMapNode>
</siteMap>

    Web.sitemap 文件包含一组三层嵌套的 siteMapNode 元素。每个元素的结构相同。它们之间唯一的区别是在 XML 层次结构中的位置。

    示例 .xml 文件中定义的页的 URL 是非限定的。这意味着将所有页的 URL 视为相对于应用程序根节点。然而，您可以为特定页指定任何 URL -- 您在网站地图中定义的逻辑结构不必对应于在文件夹中页的物理布局。

  4. 保存文件，然后将其关闭。

创建页以进行导航

在本部分中，您将仅创建在前面部分定义的网站地图中描述的几页。（该网站地图更加完整，以便您能在本演练中测试页时查看完整的层次结构。）

创建页以进行导航

  1. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

  2. 在“添加新项 <路径>”对话框中：

    1. 在“Visual Studio 已安装的模板”下单击“Web 窗体”。

    2. 在“名称”框中，键入“Home.aspx”，然后单击“添加”。

  3. 切换到“设计”视图。

  4. 在 Home.aspx 页上，键入“主页”，然后将其格式设置为“标题 1”。

    重复此过程，另外创建四个页，分别名为 Products.aspx、Hardware.aspx、Software.aspx 和 Training.aspx。将页的名称（例如，“产品”）用作标题，这样当页显示在浏览器中时，您就能识别各页。

    您具体创建哪些页并不重要。此过程中列出的页只是让您查看三层嵌套的网站层次结构的建议页。

使用 TreeView 控件创建导航菜单

现在您有了一个网站地图和一些页，接下来可向网站添加导航。您将使用 TreeView 控件作为可折叠的导航菜单。

vbVenusSiteNavigation_TreeView1 图像

添加树样式导航菜单

  1. 打开 Home.aspx 页。

  2. 从工具箱的“数据”组中，将“SiteMapDataSource”控件拖动到页面上。

    在其默认配置中，SiteMapDataSource 控件从您在“创建网站地图”（本演练的前面部分）中创建的 Web.sitemap 文件中检索其信息，这样您就不必为该控件指定任何额外信息。

  3. 从工具箱的“导航”组中，将 TreeView 控件拖动到页面上。

  4. 在“TreeView 任务”菜单上，在“选择数据源”框中单击“SiteMapDataSource1”。

  5. 保存页。

测试树样式导航菜单

现在您可以执行导航系统的临时测试。

测试导航菜单

  1. 按 Ctrl+F5 运行 Home.aspx 页面。

    树显示两级节点。

  2. 单击“产品”查看“产品”页。

    • 如果您未创建 Products.aspx 页，则单击您确实创建过的页的链接。

在网站的当前状态下，导航菜单仅出现在“主页”上。可以向应用程序中的每个页添加相同的 SiteMapDataSource 和 TreeView 控件，以便在每个页上都显示导航菜单。但是，在本演练的稍后部分，您将看到如何将导航菜单放置在母版页上，这样导航菜单就会自动出现在每一页中。

使用 SiteMapPath 控件显示导航历史记录

除了使用 TreeView 控件创建导航菜单外，您还可以在每个页上添加显示页位于当前层次结构中哪个位置的导航。此类导航控件也称为 breadcrumb。ASP.NET 提供了可自动实现页导航的 SiteMapPath 控件。

显示导航历史记录

  1. 打开 Products.aspx 页并切换至“设计”视图。

  2. 从工具箱的“导航”组中将 SiteMapPath 控件拖动到页面上，将光标放置在 SiteMapPath 控件前面，然后按 Enter 创建一个新行。

    SiteMapPath 控件显示当前页在页层次结构中的位置。默认情况下，SiteMapPath 控件表示在 Web.sitemap 文件中创建的层次结构。例如，当您显示 Products.aspx 页时，SiteMapPath 控件显示下面的路径：

    “主页”>“产品”

  3. 对您在本演练中创建的其他页重复此过程，“主页”除外。

    即使您未在每个页上放置 SiteMapPath 控件，出于测试目的，您需要在网站层次结构的每一级的页（例如，Products.aspx 和 Hardware.aspx 页）上放置一个控件。

测试导航历史记录

通过查看层次结构中第二级和第三级的页，您可以测试页导航。

测试页导航

  1. 打开 Home.aspx 页，然后按 Ctrl+F5 运行该页。

  2. 使用 TreeView 控件移至“产品”页。

    在页中您放置 SiteMapPath 控件的位置，您会看到类似于下面所示的路径：

    “主页”>“产品”

  3. 单击“主页”返回主页。

  4. 使用 TreeView 控件移至“硬件”页。

    此时您会看到类似于下面所示的路径：

    “主页”>“产品”>“硬件”

SiteMapPath 控件显示的所有页名称都是链接，除了最后一个，它表示当前页。通过将 SiteMapPath 控件的 RenderCurrentNodeAsLink 属性设置为 true，您可以将当前节点变为链接。

SiteMapPath 控件可使用户沿网站层次结构向回移动，但是不允许他们跳到未处于当前层次结构路径中的页。

使用 Menu 控件创建导航菜单

除了使用 TreeView 控件创建导航菜单外，您还可以使用 Menu 控件显示可使用户一次查看一级节点的可展开导航菜单。 将鼠标指针悬停在含有子节点的节点上方会生成子节点的子菜单。

添加菜单样式导航菜单

  1. 打开 Products.aspx 页并切换至“设计”视图。

  2. 从工具箱的“导航”组中，将 Menu 控件拖动到页面上。

  3. 在“Menu 任务”菜单上，在“选择数据源”框中单击“NewDataSource”。

  4. 在“配置数据源 - <Datasourcename> 向导”中，单击“网站地图”，然后单击“确定”。

  5. 保存页。

测试菜单样式导航菜单

现在您可以执行导航系统的临时测试。

测试导航菜单

  1. 关闭“Menu 任务”。

  2. 打开 Home.aspx。

  3. 按 Ctrl+F5 运行 Home.aspx 页面。

    树显示两级节点。

  4. 单击“产品”查看“产品”页。

    • 如果您未创建 Products.aspx 页，则单击您确实创建过的页的链接。

  5. 在导航菜单上，将鼠标指针停留在“主页”链接上以展开菜单。

在网站的当前状态下，导航菜单仅出现在“主页”上。可以向应用程序中的每个页添加相同的 SiteMapDataSource 和 Menu 控件，以便在每个页上都显示导航菜单。但是，在本演练的下一部分中，您将看到如何将导航菜单放置在母版页上，这样导航菜单将自动出现在每一页中。

在母版页中使用网站导航

在本演练目前为止所创建的页中，您已将网站导航控件逐个添加到了每个页。执行此操作并不特别复杂，因为您无需以不同的方式为每个页配置控件。但是，这可能增加网站的维护成本。例如，若要更改网站中页的 SiteMapPath 控件的位置，您将不得不逐个更改每页。

通过在母版页中使用网站导航控件，您可以创建在一个位置包含导航控件的布局。然后您可以将其他页显示为母版页中的内容。

创建用于导航的母版页

  1. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

  2. 在“添加新项 <路径>”对话框中：

    1. 在“Visual Studio 已安装的模板”之下单击“母版页”。

    2. 在“名称”框中，键入“Navigation.master”，然后单击“添加”。

  3. 切换到“设计”视图。

    母版页出现，其中含有默认的 ContentPlaceHolder 控件。

在下面的过程中，您将创建带有导航控件简单布局的母版页。在实际应用程序中，您可能使用更为复杂的格式设置，但是在母版页中使用导航控件的技术都是相似的。

将导航控件添加至母版页

  1. 选择“ContentPlaceHolder”控件，按向左键，然后按 Enter。

    这将在 ContentPlaceHolder 控件的前面插入一个空行。

  2. 从工具箱中的“数据”组中，将“SiteMapDataSource”控件拖至母版页上，并将其定位在“ContentPlaceHolder”控件上方。

    说明：

    不要将 SiteMapDataSource 控件放置在 ContentPlaceHolder 控件上。

    默认情况下，SiteMapDataSource 控件将使用您在“创建网站地图”（本演练的前面部分）中创建的“Web.sitemap”文件。

  3. 单击“SiteMapDataSource”控件，按向右键，然后按 Enter。

    这将在 SiteMapDataSource 控件下面插入一个空行。

  4. 在“表”菜单中，单击“插入表”，然后插入一个含有一行两列且宽度为 100% 的表。

  5. 从工具箱的“导航”组中，将“TreeView”控件拖动到表的左单元格中。

  6. 在“TreeView 任务”菜单上，在“选择数据源”框中单击“SiteMapDataSource1”。

  7. 从工具箱的“导航”组中，将“SiteMapPath”控件拖动到表的右单元格中。

  8. 在右单元格中，单击空白区域，然后按 Shift+Enter 创建一个新行。

  9. 将“ContentPlaceholder”控件拖至表的右单元格，并将其定位在“SiteMapPath”控件下面。

如果您使用母版页，则将网站中的页作为内容页创建。内容页使用 Content 控件定义在母版页的 ContentPlaceholder 控件中显示的文本和控件。因此，您将不得不将“主页”、“产品”和“硬件”页作为内容页重新创建。

创建网站的内容页

  1. 在解决方案资源管理器中，右击“Home.aspx”页，单击“删除”，然后单击“确定”。

  2. 对 Products.aspx、Software.aspx、Training.aspx 和 Hardware.aspx 页以及您创建的任何其他页重复步骤 1。

    您将把这些页作为使用母版页的内容页重新创建。

  3. 在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。

  4. 在“添加新项”对话框中：

    1. 在“Visual Studio 已安装的模板”下单击“Web 窗体”。

    2. 在“名称”框中键入“Home.aspx”。

    3. 选择“选择母版页”复选框。

    4. 单击“添加”。

    出现“选择母版页”对话框。

  5. 在“文件夹内容”下单击“Navigation.master”，然后单击“确定”。

    绑定到母版页（您已在前面部分创建）的内容页即已创建。

  6. 切换到“设计”视图。

    在“设计”视图中，您会看到为母版页创建的布局，其中带有对应于母版页上的 ContentPlaceHolder1 控件的可编辑区域。

  7. 单击 Content 窗口内部。

    这里是可为此特定页添加内容的地方。

  8. 键入“主页”，然后将文本格式设置为“标题 1”。

    这样，您就为“主页”创建了静态文本（具体而言就是标题）。

  9. 重复步骤 3 到 8 创建 Products.aspx 内容页和 Hardware.aspx 内容页。在步骤 8 中，分别键入“产品”和“硬件”，而不是“主页”。

测试母版页中的导航控件

测试母版页和内容页与测试单个页相同。

测试母版页中的导航控件

  1. 打开 Products.aspx 页，然后按 Ctrl+F5 运行该页。

    “产品”内容页与母版页合并。在浏览器中，您将看到一个页，其中包含“产品”标题以及您添加在母版页中的导航控件。

  2. 在 TreeView 控件中，单击“硬件”。

    “硬件”页显示，并且布局与“产品”页相同，不同之处是 SiteMapPath 控件显示另一个路径。

后续步骤

此演练演示了 ASP.NET 网站导航和导航控件的基本功能。您可能还想试验导航的其他功能。例如，您可能希望执行下列操作：

  • 设置 SiteMapPath 控件的格式以自定义其外观。该控件支持很多管理如何显示链接的选项。有关更多信息，请参见 SiteMapPath。

  • 自定义页在 TreeView 控件中的显示。例如，您可能在树视图节点中突出显示当前页。

  • 通过编程方式使用网站导航信息。当前页中有一个 SiteMapPath 控件，它可用来通过编程方式显示导航信息。

  • 为网站地图信息使用不同的数据存储区。您可能想使用现有网站地图或将网站地图信息存储在数据库中，而不是使用默认 XML 网站地图文件。ASP.NET 网站导航使用提供程序模型。您可以创建管理网站地图信息的组件，然后将应用程序配置为使用该组件而不是使用默认的网站地图提供程序。有关更多信息，请参见 ASP.NET 站点导航提供程序。

请参见

任务

演练：在 Visual Web Developer 中创建基本网页

演练：在 Visual Web Developer 中创建和使用 ASP.NET 母版页

概念

ASP.NET 站点导航概述

ASP.NET 站点地图

ASP.NET 母版页概述

保证 ASP.NET 站点导航的安全

保证数据访问的安全

其他资源

寄宿环境中的 ASP.NET 应用程序安全性

ASP.NET Web 应用程序的基本安全做法