asp.net 2.0教程 网站导航控件

尊重作者,请保留 www.it55.com 链接字样。 

站点导航控件可以让你的网站结构清晰、易操作性更强,本节主要涉及asp.net 2.0新特性:站点导航控件。
站点导航控件包括:SiteMapPath控件、TreeView控件、Menu控件等。这些控件都建立在数据源(网站地图)基础上的。网站地图是一种严格的xml文件。所以在讲述上述控件之前,我们必须先建立一个网站地图。

网站地图的建立
在当前项目上鼠标右键>>>添加新项>>>在“添加新项”配置框中选择“网站地图”,因为默认的Web.config名称可以被站点导航控件隐性调用,所以这里我们不改动文件名称。点击“添加”


将Web.sitemap的内容修改如下:

 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="http://www.itgao.com/" title="首页"  description="itgao.com首页">
    <siteMapNode url="http://www.itgao.com/web/" title="网站制作"  description="网站制作教程">
      <siteMapNode url="http://www.itgao.com/Dreamweaver/" title="Dreamweaver" description="Dreamweaver教程" />
      <siteMapNode url="http://www.itgao.com/Flash/" title="flash" description="flash教程" />
      <siteMapNode url="http://www.itgao.com/standard/" title="web标准" description="web标准" />
    </siteMapNode>
    <siteMapNode url="http://www.itgao.com/design/" title="图片处理"  description="图片处理教程" >
      <siteMapNode url="Default.aspx" title="Photoshop" description="Photoshop教程" />
      <siteMapNode url="http://www.itgao.com/CorelDRAW/" title="CorelDRAW" description="CorelDRAW教程" />
      <siteMapNode url="http://www.itgao.com/Illustrator/" title="Illustrator" description="Illustrator教程" />
    </siteMapNode>
    <siteMapNode url="http://www.itgao.com/program/" title="程序设计"  description="程序设计教程" />
    <siteMapNode url="http://www.itgao.com/site/" title="建站资讯"  description="建站资讯" />
    <siteMapNode url="http://www.itgao.com/server/" title="服务器"  description="服务器教程" />
    <siteMapNode url="http://www.itgao.com/DataBase/" title="数据库"  description="数据库教程" />
    <siteMapNode url="http://www.itgao.com/safe/" title="安全防护"  description="安全防护教程" />
    <siteMapNode url="http://www.itgao.com/office/" title="办公软件"  description="办公软件教程" />
  </siteMapNode>
</siteMap>

 

“SiteMapPath”控件应用:
“SiteMapPath”控件可以很方便的在你的页面上建立一个“当前位置”的导航条。
创建方法:新建web窗体,并且换至设计界面。在工具箱中找到“SiteMapPath”控件,并拖至web窗体中。

在vs 2005的设计界面里,我们可以通过“自动套用格式”来快速设置SiteMapPath的样式:

 

我们还可以通过“编辑模版”来给SiteMapPath某个节点或分隔符设置自定义模版:

本例为了学习内容的简化明了,对此不做设置和讲解。以下是SiteMapPath控件的大部分属性及注释:

#p#分页标题#e#

SiteMapPath默认调用站点根目录下的Web.sitemap作为数据源,但需要注意的是:在Web.sitemap中的所有节点的url属性中有且只能有一个SiteMapPath控件调用页路径(本例为Default.aspx),否则运行后会无法看到SiteMapPath控件。

最终Default.aspx内容:

 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapPath ID="SiteMapPath1" runat="server" meta:resourcekey="SiteMapPath1Resource1" SkipLinkText="">
        </asp:SiteMapPath>   
    </div>
    </form>
</body>
</html>

 

运行效果:


“TreeView”控件应用:
“TreeView”控件可以在你的页面上呈现网站栏目树形结构,可以绑定多种数据源控件,本例仍然使用Web.sitemap作为数据源。因为要使用网站地图作为数据源需要集成SiteMapDataSource控件以实现数据的转换,所以本例在实现过程中需要调用SiteMapDataSource控件。
创建方法:在当前项目中创建web窗体Default2.aspx并且换至设计界面;将左侧工具栏中“数据”选项栏中的“SiteMapDataSource”控件拖放至页面中,命名为“SiteMapDataSource1”,此时“SiteMapDataSource”控件默认会自动绑定网站根目录下的Web.sitemap网站地图文件。

将左侧工具栏中“导航”选项栏中的“TreeView”控件拖放至页面中,并选择SiteMapDataSource1作为其数据源。

 

此时TreeView已经制作完成。另外,我们可以通过“自动套用格式”来很方便的设置TreeView控件的格式:

 

还可以通过“编辑节点”来以可视化方式添加TreeView的节点项:

你也可以通过“自定义行图标”来为你的节点添加个性化图标:

最后,如果你选取了“显示行”的复选框,TreeView将以树形线的方式来展示节点结构:

考虑到教程的简洁化,本例不做以上设置。
最后Default2.aspx的内容如下:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True">
        </asp:TreeView>
   
    </div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
    </form>
</body>
</html>

 

运行结果:

“Menu”控件应用:
顾名思义,“Menu”控件的作用就是根据数据源生成网站菜单,可以绑定多种数据源控件,本例仍然使用Web.sitemap作为数据源。“Menu”控件的创建方法和“TreeView”控件大同小异:#p#分页标题#e#
首先创建“SiteMapDataSource”数据源;然后在“导航”中的“Menu”控件拖拉至页面中,并选择数据源为SiteMapDataSource1:

因为在网站地图文件Web.sitemap中,只有“首页”是根节点,所以默认我们的Menu控件只显示“首页”菜单,这和我们的要求是有差别的。我们需要显示所有二级节点的菜单,所以我们必须对SiteMapDataSource1做如下设置:
鼠标点选“SiteMapDataSource1”数据源控件,在右侧属性中更改ShowStartingNode属性值为false:

菜单默认是竖直显示的,为了使菜单能够水平显示,我们需要鼠标点选Menu控件后,将其Orientation属性值改为“Horizontal”:

Web窗体Default3.aspx最终代码:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
        <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal">
        </asp:Menu>
    </div>
    </form>
</body>
</html>

 

最终显示效果:

本节主要讲述了站点导航控件(SiteMapPath、TreeView、Menu)的用法,只要多多实践,大家就可以掌握个中蹊跷。
下一节,我们将一起学习:Asp.Net 2.0新特性 其它服务器控件 BulletedList控件、HiddenField控件、FileUpload控件、ImageMap控件、MultiView和View控件、Wizard控件

你可能感兴趣的:(asp.net)