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

本演练通过使用代码协调同一页上的两个菜单，演示如何以编程方式使用 ASP.NET Menu 控件。

可以使用 ASP.NET Menu 控件为网站创建导航菜单。在本演练中，将考察 ASP.NET Menu 控件的编程方面，并创建两个协同工作的菜单，它们都绑定到同一个 Web.sitemap 文件。第一个菜单是静态显示的类别（如产品、服务和支持）菜单。它横跨页的顶部水平显示。第二个菜单水平显示在第一个菜单下面。第二个菜单的内容由第一个菜单中选择的菜单项确定。根据第一个菜单的当前选择，以编程方式调整第二个菜单的网站地图数据源，以便仅显示 Web.sitemap 文件中与选定类别相关的部分。

 

一、创建网站

如果已经在 Visual Web Developer 中创建了一个网站（，则可以使用该网站并转到本演练后面部分的“创建网站地图文件”。否则，按照下面的步骤创建一个新的网站和网页。

 

创建文件系统网站

1、打开 Visual Web Developer。

2、在“文件”菜单上单击“新建网站”。出现“新建网站”对话框。

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

      4、在“位置”框中输入要保存网站页面的文件夹的名称。例如，键入文件夹名“C:/WebSites”。

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

6、单击“确定”。

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

 

二、创建网站地图文件

两个菜单都从网站的 Web.sitemap 文件派生其内容。两个菜单都使用您创建的 SiteMapDataSource 对象确保每个菜单分别显示网站地图的相应部分。

 

创建 Web.sitemap 文件

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

2、在“添加新项”对话框中，选择“网站地图”，然后单击“添加”。

3、将下面的 XML 代码添加到新文件。该 XML 表示菜单选择的层次结构。<siteMapNode> 元素是嵌套的。每个节点都是包含子项的菜单项，某些子项还有自己的子项。Home 节点下面有三个二级节点：Hardware、Software 和 Support。这些二级节点下面是各个子类别。

<?xml version="1.0" encoding="utf-8" ?>

<siteMap>

  <siteMapNode title="Home">

    <siteMapNode title="Products">

      <siteMapNode title="Hardware" url="Default.aspx?node=hardware">

        <siteMapNode title="Mouse"/>

        <siteMapNode title="Keyboard"/>

        <siteMapNode title="NetCard"/>

        <siteMapNode title="Monitor"/>

        <siteMapNode title="PC"/>

      </siteMapNode>

      <siteMapNode title="Software" url="Default.aspx?node=software">

        <siteMapNode title="Spreadsheet"/>

        <siteMapNode title="Word Processor"/>

        <siteMapNode title="Presentation"/>

        <siteMapNode title="Mail"/>

        <siteMapNode title="Games"/>

      </siteMapNode>

      <siteMapNode title="Books" url="Default.aspx?node=books">

        <siteMapNode title="Programming"/>

        <siteMapNode title="Debugging"/>

        <siteMapNode title="Testing"/>

        <siteMapNode title="Web Apps"/>

        <siteMapNode title="WinForm Apps"/>

      </siteMapNode>

    </siteMapNode>

    <siteMapNode title="Services">

      <siteMapNode title="Consulting" url="Default.aspx?node=consulting">

        <siteMapNode title="Processes"/>

        <siteMapNode title="Management"/>

        <siteMapNode title="Recruiting"/>

      </siteMapNode>

      <siteMapNode title="Development" url="Default.aspx?node=development">

        <siteMapNode title="Web Apps"/>

        <siteMapNode title="Enterprise Apps"/>

        <siteMapNode title="Database"/>

      </siteMapNode>

    </siteMapNode>

    <siteMapNode title="Support">

      <siteMapNode title="Drivers" url="Default.aspx?node=drivers">

        <siteMapNode title="Audio"/>

        <siteMapNode title="Network"/>

        <siteMapNode title="Printer"/>

        <siteMapNode title="Modem"/>

      </siteMapNode>

      <siteMapNode title="Manuals" url="Default.aspx?node=manuals">

        <siteMapNode title="Applications"/>

        <siteMapNode title="Troubleshooting"/>

        <siteMapNode title="Installation"/>

        <siteMapNode title="Internet"/>

      </siteMapNode>

      <siteMapNode title="Updates" url="Default.aspx?node=updates">

        <siteMapNode title="Release 1"/>

        <siteMapNode title="Game Package"/>

      </siteMapNode>

    </siteMapNode>

  </siteMapNode>

</siteMap>

      4、保存该文件。

 

三、创建第一个菜单

第一个菜单显示一个单级别静态菜单项。它水平显示在页的顶部。

 

创建第一个菜单

1、在“解决方案资源管理器”中，双击 Default.aspx 页将其打开。

2、切换到“设计”视图。

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

      4、在“属性”窗口中将“方向”属性设置为“水平”。

5、将“MaximumDynamicDisplayLevels”设置为 0。这样可确保菜单的任何部分都不会以动态飞出方式出现。

6、确保将“StaticDisplayLevels”设置为 1。这样只允许在菜单中显示一个级别。

      7、单击“Menu”控件上的智能标记。出现“菜单任务”对话框。

      8、从“选择数据源”下拉列表中选择“新建数据源”。

      9、在“数据源配置向导”中，选择“网站地图”。

10、接受默认名称“SiteMapDataSource1”然后单击“确定”。

 

四、配置第一个数据源

由于第一个菜单仅显示单级别静态菜单项，需要配置其数据源才能显示 Web.sitemap 文件的相应部分。在本例中，需要配置的是二级元素：Products、Services 和 Support。

Menu 控件到 SiteMapDataSource 控件的默认绑定使每个菜单项都成为一个导航链接。由于想要以编程方式控制另一个菜单的行为，因此使用自定义绑定，使这些菜单项不作为导航链接，而是引发回发以便能够更新第二个菜单。

 

配置第一个数据源

1、在“设计”视图中查看 Default.aspx 页，然后单击“Menu”控件上的智能标记。出现“菜单任务”对话框。

      2、单击“编辑 MenuItem DataBinding”。

3、在“菜单 DataBindings 编辑器”中的“可用数据绑定”下拉列表中，选择“SiteMapNode”然后单击“添加”。

4、在“数据绑定属性”下拉列表中，选择“TextField”，然后从下拉菜单中选择“标题”。单击“确定”。

5、选择“SiteMapDataSource”控件。

6、在“属性”中，将“ShowStartingNode”设置为“False”。

 

五、创建第二个菜单

第二个菜单是动态的，其数据源仅使用网站地图文件中由第一个菜单中选择的菜单项所确定的部分。和前面一样，希望该菜单静态显示其第一级别；但是，现在希望动态显示 Web.sitemap 文件的其余部分。

 

创建第二个菜单

1、在“设计”视图中查看 Default.aspx 页，然后将另一个“Menu”控件拖到该页上第一个“Menu”控件的下面。

2、在“属性”中，将“方向”设置为“水平”。

3、单击第二个“Menu”控件上的智能标记。出现“菜单任务”对话框。

4、从“选择数据源”下拉列表中选择“新建数据源”。

5、在“数据源配置向导”中，选择“网站地图”。

6、接受默认名称“SiteMapDataSource2”然后单击“确定”。

 

六、配置第二个数据源

在本节中，将配置数据源以便仅选择 Web.sitemap 文件的特定节。为此，首先从第一个菜单的默认第一个类别开始，该类别是 Web.sitemap 文件中的 Products 节。然后使用“StartingNodeURL”属性来指示该文件中的某个特定 URL 属性。

 

配置第二个数据源的起点

1、选择“SiteMapDataSource2”并将其“StartingNodeURL”属性设置为“Default.aspx?node=hardware”。

2、将“StartingNodeOffset”设置为 -1。

3、将“ShowStartingNode”设置为“False”。

 

七、添加代码以协调菜单

若要根据第一个菜单的状态控制第二个菜单，请捕捉第一个菜单的 MenuItemClick 事件，并在代码中指示网站地图文件的第二个菜单的视图。

 

在代码中协调菜单

1、在“设计”视图中查看 Default.aspx 页，然后选择“Menu1”。

2、在“属性”中，将“MenuItemClick”事件设置为 Menu1_MenuItemClick。将在 Default.aspx 页的代码隐藏文件中为您创建一个名为 Menu1_MenuItemClick 的方法，或者如果使用的是单文件页模型，则在 .aspx 页的 <script> 标记中创建该方法。

3、将下面突出显示的代码添加到该方法中。

protected void Menu1_MenuItemClick(Object sender,   

      System.Web.UI.WebControls.MenuEventArgs e)

{

  switch(e.Item.Value)

  {

    case "Products":

      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=hardware";

      return;

    case "Services":

      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=consulting";

      return;

    case "Support":

      SiteMapDataSource2.StartingNodeUrl = "Default.aspx?node=drivers";

      return;

  }

}

      上面的代码捕捉“Menu1”的单击事件。使用该值确定第二个 Menu 控件的显示内容，而不是导航到任何位置。这可通过调整第二个 Menu 控件的 SiteMapDataSource 控件的 StartingNodeUrl 属性实现。

4、保存该文件。

 

八、测试菜单

若要测试这两个菜单之间的交互，请单击第一个菜单上的项，观察第二个菜单如何相应改变。第二个菜单是动态的，它显示 Web.sitemap 文件的第三级别。

 

测试菜单

1、按 Ctrl+F5 运行该页。出现第一个菜单，同时第二个菜单显示 Web.sitemap 文件中“Products”下面的菜单项。

      2、单击第一个菜单中的“Services”。第二个菜单现在显示“Consulting”和“Development”动态菜单。

3、单击“Support”。第二个菜单显示“Drivers”、“Manuals”和“Updates”动态菜单项。