首页 > > 网页制作 > Javascript >

页面导航

2018-06-23 22:52:39来源：未知阅读 ()

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：NoSQL学习二：MongoDB基本管理命令

下一篇：ASP.NET-FineUI开发实践-16(一)

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签