演练:在网页上显示菜单

更新:2007 年 11 月

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

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

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

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

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

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

  • 创建一个绑定到 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 菜单

概念

菜单控件概述