5.18 导航控件

  在网站制作中,常常需要制作导航来让用户能够更加方便快捷的查阅到相关的信息和资讯,或能跳转到相关的版块。在Web应用中,导航是非常重要的。ASP.NET提供了站点导航的一种简单的方法,即使用站点图形站点导航控件SiteMapPath、TreeView、Menu等控件。

  导航控件包括SiteMapPath、TreeView、Menu三个控件,这三个控件都可以在页面中轻松建立导航。这三个导航控件的基本特征如下所示:
?1)SiteMapPath:检索用户当前页面并显示层次结构的控件。这使用户可以导航回到层次结构中的其他页。SiteMap控件专门与SiteMapProvider一起使用。
?2)TreeView:提供纵向用户界面以展开和折叠网页上的选定节点,以及为选定像提供复选框功能。并且TreeView控件支持数据绑定。
?3)Menu:提供在用户将鼠标指针悬停在某一项时弹出附加子菜单的水平或垂直用户界面。
  这三个导航控件都能够快速的建立导航,并且能够调整相应的属性为导航控件进行自定义。

  SiteMapPath控件使用户能够从当前导航回站点层次结构中较高的页,但是该控件并不允许用户从当前页面向前导航到层次结构中较深的其他页面。相比之下,使用TreeView或Menu控件,用户可以打开节点并直接选择需要跳转的特定页。这些控件不会像SiteMapPath控件一样直接读取站点地图。TreeView和Menu控件不仅可以自定义选项,也可以绑定一个SiteMapDataSource。TreeView和Menu控件的基本样式如图5-60和图5-61所示。
Menu导航控件
图5-60 Menu导航控件
TreeView导航控件
图5-61 TreeView导航控件

  TreeView和Menu控件生成的代码并不相同,因为TreeView和Menu控件所实现的功能也不尽相同。TreeView和Menu控件的代码分别如下所示。
+展开
-HTML
        <asp:Menu ID="Menu1" runat="server">
            <Items>
                <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem>
                <asp:MenuItem Text="新建项" Value="新建项">
                    <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="新建项" Value="新建项">
                    <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="新建项" Value="新建项">
                    <asp:MenuItem Text="新建项" Value="新建项">
                        <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem>
                    </asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="新建项" Value="新建项"></asp:MenuItem>
            </Items>
        </asp:Menu>

  上述代码声明了一个Menu控件,并添加了若干节点。
+展开
-HTML
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点">
                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点">
                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点">
                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
            </Nodes>
        </asp:TreeView>

  上述代码声明了一个TreeView控件,并添加了若干节点。
  从上面的代码和运行后的实例图可以看出,TreeView和Menu控件有一些区别,这些具体区别如下所示:
?1)Menu展开时,是弹出形式的展开,而TreeView控件则是就地展开。
?2)Menu控件并不是按需下载,而TreeView控件则是按需下载的。
?3)Menu控件不包含复选框,而TreeView控件包含复选框。
?4)Menu控件允许编辑模板,而TreeView控件不允许模板编辑。
?5)Menu在布局上是水平和垂直,而TreeView只是垂直布局。
?6)Menu可以选择样式,而TreeView不行。
  开发人员在网站开发的时候,可以通过使用导航控件来快速的建立导航,为浏览者提供方便,也为网站做出信息指导。在用户的使用中,通常情况下导航控件中的导航值是不能被用户所更改的,但是开发人员可以通过编程的方式让用户也能够修改站点地图的节点。

加支付宝好友偷能量挖...


评论(0)网络
阅读(135)喜欢(0)Asp.Net/C#/WCF