zoukankan      html  css  js  c++  java
  • 页面导航

    ASP.NET提供了以下三种导航控件:

      1.TreeView控件。

      2.Menu控件。

      3.SiteMapPath控件。

    利用这三种导航控件与SiteMapDataSource控件相结合可以轻松实现优秀的页面导航功能。

    TreeView控件 

    TreeView控件的功能

    TreeView控件以树型结构来对网站进行导航,支持的功能如下:

      1.数据绑定。允许控件的节点绑定到XML、表格或关系数据。

      2.站点导航。通过与SiteMapDataSource控件集成实现。

      3.节点文本既可以显示为纯文本也可以显示为超链接。

      4.借助编程方式访问TreeView对象模型以动态地创建树、填充节点、设置属性等。

      5.客户端节点填充。

      6.在每个节点旁显示复选框的功能。

      7.通过主题、用户定义的图象和样式可实现自定义外观。

    TreeView控件的组成

    TreeView控件由节点组成,树中的每一项都称为一个节点,它由一个TreeNode对象表示。节点有如下四种类型:

      1.父节点。包含其他节点。

      2.子节点。被其他节点包含。

      3.叶节点。不包含子节点。

      4.根节点。不被其他节点包含,同时是所有其他节点的上级节点。

      一个节点可以同时为父节点和子节点,但不能同时为根节点、父节点和叶节点。 

    TreeView控件的使用

    新建站点地图文件Web.sitemap,代码如下:

     1 <?xml version="1.0" encoding="utf-8" ?>
     2 <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
     3     <siteMapNode url="~/Default.aspx" title="主页"  description="网站主页">
     4       <siteMapNode title="图书" description="图书内容">
     5         <siteMapNode title="C#" description="C#图书">
     6           <siteMapNode url="~/WebForm1.aspx" title="轻松学C#" description="轻松学C#"/>
     7           <siteMapNode url="~/WebForm2.aspx" title="深入浅出C#" description="深入浅出C#"/>
     8         </siteMapNode>
     9         <siteMapNode title="C语言" description="C语言图书">
    10           <siteMapNode url="~/WebForm3.aspx" title="C语言程序设计" description="C语言程序设计"/>
    11           <siteMapNode url="~/WebForm4.aspx" title="C语言课程设计" description="C语言程序设计"/>
    12         </siteMapNode>
    13         <siteMapNode title="C++" description="C++图书" >
    14           <siteMapNode url="~/WebForm5.aspx" title="C++语言程序设计" description="C++语言程序设计"/>
    15           <siteMapNode url="~/WebForm6.aspx" title="C++语言课程设计" description="C++语言课程设计"/>
    16         </siteMapNode>
    17       </siteMapNode>
    18     </siteMapNode>
    19 </siteMap>
    View Code

    Default.aspx中添加如下代码:

    1 <div>
    2         <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    3         <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ImageSet="Contacts">
    4             <ParentNodeStyle BackColor="Wheat" BorderColor="Violet" />
    5             <HoverNodeStyle ForeColor="Yellow" />
    6             <NodeStyle Font-Size="10px" ForeColor="Blue" />
    7         </asp:TreeView>
    8 </div>
    View Code

    Menu控件

    Menu控件的功能

    Menu控件以菜单的结构形式来对网站进行导航,可以采用水平方向或竖直方向的形式导航,它支持以下功能:

      1.通过与SiteMapDataSource控件集成提供对站点导航的支持。

      2.可以显示为可选择文本或超链接的节点文本。

      3.通过编程访问Menu对象模型,使程序员可以动态地创建菜单,填充菜单项以及设置属性等。

      4.能够采用水平方向或竖直方向的形式导航。

      5.支持静态或动态的显示模式。

    用户单击菜单项时,Menu控件可以导航到所链接的网页或直接回发到服务器。如果设置了菜单项的NavigateUrl属性,则 Menu 控件导航到所链接的页;否则,该控件将页回发到服务器进行处理。

    默认情况下,链接页与Menu控件显示在同一窗口或框架中。若要在另一个窗口或框架中显示链接内容,需使用Menu控件的Target属性。

    Menu控件的组成

    Menu控件由菜单项(由MenuItem对象表示)树组成。顶级(级别0)菜单项称为根菜单项。具有父菜单项的菜单项称为子菜单项。所有根菜单项都存储在Items集合中。子菜单项存储在父菜单项的ChildItems集合中。 每个菜单项都具有Text属性和Value属性。Text属性的值显示在Menu控件中,而Value 属性则用于存储菜单项的任何其他数据(如传递给与菜单项关联的回发事件的数据)。在单击时,菜单项可导航到NavigateUrl属性指示的另一个网页。

    Menu控件的使用

    新建站点地图文件Web.sitemap,代码如下:

     1 <?xml version="1.0" encoding="utf-8" ?>
     2 <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
     3     <siteMapNode url="~/Default.aspx" title="主页"  description="网站主页">
     4       <siteMapNode title="图书" description="图书内容">
     5         <siteMapNode title="C#" description="C#图书">
     6           <siteMapNode url="~/WebForm1.aspx" title="轻松学C#" description="轻松学C#"/>
     7           <siteMapNode url="~/WebForm2.aspx" title="深入浅出C#" description="深入浅出C#"/>
     8         </siteMapNode>
     9         <siteMapNode title="C语言" description="C语言图书">
    10           <siteMapNode url="~/WebForm3.aspx" title="C语言程序设计" description="C语言程序设计"/>
    11           <siteMapNode url="~/WebForm4.aspx" title="C语言课程设计" description="C语言程序设计"/>
    12         </siteMapNode>
    13         <siteMapNode title="C++" description="C++图书" >
    14           <siteMapNode url="~/WebForm5.aspx" title="C++语言程序设计" description="C++语言程序设计"/>
    15           <siteMapNode url="~/WebForm6.aspx" title="C++语言课程设计" description="C++语言课程设计"/>
    16         </siteMapNode>
    17       </siteMapNode>
    18     </siteMapNode>
    19 </siteMap>
    View Code

    Default.aspx中添加如下代码:

     1     <div>
     2         <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
     3         <asp:Menu ID="Menu1" runat="server" BackColor="Wheat" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="4"
     4              Font-Size="X-Small" ForeColor="BlueViolet" StaticSubMenuIndent="6px">
     5             <StaticSelectedStyle BackColor="Window" />
     6             <StaticMenuStyle HorizontalPadding="3px" VerticalPadding="3px" ForeColor="Red" />
     7         </asp:Menu>
     8     </div>
     9     <div>
    10         <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" />
    11         <asp:Menu ID="Menu2" runat="server" BackColor="Wheat" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="4"
    12              Font-Size="X-Small" ForeColor="BlueViolet" StaticSubMenuIndent="6px" Orientation="Horizontal">
    13             <StaticSelectedStyle BackColor="Window" />
    14             <StaticMenuStyle HorizontalPadding="3px" VerticalPadding="3px" ForeColor="Red" />
    15         </asp:Menu>
    16     </div>
    View Code

    SiteMapPath控件

    SiteMapPath控件显示一个导航路径,此路径为用户显示当前页的位置,并显示返回到主页的路径链接。

    SiteMapPath控件包含来自站点地图的导航数据,此数据包括有关网站中页的信息,如URL、标题、说明和导航层次结构中的位置。

    SiteMapPath由节点组成。路径中的每个元素均称为节点,用SiteMapNodeItem对象表示。

    SiteMapPath包含如下几种节点类型:

      1.根节点,锚定节点分层组的节点。

      2.父节点,有一个或多个节点但不是当前节点的节点。

      3.当前节点,表示当前显示页的节点。

    SiteMapPath控件的使用

    新建站点地图文件Web.sitemap,代码如下:

     1 <?xml version="1.0" encoding="utf-8" ?>
     2 <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
     3     <siteMapNode url="~/Default.aspx" title="主页"  description="网站主页">
     4       <siteMapNode title="图书" description="图书内容">
     5         <siteMapNode title="C#" description="C#图书">
     6           <siteMapNode url="~/WebForm1.aspx" title="轻松学C#" description="轻松学C#"/>
     7           <siteMapNode url="~/WebForm2.aspx" title="深入浅出C#" description="深入浅出C#"/>
     8         </siteMapNode>
     9         <siteMapNode title="C语言" description="C语言图书">
    10           <siteMapNode url="~/WebForm3.aspx" title="C语言程序设计" description="C语言程序设计"/>
    11           <siteMapNode url="~/WebForm4.aspx" title="C语言课程设计" description="C语言程序设计"/>
    12         </siteMapNode>
    13         <siteMapNode title="C++" description="C++图书" >
    14           <siteMapNode url="~/WebForm5.aspx" title="C++语言程序设计" description="C++语言程序设计"/>
    15           <siteMapNode url="~/WebForm6.aspx" title="C++语言课程设计" description="C++语言课程设计"/>
    16         </siteMapNode>
    17       </siteMapNode>
    18     </siteMapNode>
    19 </siteMap>
    View Code

    站点文件创建完成后只需在页面中添加下面一行代码就可实现导航路径的显示。

    1 <asp:SiteMapPath ID="SiteMapPath1" runat="server" />
    View Code


     

  • 相关阅读:
    通过点击切换文本框内容的脚本示例
    使用脚本改变树控件的行为
    javascript动态创建radio button元素支持IE/Firefox
    轻量级的向导控件MultiView
    客户端脚本简单实现Repeater的无刷新分页
    在非web site项目中引用Membership
    逐步认识C#四种判断相等的方法
    C#获取csv文件内容对逗号和引号分隔的处理
    JavaScript之 值类型 和 引用类型 Better
    JS call apply bind 方法的区别 Better
  • 原文地址:https://www.cnblogs.com/spilledlight/p/4862622.html
Copyright © 2011-2022 走看看