通过

演练：在网页上显示菜单

  • 项目

更新：2007 年 11 月

本演练阐释如何在网页上放置和配置 ASP.NET Menu 控件。

无论网站的复杂性如何，都需要包含一个导航菜单。可以使用 ASP.NET 中的 Menu 控件方便地设置复杂的导航菜单，而无需编写任何代码。

Menu 控件支持多种显示模式，包括静态显示模式（完全显示菜单）和动态显示模式（当鼠标指针滑过父菜单项时显示部分菜单）。该控件还提供静态和动态显示模式的组合，借此可将一系列根菜单项设置为静态的，而将子菜单项动态显示。

可以在设计器中为 ASP.NET Menu 控件配置一些指向网页的静态链接，也可以自动将该控件绑定到一个分层数据源（如 XmlDataSource 或 SiteMapDataSource 控件）。

本演练中阐释的任务包括：

  • 创建一个基本菜单，并以静态方式配置该菜单以链接到网页。

  • 创建一个绑定到 Web.sitemap XML 文件的较为复杂的菜单。

  • 调整菜单的方向。

  • 配置多级静态显示与动态显示。

先决条件

若要完成本演练，您需要：

  • Microsoft Visual Web Developer (Visual Studio)。

  • .NET Framework。

创建网站

如果已在 Visual Web Developer 中创建了一个网站（例如，通过完成演练：在 Visual Web Developer 中创建基本网页中的步骤来创建），则可以使用该网站并转到下一节“创建基本菜单”。否则，按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在“文件”菜单上单击“新建网站”。

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

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

  4. 在“位置”框中输入要保存网站页面的文件夹的名称。

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

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

  6. 单击“确定”。

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

创建基本菜单

为页创建菜单的第一步是放置 Menu 控件。

将 Menu 控件添加到页

  1. 切换到 Default.aspx 或打开 Default.aspx，然后切换到“设计”视图。

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

本示例将菜单设为水平方向而不是垂直方向。

水平放置 Menu 控件

  • 右击“Menu”控件，单击“属性”，然后将“方向”设置为“水平”。

配置基本菜单

在本节中，将使用菜单项编辑器来定义菜单项。

编辑 Menu 控件的项

  1. 右击“Menu”控件，然后单击“编辑菜单项”。

    出现“菜单项编辑器”。

  2. 在“项”下，单击“添加根项”图标。

  3. 在新项的“属性”下，将“文本”设置为“主页”，并将“NavigateURL”设置为“Default.aspx”。

  4. 在“项”下，单击“添加根项”图标。

  5. 在“属性”下，将“文本”设置为“产品”，并将“NavigateURL”设置为“Products.aspx”。

  6. 在“项”下，单击“添加根项”图标。

  7. 在“属性”下，将“文本”设置为“服务”，并将“NavigateURL”设置为“Services.aspx”。

  8. 单击“确定”。

如果查看 Default.aspx 的源代码，您会看到在控件中对菜单项和链接进行了声明。

创建目标页

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

  2. 单击“Web 窗体”，将文件命名为“Products.aspx”，然后单击“添加”。

  3. 重复前面的步骤，并创建一个名为“Services.aspx”的文件。

测试菜单

在页和菜单就绪时，可以测试菜单的工作情况。

测试 Menu 控件

  1. 在解决方案资源管理器中单击 Default.aspx，然后按 Ctrl+F5 运行 Default.aspx 页。

  2. 将指针移动到项上；页底部的浏览器状态栏（如果可见）会显示链接到了哪个页。

  3. 单击一个链接以跳转到相应的页。

创建绑定到站点地图的菜单

上一节创建了一个在页中以声明方式配置的简单的静态菜单。在本节中，将直接跳过编辑 Menu 控件项的步骤，而将该控件作为 XML 数据源绑定到 Web.sitemap 文件。这样便可以在单独的 XML 文件中维护 Menu 控件的结构，该结构可以在不修改页和使用设计器的情况下方便地进行更新。

此示例将使用另一个 Menu 控件。

创建另一个 Menu 控件

  • 从“工具箱”中的“导航”组中，再将一个“Menu”控件拖动到 Default.aspx 页上。

接下来，需要一个要绑定到的 Web.sitemap 文件。

创建站点地图文件

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

  2. 在“添加新项 <Websitename>”对话框中单击“站点地图”。

  3. 单击“添加”。

  4. 将下面的 XML 代码放置在 Web.sitemap 文件中。

    这段 XML 代码表示菜单的结构。嵌套节点成为父节点菜单项的子菜单项。

    <siteMap>
  <siteMapNode title="Home" description="Home" url="default.aspx" >
    <siteMapNode title="Products" description="Our products" 
     url="Products.aspx">
      <siteMapNode title="Hardware" 
       description="Hardware choices"
       url="Hardware.aspx" />
      <siteMapNode title="Software" 
       description="Software choices" 
       url="Software.aspx" />
    </siteMapNode>
    <siteMapNode title="Services" 
     description="Services we offer" 
     url="Services.aspx">
      <siteMapNode title="Training" 
       description="Training classes" 
       url="Training.aspx" />
      <siteMapNode title="Consulting" 
       description="Consulting services" 
       url="Consulting.aspx" />
      <siteMapNode title="Support" 
       description="Support plans" 
       url="Support.aspx" />
    </siteMapNode>
  </siteMapNode>
</siteMap>

  5. 保存该文件。

绑定到站点地图

现在即可创建指向 Web.sitemap 文件的导航数据源，并将 Menu 控件绑定到该数据源。

将 Menu 控件绑定到站点地图

  1. 打开 Default.aspx 文件，然后切换到“设计”视图。

  2. 单击智能标记以显示“菜单任务”对话框。

  3. 在“菜单任务”对话框中，在“选择数据源”下拉列表中单击“新建数据源”。

    出现“数据源配置向导”对话框。

  4. 单击“站点地图”。

    在“为数据源指定 ID”下出现默认名称“SiteMapDataSource1”。

  5. 单击“确定”。

测试站点地图绑定

在页和菜单就绪时，可以测试菜单的工作情况。

测试站点地图绑定

  1. 按 Ctrl+F5 运行 Default.aspx 页。

  2. 将指针移动到第二个菜单（垂直放置的菜单）的“主页”菜单项上。

    出现“产品”和“服务”。

  3. 将指针移动到“产品”上。

    出现“硬件”和“软件”。

    如果查看 Default.aspx 的源代码，会注意到与第一个菜单项不同的是，这些项不是以声明方式指定的；数据源是由 Menu 控件引用的。

调整静态和动态级别

在上一节中创建的垂直菜单使用完全动态的显示模式，只有顶级菜单项仍为静态。对于 Menu 控件，您能够基于鼠标指针暂停操作指定行为，并可指定菜单应为动态还是静态的。在本节中，您将调整 Menu 控件的动态和静态质量。

将 Menu 控件的两个级别设为静态

  1. 在“设计”视图中，在 Default.aspx 页上右击第二个“Menu”控件，然后单击“属性”。

  2. 将“StaticDisplayLevels”设置为 2。

测试动态菜单

在页和菜单就绪时，可以测试菜单的工作情况。

测试动态菜单

  • 按 Ctrl+F5 运行 Default.aspx 页。

    菜单的前两级显示出来，而第三级是动态的。

后续步骤

使用 Menu 控件可以轻松地创建导航菜单。可以配置该控件以进行动态或静态显示，并可将其绑定到站点地图 XML 文件。您可能还希望体验以下附加的功能：

请参见

任务

演练：以编程方式控制 ASP.NET 菜单

概念

菜单控件概述