gost

导航

ASP.NET--Menu控件

   http://www.meituan.com/r/i13110281

 

 

Menu控件提供静态和动态混合的菜单功能。在向页面添加这个控件的时候,开发人员可以选择将它设置为一个完全动态的菜单,以便整个站点的导航结构都可以显示在菜单中,类似于Windows的Start菜单。另一种选择是,可以采取一种更传统的方法,可使用固定菜单,或者使用混合这两种功能的方法。动态菜单使用由ASP.NET产生的客户端JavaScript代码(同样,不需要开发人员输入任何代码).

    为了向站点添加Menu控件,首先必须添加SiteMapDataSource控件,这个控件指定了菜单可以显示的链接以及这些链接出现的顺序。在下面的"试一试"中,将在一个基于WroxUnited应用程序的示例中添加这两个控件。

    (1)打开Site.Master文件并切换到Design View.将光标放在页面左边的nav div中。

    (2)在将一个SiteMapDataSource控件拖放到nav div.内的页面上(该控件位于工具箱的Data面板上),并在属性窗口中将该控件命名为siteData.

    所有的铺垫工作已经完成──接下来,将添加Menu控件本身。

    (3)将Menu控件拖放到紧靠SiteMapDataSource控件右边缘的地方。您将看到一个弹出的对话框,──这是Smart Tasks窗口。

    在这个对话框中,选择在第3步中创建的siteData数据源。在完成该设置之后,菜单将改变。

    (4)单击菜单右上角的小箭头关闭该菜单。现在,选中Menu控件并在属性窗口中将它的StaticDisplayLevels属性设置为2.您将会立即看到变化。

    (5)在该控件能以在完整版本的Wrox United站点中的方式工作之前,需要设置它的一些属性值。切换到Source View并在代码中添加如下属性:

 

 <asp:Menu ID="Menu1" runat="server" DataSourceID="siteData" StaticDisplayLevels="2"

                  orientation="Vertical"

                  StaticSubMenuIndent="0"

                  disappearafter="200"

                  AccessKey="m"                 

                  EnableViewState="false"

                    >

                <DynamicMenuStyle CssClass="dynamicMenu" />

                    <DynamicMenuItemStyle CssClass="dynamicMenuItem" />

               </asp:menu>

    (6)现在再次运行站点(按下Ctrl+F5)不带调试功能启动站点。

    注意可以将鼠标光标停留在About链接上,片刻之后一个包括History页面的子菜单将显示出来。这就是动态菜单的最佳形式──很不错吧!

操作回顾

    添加到Master页面的Menu控件将读取SiteMapDataSource控件(siteData)的内容并根据保存在该数据源中的数据显示一组链接。SiteMapDataSource控件本身不需要任何修改(除了重新命名以外) ──默认情况下,SiteMapDataSource将读取Web.SiteMap文件并扮演Menu控件的中间人,以使它能够根据Web.SiteMap文件的内容显示链接。

    如果需要,可以使用表3-3所示的属性定制SiteMapDataSource.

    将菜单绑定到SiteMapDataSource控件是从Web.SiteMap数据文件创建链接层次结构的一种简便方法,但使用这个控件还可以完成更多的事情,包括绑定到完全不同的数据源,将控件(除Menu控件以外)与数据相结合。如果必须经常处理以完全不同的格式(Web.SiteMap以外的格式)存储的站点地图数据,那么为了利用SiteMapDataSource控件,必须对SiteMapProvider类进行自定义。创建自定义的数据提供程序是一个相当复杂的过程(这己超出本章的讨论范围),要获得关于该过程的更多信息,可以参考由Bill Evjen编写、Wrox出版社出版的Professional ASP.NET 2.0.

    在这个示例中,对Menu控件的修改非常少,只是为它添加了一些属性值。下面的代码显示了添加的属性值:

 

 

 <asp:Menu ID="Menu1" runat="server" DataSourceID="siteData" StaticDisplayLevels="2"

                  orientation="Vertical"

                  StaticSubMenuIndent="0"

                  disappearafter="200"

                  AccessKey="m"                 

                  EnableViewState="false"

                    >

                <DynamicMenuStyle CssClass="dynamicMenu" />

                    <DynamicMenuItemStyle CssClass="dynamicMenuItem" />

               </asp:menu>



    Menu控件本身的其他属性都很简单。这个示例在Properties面板中设置了列表第一行的两个属性(DataSourceID和StaticDisplayLevels).其他属性控制如下内容:

    Orientation:用于在页面上设置一个水平菜单条。
    StaticSubMenuIndent:控制显示了子菜单条目的缩进深度,如果这些菜单层级被设置为以静态模式显示。
    DisappearAfter:指定弹出式菜单在消失前的可视时间长度。
    AccessKey:设置键盘快捷键以增强可用性。
    EanbleViewstate: ASP.NET的功能之一,如果将其设置为true,则页面在回送到服务器时会维护控件的状态。例如,在向服务器提交数据时,对文本框中的值保持不变。这个控件没有必要使用该属性,而且将其禁用将对页面的性能有微小的改善。

    除了这些属性以外还有两个属性,它们帮助定义所显示控件的可视风格。DynamicMenuStyle控制弹出式菜单本身的外观,而DynamicMenuItemStyle控制链接的外观。这些内容的风格由css控制。第5章将详细介绍。

    本章最后介绍的导航控件是TreeView控件。这个控件在用法上非常类似于Menu控件。

5. TreeView控件

    TreeView和Menu控件在使用上非常类似,但显示的结果却完全不同。使用TreeView控件,其实就类似于使用Windows Explorer处理保存在文件系统内的文件、展开或折叠带有子层次结构的节点。

    部署该控件非常类似于部署Menu控件;只需将该控件拖放到页面上并选择使用SiteMapDataSource控件提供数据。如果在Wrox United站点上使用该控件,那么页面将如图3-43所示。

    注意Home节点和Fixtures节点都是展开的,而About节点没有展开。如果重新放置这个控件,那么除了一些细小的样式差异之外,可以轻松地使用这个控件代替Menu控件进行导航。

 

posted on 2011-09-24 08:47  gost  阅读(1384)  评论(0编辑  收藏  举报