网站导航?
传统的网站导航需要我们在是在页面上弄超链接的方式来实现的,在页面修改或移动的的时候需要一一在每个页中都要进行修改,这样会很麻烦。
在网站中建立网站地图,也就是把所有的链接地址放在一个专门的文件中进行统一管理,这样就很方面的进行管理。
怎么弄网站导航?怎么做?
需要在VS中新建网站地图文件,再把网站地图文件与我们想要的导航控件相关联,这样就可以实现导航的效果了,我们要更改某个地址,就直接在站点地图.siteMap文件中更改就行了。
vs中如何添加网站地图?
在vs中新建项中选择"站点地图"新建站点地图。
要使用站点地图,我们需要把站点地图文件添加到网站根文件夹下。
在新建一个站点地图文件的时候,默认的代码如下所示:
1
2
3
4
5
6
7
|
<? xml version = "1.0" encoding = "utf-8" ?>
< siteMapxmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
< siteMapNodeurl = "" title = "" description = "" >
< siteMapNodeurl = "" title = "" description = "" />
< siteMapNodeurl = "" title = "" description = "" />
</ siteMapNode >
</ siteMap >
|
我们可以从代码中看出文件的根元素siteMap包含了<siteMapNode>元素,这些<siteMapNode>元素形成树形结构,第一层为网站的主页。
<siteMapNode>元素常用的属性表。
复杂的导航为了更能清晰的显示,我们可以多用几个.mapMap文件,也就是嵌套网站地图。
我们在新建一个文件夹,在这个文件夹下建两个网站地图文件,Products.siteMap和Servers.sitMap,建立Web.siteMap放到网站的根目录下,用web.site的siteMapFile属性来链接其他两个.siteMap文件。 代码如下所示:
Products.siteMap:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<? xml version = "1.0" encoding = "utf-8" ?>
< siteMap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
< siteMapNode title = "Products" description = "我们的产品"
url = "~/chap/Products.aspx" >
< siteMapNode url = "~/chap/Software.aspx" title = "软件" description = "软件的提供" />
< siteMapNode url = "~/chap/Hardware.aspx" title = "硬件" description = "硬件的提供" />
</ siteMapNode >
</ siteMap >
Services.siteMap文件:
<? xml version = "1.0" encoding = "utf-8" ?>
< siteMap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
< siteMapNodeurlsiteMapNodeurl = "~/chap/Services.aspx" title = "Services" description = "我们提供的服务" >
< siteMapNode url = "~/chap/Training.aspx" title = "训练" description = "训练" />
< siteMapNode url = "~/chap/Consulting.aspx" title = "咨询" description = "问题咨询" />
< siteMapNode url = "~/chap/Support.aspx" title = "支持" description = "技术支持" />
</ siteMapNode >
</ siteMap >
|
Web.siteMap文件:
1
2
3
4
5
6
7
|
<? xml version = "1.0" encoding = "utf-8" ?>
< siteMap xmlns = "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
< siteMapNodeurlsiteMapNodeurl = "home.aspx" title = "home" description = "home" >
< siteMapNode siteMapFile = "~/chap/Products.sitemap" />
< siteMapNodesiteMapFilesiteMapNodesiteMapFile = "~/chap/Services.sitemap" />
</ siteMapNode >
</ siteMap >
|
导航地图建立完了,接下来显示导航地图。
SiteMapPath控件显示导航
直接把控件拖动到要导航的页面就可以了。控件会自动与导航地图进行绑定。
显示:
TreeView控件显示导航
TreeView控件通常用来树形结构的站点导航,可以用来显示XML、表格或关系数据。
基本的操作:
TreeView每个节点其实都一个是个TreeNode类的对象。可以通过编程操作TreeNode对象动态的添加和修改。可以通过数据源控件进行绑定,例如通过SiteMapDataSource空调感觉爱你或XmlDataSource控件。
TreeViewcollapseAll()和ExpandAll()方法折叠和展开节点。利用Nodes.Add()方法添加到节点到控件中,Nodes.Remove()方法删除指定节点。
DEMO:
在这里只是为了熟悉TreeView,也没有实现,鼠标右击对TreeView操作,和只刷新TreeView控件,以及和数据绑定。只是为了熟悉TreeView而熟悉TreeView。
myTreeView代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<%@ PageLanguage="C#" AutoEventWireup="true"CodeFile="Menu.aspx.cs"Inherits="Menu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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 >
< formidformid = "form1" runat = "server" >
< div >
</ div >
< 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 Text = "师姐二" Value = "师姐二" ></ asp:MenuItem >
</ asp:MenuItem >
< asp:MenuItem Text = "八期" Value = "八期" >
< asp:MenuItem Text = "英语部" Value = "英语部" ></ asp:MenuItem >
< asp:MenuItem Text = "值日生部门" Value = "值日生部门" ></ asp:MenuItem >
</ asp:MenuItem >
< asp:MenuItem Text = "九期" Value = "九期" ></ asp:MenuItem >
< asp:MenuItem Text = "十期" Value = "十期" ></ asp:MenuItem >
< asp:MenuItem Text = "十一期" Value = "十一期" ></ asp:MenuItem >
</ Items >
</ asp:Menu >
</ form >
</ body >
</ html >
|
C#代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
public partial class chap_myTreeView: System.Web.UI.Page
{
//移除当前节点
protectedvoid RemoveNode_Click( object sender, EventArgs e)
{
//如果存在当前节点。
if (myTreeView.SelectedNode != null )
{
//获取当前节点的父节点。
TreeNode parentNode= myTreeView.SelectedNode.Parent;
//移除当前节点。
if (parentNode != null )
{ parentNode.ChildNodes.Remove(myTreeView.SelectedNode); }
else
{
myTreeView.Nodes.Remove(myTreeView.SelectedNode);
}
}
}
//添加当前节点。
protectedvoid AddNode_Click( object sender, EventArgse)
{
//如果添加当前节点的值为空,则返回。
if (txtAdd.Text.Trim().Length <1)
{
return ;
}
//建立节点的childNode,设置Value属性。
TreeNode chileNode = new TreeNode();
//给新加的节点赋值。
chileNode.Value = txtAdd.Text.Trim();
//判断是否选中一个节点。
if (myTreeView.SelectedNode != null ) //如果存在当前节点。
{
//将新的childNode对象添加到当前节点。
myTreeView.SelectedNode.ChildNodes.Add(chileNode);
txtAdd.Text = "" ;
}
else
{
//作为根节点添加到树中。
myTreeView.Nodes.Add(chileNode);
//清楚文本框。
txtAdd.Text = "" ;
}
}
//将树全部的折叠。
protectedvoid FlodNodes_Click( object sender, EventArgs e)
{
myTreeView.CollapseAll(); //将树全部折叠起来.
}
//全部展开.
protectedvoid OpenAllNode_Click( object sender, EventArgs e)
{
myTreeView.ExpandAll(); //全部展开树.
}
}
|
效果:
Menu控件和TreeView大同小异,在这就不赘述了。
Word中的导航让我们一目了然的了解到文章的主体内容,我想每个看过厚厚文档的程序员对word的导航都深有体会。清晰合理的导航有效引导用户到网站的各个角落,百度地图能让我们找到每一块有名字的土地。一篇文章上说过,SEO行业里总流传着这么句经典话语:“内容为王,外链为皇,内链为妃,关键词为相,代码为将,结构为城,更新为太子,百度垂帘听政。那导航不就是链接地址,也就处在皇妃的位置了。。。。
希望这篇关于ASP.NET网站导航及导航控件的文章希望对大家的学习有所帮助。