ASP.NET - 演练：在网页上显示菜单

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

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

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

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

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

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

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

·调整菜单的方向。

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

 

一、创建网站

如果已在 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”控件，单击“属性”，然后将“方向”设置为“水平”。

 

三、配置基本菜单

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

 

3.1、编辑 Menu 控件的项

1、右击“Menu”控件，然后单击“编辑菜单项”。出现“菜单项编辑器”。

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

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

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

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

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

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

8、单击“确定”。

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

 

3.2、创建目标页

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 控件。

5.1、创建另一个 Menu 控件

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

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

 

5.2、创建站点地图文件

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。

 

九、测试动态菜单

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

 

测试动态菜单

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

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