第12讲服务器控件(三).ppt

NET程序设计 主讲教师 李璟e mail 2008sjyx 手机第12讲服务器控件 三 12 1用户控件12 2导航控件12 3母版页12 4服务器控件综合实例 12 1用户控件 如果在应用程序反复多次使用某种类型的功能且ASP NET内置的服务器控件又不能满足应用程序的要求 ASP NET提供了用户控件的技术来处理此类问题 用户控件是ASP NET提供的一种直观的可重用的模型 用户控件使开发人员能够使用编写Web窗体页的相同编程技巧轻松地定义自定义控件 12 1用户控件 12 1 1用户控件概述12 1 2创建用户控件12 1 3设计用户控件属性 12 1 1用户控件概述 用户控件是能够在其中放置标记和Web服务器控件的容器 可以将用户控件作为一个单元对待 为其定义属性 方法和事件 用户控件可以独立于Web窗体而单独使用 使程序员能够很容易地跨ASP NETWeb应用程序划分和重复使用公共UI功能 用户控件和ASP NET窗体页的相同点 1 都可以向其中添加所需的标记和子控件 具有用户界面页 2 都包含对其内容进行操作的事件代码 操作方法也相同 3 在第一次请求时被编译并存储在服务器内存中 缩短以后请求的响应时间 用户控件和ASP NET窗体页的不同点 用户控件扩展名为 ascx 代码扩展名为为 ascx cs 用户控件没有Page指令和html body或者form元素 不能直接显示在浏览器上 只能通过在页面中被使用才能显示在浏览器上 12 1 2创建用户控件 用户控件的声明语法和创建ASP NET页面的语法非常的相似 其主要的差别在于 用户控件使用 Control指令取代了 Page指令 用户控件在内容外部不包括html body和form元素 1 启动VS2008打开或者新建一个网站 在 解决资源管理器 窗格中 右击选择网站URL 打开快捷菜单 选择 添加新项 在 添加新项 对话框的对话框中单击 Web用户控件 名称 框中输入Web用户控件的名称 WebUserControl1 ascx后 单击 添加 按钮 2 VS2008将在网站所在的根目录中创建WebUserControl1 ascx文件及后台代码WebUserControl1 ascx cs 用户控件示例 3 自动生成的WebUserControl1 ascx文件中如下所示一行代码 4 在该用户控件的HTML 设计 视图中 添加一个TextBox控件TextBox1 此时 用户控件设计好了 12 1 3设计用户控件属性 为用户控件添加属性体现了他的灵活性和强大功能 用户控件与普通的Web页面不同 可以定义属性 并且可以在包含它的页面中设置和读取这些属性 12 1 3设计用户控件属性 接下来为上面创建的用户控件添加一个属性 为用控件添加属性非常的简单 只需在 ascx cs文件中添加一个属性即可 下面在该用户控件中为其添加一个属性Content 可以实现对用户控件中TextBox1的Text属性的读写 代码如下所示 publicstringContent get returnTextBox1 Text set TextBox1 Text value 用户控件示例续 为用户控件添加完属性后 再新建一个Web页面Default6 aspx以测试该属性 步骤如下 1 把用户控件WebUserControl1 ascx拖放到Default6 aspx窗体上 选择菜单 生成 重新生成网站 则在该用户控件的 属性 窗口 可以看到为用户控件定义好的属性 Content 2 在Web窗体Default6 aspx上添加一个Button控件Button1 并设置按钮Text属性值为 确定 添加一个Label控件Label1 双击Button1控件 进入后台代码编写窗口 在该事件处理程序编写如下代码 if WebUserControl1 Content Label1 Text WebUserControl1 Content 你好 ElseLabel1 Text 请输入你的姓名 3 在Default6 aspx的PageLoad 事件代码中 编写如下代码 if WebUserControl1 Content Label1 Text 请输入你的姓名 Default6 aspx运行效果 12 2导航控件 对于一个大型的企业级网站 可能拥有成百上千的网页 导航就变得十分重要 好的导航系统能够便利用户在多个页面间来回浏览 增加应用程序的可交互性 ASP NET提供了内置的站点导航技术 让开发人员创建站点导航时变得轻松 12 2导航控件 12 2 1ASP NET中的站点导航技术12 2 2SiteMapPath控件12 2 3TreeView控件12 2 4Menu控件12 2 5导航控件综合实例 12 2 1ASP NET中的站点导航技术 一些大中型的网站为了让用户便于找到合适的网页 特别定制了一些站点目录文件 用于定义站点结构 称之为站点地图 在ASP NET中 微软为了简化创建站点地图的工作 提供了一套用于导航的站点地图技术 ASP NET中的站点地图导航技术由如下三个组件组成 一个用于定义站点结构的XML文件 又称为站点地图文件 用来绑定到XML站点地图文件的SiteMapDataSource数据源控件 用于显示站点地图的导航控件 如TreeView控件和Menu控件 12 2 2SiteMapPath控件 SiteMapPath控件是一个非常方便的控件 可以自动根据在站点地图文件Web sitemap中定义的导航数据显示一个导航路径 此路径为用户显示当前页在网站中的路径及返回到首页的导航链接 只有在站点地图文件中列出的页 才能在SiteMapPath控件中显示导航数据 SiteMapPath控件可以自定义导航路径的外观 1 首先需要添加一个站点地图文件Web sitemap 在文件中添加如下代码 SiteMapPath控件示例 SiteMapPath控件示例 2 创建一个名为Default3 aspx的页面 从工具栏拖动一个SiteMapPath控件添加到该页面上 自动添加下面的代码 SiteMapPath控件示例 3 设置SiteMapPath的属性如下 设NodeStyle ForeColor Green 设Font Size Small 设PathSeparatorStyle ForeColor Green 页面运行效果 12 2 3TreeView控件 从 NET2 0开始 微软在ASP NET中内置了TreeView控件 使用它可以创建一个树状结构图 以便让用户能够在节点的各层次中进行导航 大大简化了开发人员编写导航功能的复杂性 TreeView控件用于在树结构中显示分层数据 例如目录或文件目录 并且主要支持下列功能 数据绑定 允许控件的节点绑定到XML 表格或关系数据 站点导航 通过与SiteMapDataSource控件集成实现 节点文本既可以显示为纯文本也可以显示为超链接 借助编程方式访问TreeView对象模型以动态地创建树 填充节点 设置属性等 通过主题 用户定义的图像和样式可实现自定义外观 TreeView控件应用示例 1 控件的组成元素 一个TreeView控件可以由任意多个TreeNode元素组成 每个TreeNode元素还可以包含多个子TreeNode元素 每个TreeNode元素可以关联文本和图像 还可以显示为超链接并与某个URL地址关联 2 控件的属性 TreeView控件的属性有许多 下面我们只介绍一些常用的属性 TreeView控件部分属性 1 TreeView控件部分属性 2 3 使用TreeView控件 下面介绍一个简单的树状结构图的过程 1 新建或者打开一个网站 从 工具箱 窗格的 导航 选项卡中添加TreeView控件到Web窗体中 2 左击控件 在弹出的快捷菜单中选择 自动套用格式 命令 然后在弹出的 自动套用格式 对话框中选择使用 XP资源管理器 方案 从右侧的 预览 区中可以看到效果 3 单击 确定 按钮返回窗体 即看到使用格式后的效果 再次左击 在弹出的快捷菜单中选择 编辑节点 命令 打开 TreeView节点编辑器 对话框 单击 添加根节点 按钮 添加一个根节点 随即右侧的 属性 列表变为可用 从中设置Text属性为 清华大学出版社 4 使用同样的方法 依次添加 人民教育出版社 人民邮电出版社 和 高等教育出版社 3个根节点 5 选择根节点 清华大学出版社 单击 添加子节点 按钮 然后使用添加根节点的方法添加 获奖图书 优秀教材 精品图书 和 书友论坛 4个子节点 6 用同样的方法为根节点 人民邮电出版社 添加 新书推荐 和 图书热卖 两个子节点 单击 确定 按钮返回 设计 视图即可看到未运行时的初始化效果 切换到 源 视图 会发现有以下代码 这些都是通过前面操作自动生成的 页面运行效果 12 2 4Menu控件 ASP NET提供了另一个重量级的导航控件Menu 使用该控件 开发人员可以在网页上模拟Windows的菜单导航效果 开发人员可以在Menu控件中直接配置其内容 也可通过将该控件绑定到数据源的方式来指定其内容 无需编写任何代码 便可控制ASP NETMenu控件的外观和内容 Menu控件作为一种导航控件 同样的可以轻松的绑定到SiteMapDataSource控件来实现站点导航 下面将介绍如何通过Menu控件使用静态项建立复杂的导航菜单 Menu控件的两种显示模式 静态模式 Menu控件始终是完全展开的 整个结构都是可视的 用户可以单击任何部位 动态模式 只有指定的部分是静态的 而只有用户将鼠标指针放置在父节点上时才会显示其子菜单项 静态显示行为 使用Menu控件的StaticDisplayLevels属性可控制静态显示行为 StaticDisplayLevels属性指示从根菜单算起 静态显示的菜单的层数 例如 如果将StaticDisplayLevels 设置为3 菜单将以静态显示的方式展开其前三层 StaticDisplayLevels的最小值为1 否则会引发异常 动态显示行为 MaximumDynamicDisplayLevels属性指定在静态显示层后应显示的动态显示菜单节点层数 如果将MaximumDynamicDisplayLevels设置为0 则不会动态显示任何菜单节点 如果将MaximumDynamicDisplayLevels设置为负数 则会引发异常 关于IE8不兼容Menu控件的解决办法 在IE8下显示AMenu控件异常 不会弹出动态的菜单 解决该问题的较简单的办法有以下两种 1 打开ie8 工具 兼容性视图设置 勾选 在兼容性视图中显示所有网站 2 强制IE解析为与IE7META兼容 这通过在menu控件所在的页面的head标记内增加如下所示的meta标签代码 下面以 直接配置内容 的方式设置Menu控件 具体过程如下 1 创建一个新Web窗体Default2 aspx 从 工具箱 窗格的 导航 选项卡中选择Menu控件 将其添加到Web窗体上 2 左击Menu控件 打开Menu任务对话框 选择 编辑菜单项 命令 弹出 菜单项编辑器 对话框 使用提供的按钮进行编辑 如下图所示 完成后 单击 确定 按钮返回页面窗体 编辑菜单项 注 NavigateUrl属性指示该菜单项链接到的网页地址 3 单击选择Menu控件 在 属性 窗格完成以下设置 设StaticDisplayLevels 静态显示层数 为 1 设置 设Orientation为 Horizontal 设StaticEnableDefaultPopOutImage为 False 设DynamicEnableDefaultPopOutImage为 False 设LevelMenuItemStyle如下 层菜单项风格 第0层 ItemSpacing 5px BackColor EAEAEA Font Size 14px ForeColor 284E98 第1层 BackColor FFFFCC Font Size 14px ForeColor 996633 第2级 BackColor E8E8E8 Font Size 14px ForeColor 009933 设置StaticHoverStyle 静态菜单悬停风格 如下 Font Underline true 设置DynamicHoverStyle 动态菜单悬停风格 如下 Font Underline true 页面运行效果 12 2 5导航控件综合实例 12 2 5导航控件综合实例 下面将给出一个导航控件的综合小实例 在该小实例中 我们将通过绑定站点地图SiteMapDataSource数据源控件 分别利用Menu控件 TreeView控件以及SiteMapPath控件 实现站点导航的自动显示 下面将首先介绍一下SiteMapDataSource控件 然后给出创建该实例的操作步骤 SiteMapDataSource控件 SiteMapDataSource控件用于连接并处理存储在站点地图文件Web sitemap中的导航数据 该控件主要有如下几个属性用于控制站点地图的显示 StartFromCurrentNode 用于指定站点地图节点是否从当前页的节点进行检索 StartingNodeUrl 指定SiteMapDatasource控件从指定的节点位置开始检索节点 ShowStartingNode 指示是否检索并显示起始节点 1 创建站点地图文件Web sitemap如下 2 创建一个名为 NavigationWebSite 的网站 3 分别创建以下页面 并在页面上放置一个SiteMapPath控件以显示每个页面的导航路径 TsinghuaPress aspx 清华大学出版社 页AwardBooks aspx 获奖图书 页ExcellentTextBooks aspx 优秀教材 页FineBooks aspx 精品图书 页BookClubForum aspx 书友论坛 页PTPress aspx 人民邮电出版社 页Newbooks aspx 新书推荐 页HotBooks aspx 热卖图书 页PEP aspx 人民教育出版社 页HEP aspx 高等教育出版社 页 4 在Default aspx页面上 拖放一个SiteMapDataSource控件 默认名为 SiteMapDataSource1 设置其属性如下 其他为默认值 设ShowStartingNode False 设StartingNodeUrl Default aspx 5 在Default aspx页面上 拖放一个Menu控件 Menu1 设置属性值如下 DataSourceID SiteMapDataSource1 DynamicEnableDefaultPopOutImage False Orientation Horizontal StaticEnableDefaultPopOutImage False 6 继续设置menu1的其他外观如下 7 在Default aspx页面中 拖放一个Treeview控件TreeView1 右击该控件 选择数据源DataSourceID为 SiteMapDataSource1 选择 自动套用格式 中的 XP资源管理器方案 运行效果 12 3母版页 一个专业的Web站点页面都有一致的布局和样式 那么怎样才能使Web站点的多个页面具有一致的布局和样式 而且易于修改呢 母版页提供了解决以上问题的一种快捷途径 母版页 比如 网站的主要频道页和列表页的头部和底部都是一样的 如果将每个页面放在单独的页面中 当头部和底部需要更改时维护量太大 于是可以把头部和底部做成母版页 频道页和列表页的具体内容放到内容页中 这样当头部和底部需要改动时 只要修改一下母版页就可以了 12 3母版页 12 3 1母版页组成12 3 2创建母版页12 3 3创建内容页 12 3 1母版页组成 使用ASP NET母版页的步骤分为两步 首先创建一个母版页 master文件 定义所有页统一的布局 样式和行为以及公共元素 然后基于母版页创建内容页 aspx文件 包含除母版页之外的其他非公共内容 当用户请求内容页时 内容页与母版页合并在一起输出 母版页 母版页是扩展名为 master的ASP NET文件 可以包括任何HTML元素和ASP NET元素 母版页由特殊的 Master指令识别 该指令替换了用于普通 aspx页的 Page指令 母版页除在所有页上显示的公共元素外 还包括一个或者多个占位符控件 ContentPlaceHolder 这些占位符控件定义可重写内容出现的区域 其内容由只能将来的内容页里才能编辑 内容页中就是通过定义母版页中的这些占位符控件的内容而包含非公共元素的 母版页与内容页的关系 没有内容页支持 单独的母版页仅仅是一个页面模板 不能被用户所访问 同样 单独的内容页没有母版页支持 也不能被用户所访问 由此可见 母版页与内容页关系密切 是不可分割的两个部分 只有同时正确创建和使用母版页以及内容页 才能发挥他们的强大功能 12 3 2创建母版页 在Web项目中建立母版页的步骤如下 在VS2008新建或打开一个ASP NET网站 右单击网站名称 在打开的快捷菜单中选择 添加新项 打开添加新项对话框 选择 母版页 后单击 添加 按钮 即可建立一个简单的母版页 默认名为MasterPage master 默认情况下 母版页包括标记对 以及两个默认内容占位符 head和ContentPlaceHolder1 注 head 内容占位符用于在内容页中在对应的内容控件中写内容页的特定css和javascript代码 下面 在ContentPlaceHolder1控件前添加以下代码 使用母版页可以建立布局统一的Web网站 母版页的代码如下 无标题页使用母版页可以建立布局统一的Web网站 从代码中看 一个母版页和普通aspx网页的不同只有以下两点 母版页由 Master指令识别 而普通 aspx页由 Page指令识别 母版页比普通页增加一个或多个ContentPlaceHolder内容占用符控件 12 3 3创建内容页 内容页是继承母版页的页面 内容页可声明一个或多个Content控件 该控件是用来重写母版页中的内容占位符部分 内容页的标记和控件只能包含在Content控件内 12 3 3创建内容页 当创建内容页时 默认情况下设计器为母版页中定义的每个ContentPlaceHo