揭开站点导航的面罩（一） _Web前端

揭开站点导航的面纱（一）

导航实际上给访问者提供了一个地图类似的东西，让访问者更快地找到想要的东西。

在2.0中引入了一个很重要的概念，那就是站点地图siteMap这样一个XML文件，但是它后缀不是XML。

若要为站点创建一致的、容易管理的导航解决方案，可以使用asp.net站点导航。asp.net站点导航提供下列功能：

在了解了一些基本知识后，我们来做一个简单的导航的例子。

1、首先创建一个master

html代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="mp.master.cs" Inherits="Navigation.mp" %>

<!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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 656px; height: 255px">
            <tr>
                <td style="width: 500px; background-color: #99ccff">
                     您当前的位置在：
                     
                    <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" 
                        Font-Size="0.8em" PathSeparator=" : ">
                        <CurrentNodeStyle ForeColor="#333333" />
                        <NodeStyle Font-Bold="True" ForeColor="#990000" />
                        <PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
                        <RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
                    </asp:SiteMapPath>
                </td>
            </tr>
            <tr>
                <td style="width: 500px">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td style="width: 500px; background-color: #ebebff">
                    版权所有 。。。。。。。</td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

显示的效果：

2、建立如下导航结构（统一应用上面的master）

3、添加站点地图（名称不可以改）

Web.sitemap下的代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="a.aspx" title="首页"  description="1">
        <siteMapNode url="b.aspx" title="根目录B页"  description="2" />
        <siteMapNode url="Default.aspx" title="Default页"  description="3" />
      <siteMapNode url="" title="one目录" description="4">
        <siteMapNode url="~/one/a.aspx" title="one目录下的a" description="5"/>
        <siteMapNode url="~/one/b.aspx" title="one目录下的b" description="6"/>
        <siteMapNode url="" title="one目录下的once目录" description="7">
          <siteMapNode url="~/one/once/a.aspx" title="one目录下的once目录下的a" description="8"/>
          <siteMapNode url="~/one/once/b.aspx" title="one目录下的once目录下的b" description="9"/>
        </siteMapNode>
      </siteMapNode>
      <siteMapNode url="" title="two目录" description="10">
        <siteMapNode url="~/two/a.aspx" title="two目录下的a" description="11"/>
        <siteMapNode url="~/two/b.aspx" title="two目录下的b" description="12"/>
      </siteMapNode>

      <siteMapNode url="sitemap.aspx" title="动态修改内存中" description="动态修改内存中的站点地图"/>
    </siteMapNode>
</siteMap>

4、在根目录下a.aspx，放一个treeView控件。新建数据源为我们建立的站点地图。

运行后，我们便可以看到效果如图所示：

接下来会讲动态修改内存中的站点地图，敬请期待。。。。

12楼jyhye3天前 09:33: 顶，前端时间也研究了treeview这个控件，感谢分享

11楼lfmilaoshi3天前 00:53: 吊胃口呀。。。米老师

10楼lilongsheng11253天前 21:27: 先了解一下，待看……

9楼hejingyuan63天前 21:11: 学习了

8楼small_baby013天前 20:44: 不错，很好！

7楼xqf3094天前 19:48: 导航是个好东西

6楼mazhaojuan4天前 19:47: 好东西！

5楼liuyanlinglanq4天前 19:47: 学习

4楼happy09li4天前 19:33: 有用，先看看

3楼xhf555554天前 19:27: 顶！有时间也去我那转转...热烈欢迎您！

2楼a1314517love4天前 19:27: 帅帅走的够远的啊，哈哈，先学习了，长收

1楼wwwwenhuan4天前 19:23: 站点地图，先学习了。