无论网站的复杂性如何,都需要包含一个导航菜单。可以使用 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、菜单的前两级显示出来,而第三级是动态的。