现在的位置: 首页 > 综合 > 正文

ASP.net基础(九)网站导航–网站导航及导航控件

2013年02月02日 ⁄ 综合 ⁄ 共 4768字 ⁄ 字号 评论关闭

轰穿老师讲网站导航这块内容时,组要讲的是ASP.NET中常用的导航控件。在这里就一一简单说说。

 

网站导航?

传统的网站导航需要我们在是在页面上弄超链接的方式来实现的,在页面修改或移动的时候需要一一在每个页中都要进行修改,这样会很麻烦。

在网站中建立网站地图,也就是把所有的链接地址放在一个专门的文件中进行统一管理,这样就方面的进行管理。

怎么弄网站导航?怎么做?

需要在VS中新建网站地图文件,再把网站地图文件与我们想要的导航控件相关联,这样就可以实现导航的效果了,我们要更改某个地址,就直接在站点地图.siteMap文件中更改就行了。

vs中如何添加网站地图?

vs中新建项中选择"站点地图"新建站点地图。

要使用站点地图,我们需要把站点地图文件添加到网站根文件夹下。

在新建一个站点地图文件的时候,默认的代码如下所示:
 

<?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>元素常用的属性表。

属性

说明

title

超链接显示的文字

description

超链接的作用,鼠标移动到链接地址时显示文字

url

超链接目标页的地址

siteMapFile

引用一个siteMap文件

resourceKey

用于页面本地变化

securityTrimmingEnabled

是否让sitemap支持安全特性

roles

确定哪些角色可以访问当前节点

 

复杂的导航为了更能清晰的显示,我们可以多用几个.mapMap文件,也就是嵌套网站地图。

我们在新建一个文件夹,在这个文件夹下建两个网站地图文件,Products.siteMapServers.sitMap,建立Web.siteMap放到网站的根目录下,用web.sitesiteMapFile属性来链接其他两个.siteMap文件。 代码如下所示:

Products.siteMap:

<?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" >

    <siteMapNodeurl="~/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文件:

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

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

    <siteMapNodeurl="home.aspx" title="home"  description="home">

        <siteMapNode siteMapFile="~/chap/Products.sitemap"  />

        <siteMapNodesiteMapFile="~/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代码:

<%@ 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>

    <formid="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#代码:

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行业里总流传着这么句经典话语:“内容为王,外链为皇,内链为妃,关键词为相,代码为将,结构为城,更新为太子,百度垂帘听政。那导航不就是链接地址,也就处在皇妃的位置了。。。。

 

抱歉!评论已关闭.