• 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控件

  • 相关阅读:
    JavaScript复习总结二(函数)
    欢迎大家赐教
    windows下安装rabbitmq
    JAVA随机获取集合里的元素
    MySQL 【CAST】函数,类型转换使用
    驭犬术
    C#处理数码相片之马赛克的实现
    开场白
    女孩,当你说没有好男人时请看看
    一个字符美女
  • 原文地址:https://www.cnblogs.com/bk/p/917049.html
Copyright © 2020-2023  润新知