ASP.NET中的站点导航技术

 

1.站点地图

 

(站点地图文件) 是一个名为Web.Sitemap的XML文件，ASP.NET 3.5内置了一个站点地图提供者的提供者类XmlSiteMapProvider,它将查找应用程序根目录下的Web.Sitemap文件(所以Web.Sitemap文件必须位于应

用程序根目录下且文件名称不能改),然后提取文件中的站点地图数据,并创建相应的SiteMap对象,

SiteMapDataSource将使用这些SiteMap对象向那些导航控件如(TreeView等)提供导航信息。

 

鼠标在站点上单击右键--"添加新项"--"站点地图文件",添加的Web.Sitemap内容如下:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/Aspnet/SiteMap-File-1.0" >

<siteMapNode url="" title="" description="">

   <siteMapNode url="" title="" description="" />

   <siteMapNode url="" title="" description="" />

<siteMapNode url="" title="" description="">

</siteMapNode>

</siteMap>

ASP.NET中有一个反映站点地图结构的静态对象SiteMap,该对象就对应了站点地图。它公开

SiteMapNode对象的集合,用于表示站点地图文件中的每一个节点。SiteMap的所有成员都是静态的,

因此无需实例化SiteMap对象。

SiteMap.CurrentNode 返回一个SiteMapNode对象,表示当点节点。

SiteMap.RootNode 返回一个SiteMapNode对象,表示根节点。

得到了SiteMapNode对象 如SiteMapNode Node=SiteMap.RootNode

Node.ParentNode (返回当前节点的上一级节点,如果当前节点是根节点,返回null)

Node.HasChildNodes (判断当前节点是否有子节点)

Node.ChildNodes (返回当前节点中所有子节点的集合)

Node.PreviousSibling (返回当前节点的上一个兄弟节点,无则返回null)

Node.NextSibling (返回当前节点的下一个兄弟节点,无则返回null)

 

1.1使用SiteMapPath控件来显示站点的导航路径。

SiteMapPath可以根据在Web.sitemap定义的数据自动地显示网站的路径,但只有在站点地图中列出的

页才能在SiteMapPath控件中显示导航数据。如果将SiteMapPath控件放置在站点地图中未列出的页上,

该控件不会向客户端显示任何数据。可以将该控件添加到母板页中,这样所有的子页面(站点地图中有),

只要应用了母板页,就都有导航效果。SiteMapPath控件之所以能够直接访问Web.sitemap文件,是

因为它直接工作在ASP.NET导航模型之上。

 

 

1.2 URL地址映射

一些情况下,开发人员可能希望隐藏真实的网页地址,特别是一些保密性要求强的网站,此时使用地址映射就很有必要。

另外开发人员希望保持网页的友好性,为用户提供友好易记的URL,以便于用户能很轻松地记住所访问的网页。

可以在web.config中使用<urlMappings>块来设置：

<configuration>

  <system.web>

   <urlMappings enable="true">

    <add url="~/Category.aspx" mappedUrl="~/Default.aspx?catepory=12" />

   </urlMappings>

    ...

   </system.web>

</configuration>

mappedUrl表示真实地址  url表是映射的地址

 

 

2 使用TreeView控件导航

 

 

2.1 TreeView控件可以直接绑定到SiteMapDataSource控件中来显示导航数据,将TreeView的数据源设

置为SiteMapDataSource即可(当然前提是建立了Web.sitemap站点地图)。SiteMapDataSource是从站

点地图提供者XmlSiteMapProvider检索站点地图数据的。

 

2.2 可以通过编程的方式把Web.sitemap站点地图里的地图数据加载到TreeView控件里。

经过添加的TreeView生成的主要代码如下：

<asp:TreeView ID="TreeView1" runat="server">

<Nodes>

  <asp:TreeNode NavigateUrl="~/WebForm1.aspx" Text="首页" Value="首页">

  <asp:TreeNode NavigateUrl="~/WebForm2.aspx" Text="食品" Value="食品">

  <asp:TreeNode Text="桂林米粉" ToolTip="桂林的米粉" Value="桂林米粉"></asp:TreeNode>

  <asp:TreeNode NavigateUrl="~/WebForm5.aspx" Text="饮料" ToolTip="桂林的饮料" Value="饮料"></asp:TreeNode>

  </asp:TreeNode>

  <asp:TreeNode NavigateUrl="~/NewFolder1/WebForm3.aspx" Text="服饰" Value="服饰">

  <asp:TreeNode NavigateUrl="~/NewFolder1/WebForm4.aspx" Text="ADIDAS" 

  ToolTip="美国名牌" Value="ADIDAS"></asp:TreeNode>

  </asp:TreeNode>

  </asp:TreeNode>

  </Nodes>

  </asp:TreeView>

 

可以看出TreeView与SiteMap类非常类似,TreeView有一个Nodes属性,TreeView.Nodes表示的是TreeView控件的节点的集合,TreeNode表示一个节点,它有一个ChildNodes属性,表示当前节点的子节点集合。由于它们都是集合,所以可以用Add Remove Count等集合方法来操作。如

TreeNode rootnode=new TreeNode(".NET");

TreeView1.Nodes.Add(rootnode);

为TreeView1添加一个Text属性为.NET的(上面也看到了,还有NavigateUrl等属性)节点。

TreeNode  childnode=new TreeNode("ASP");又创建一个节点

childnode.ChildNode.Add(new TreeNode("PSA"));

为childnode创建一个子节点

rootnode.ChildNode.Add(childnode); 把childnode加入到rootnode之下

这样一来,层次是 .NET--ASP--PSA

刚才提到了NavigateUrl属性,当NavigateUrl属性被指定后,该节点为导航模式(点击该节点时导航到指定页面,不会触发SelectNodeChanged事件)。当没有设置NavigateUrl属性,该节点为选中模式(点击该点时,将产生一个页面回送并触发TreeView.SelectNodeChanged事件)。

 

实现代码:

 

protected void Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                //初始化根节点

                TreeNode node = new TreeNode("首页", "", "", "~/WebForm1.aspx","");

                //SiteMap.RootNode将返回站点地图的根节点,为一个SiteMapNode对象

                //LoadSiteMap用来把SiteMapNode里的Title等属性添加到TreeNode对象里

                LoadSiteMap(SiteMap.RootNode, node);

                TreeView3.Nodes.Add(node);

            }

        }

        protected void LoadSiteMap(SiteMapNode smn, TreeNode tn)

        {

            //求出SiteMapNode对象的节点数

            int count = smn.ChildNodes.Count;

            for (int i = 0; i < count; i++)

            {

             //把SiteMapNode里的Title等属性添加到新创建的TreeNode对象里

                TreeNode node = new TreeNode(smn.ChildNodes[i].Title, "", "", smn.ChildNodes[i].Url, "");

             //把创建的TreeNode对象作为子节点添加到它父节点中

                tn.ChildNodes.Add(node);

             //如果子节点还有节点的话，递归调用方法

                if (smn.ChildNodes[i].HasChildNodes)

                {

                    LoadSiteMap(smn.ChildNodes[i], node);

                }

            }

        }

 

 

TreeView绑定XML文件

 

TreeView控件通过与XmlDataSource控件结合,使绑定XML文件变得非常简单。

把XmlDataSource拖到设计视图后,从其任务窗口中配置数据源。然后把TreeView控件的数据源

设置为XmlDataSource，为了使显示更好,当TreeView控件绑定到一个数据源控件后,在任务栏里

会增加一个名为编辑TreeNode节点数据绑定的任务项,可以非常方便的设计节点。

 

 

TreeNode的PopulateOnDemand属性

 

<asp:TreeView ID="TreeView1" runat="server" ExpandDepth="0"(展开的层次)

ontreenodepopulate="TreeView1_TreeNodePopulate">

 <Nodes>

  <asp:TreeNode Text="桂林米粉" PopulateOnDemand="true"></asp:TreeNode>

 </Nodes>

</asp:TreeView>

TreeView的TreeNode节点的PopulateOnDemand属性设为true时,当单击该节点时会触发

TreeView1_TreeNodePopulate事件,在该事件里可以动态添加TreeNode节点,实现按需添加节点的效果。

 

 

带复选框的TreeView控件

如果一个TreeNode节点没有设置链接属性,那么当我们单击该节点的时候会触发TreeView的

SelectedNodeChanged事件,其实还有一个前提,就是该节点的SelectAction属性(如果TreeView没有绑定数据源控件在其任务菜单的编辑节点里改,如果绑定了数据源控件在其任务栏菜单的编辑TreeNode数据绑定里改)设为了select,还有其他属性值none(那么该节点就不能被点击)Expand(点击该节点会切换其展开和折叠状态,还会引发TreeView的TreeNodeExpanded事件或TreeNodeCollapsed事件)

无论是TreeView还是TreeNode都有ShowCheckBoxs属性,TreeView的ShowCheckBoxs有All Leaf None Parent Root等属性值,TreeNode的ShowCheckBoxs有true和false的选择,将给相应的TreeNode前加上复选框,我们就可以获得用户选择了哪些节点:

  if (TreeView1.CheckedNodes.Count>0)

   {

      label1.text="当前选择了如下节点:"+"<br />"

      foreach (TreeNode item in TreeView1.CheckedNodes)

         {

           label1.text += item.Text+"<br />";

         }

   }

   else

      {

         label1.text="没有选择节点";

      }

 

 

3.使用Menu控件导航

 

先看Menu控件的代码:

<asp:Menu ID="Menu1" runat="server">

 <Items>

   <asp:MenuItem Text="首页" Value="首页"></asp:MenuItem>

   <asp:MenuItem Text="NBA球队" Value="NBA球队">

   <asp:MenuItem Text="洛杉矶湖人" Value="洛杉矶湖人"></asp:MenuItem>

   <asp:MenuItem Text="波士顿凯尔特人" Value="波士顿凯尔特人"></asp:MenuItem>

   </asp:MenuItem>

   <asp:MenuItem Text="CBA球队" Value="CBA球队">

   <asp:MenuItem Text="新疆广汇" Value="新疆广汇"></asp:MenuItem>

   </asp:MenuItem>

  </Items>

</asp:Menu>

与TreeView的构造非常相似,所以Menu很多方面的操作与TreeView是相同的。可以很轻松地绑定到

SiteMapDataSource控件来实现导航,具体做法与TreeView相同。不过有一点要注意,因为站点地图里

只能有一个根节点,也就是说,只有根节点自己位于最上层,Menu有一个属性StaticDisplayLevels是用

来设置菜单中静态显示几层,默认为1,那么进入页面时,在鼠标没进入菜单时只能先显示一层,所以

StaticDisplayLevels最好是选大于1,能显示多层菜单,其余菜单是动态模式,只有鼠标滑过时才显示,有个属性是MaximumDynamicDisplayLeves,用来设置当鼠标滑过时那些动态模式的菜单能显示几层。另外Menu的Orientation属性用来控制菜单是水平效果还是垂直效果。

其他如通过XMLDataSource绑定到XML文件与TreeView是一样的。

不过很重要的一点是浏览器的兼容性问题,对于Menu控件,好像谷歌浏览器是不支持的,在IE8下也只有在兼容性视图下才能显示正常http://www.cnblogs.com/blodfox777/archive/2008/09/08/1286582.html