在ASPNET中使用jQuery.ppt

第8章在ASP NET中使用jquery 2020年2月14日星期五 2 第8章在ASP NET中使用jQuery 8 1jQueryUI及其基本操作8 2联合使用ASP NETAJAX和jQueryUI8 3jQuery代码和C 代码之间的数据交互8 4利用jQueryValidate实现客户端数据验证 2020年2月14日星期五 3 8 1jQueryUI及其基本操作 jQueryUI是一套专门用于界面交互的JavaScript库 开发人员利用它可以非常方便地控制页面的互动效果 快速在客户端开发出风格一致的Web界面 下载jQueryUI的方式很简单 从jQuery的官方网站直接免费下载即可 下载时 jQueryUI提供了不同的主题 Themes 供开发人员选择和定制 也可以从微软的CDN免费下载或引用jQueryUI 该网站同时提供了针对VS2010的jQuery智能提示 并给出了在ASP NET中使用jQueryUI的基本用法 8 1 1jQueryUI的选项和方法 1 方法 method 每个jQueryUI都提供了一些方法 这些方法一般用于对选项 option 进行操作 基本格式为 selector 方法名 参数 2 初始化选项 option 每个jQueryUI方法中都提供了很多选项 option 通过jQuery提供的方法初始化UI对象时 可以在方法的参数中同时初始化选项的值 基本格式为 方法名 选项名1 值1 选项名2 值2 选项名n 值n 参数中每个选项 option 由optionName和value组成 8 1 1jQueryUI的选项和方法 3 获取或设置选项的值利用初始化方法创建jQuery对象以后 即可获取或设置这些选项的值 基本格式为 selector 方法 option optionName value 不带value参数时 表示获取选项的值 带value参数时表示设置选项的值 例如 获取disabled选项的值vardisabled selector accordion option disabled 设置disabled选项的值 selector accordion option disabled true 9 1 2拖动 draggable jQueryUI提供的draggable方法用于控制块级元素的鼠标拖动 被拖动的元素一般用div来实现 下面的代码说明了draggable的基本用法 可拖放 div1 draggable 例8 1 演示利用jQueryUI实现鼠标拖动的基本用法 8 1 3拖放 Droppable jQueryUI提供的droppable方法用于控制将拖放元素放置到拖放目标区域内的行为 它和draggable的用法相似 例8 2 演示用鼠标拖放某个元素到另一个目标元素的基本用法 8 1 4改变元素大小 resizable jQueryUI提供的resizable方法用于改变元素的宽和高 既可以分别改变宽和高的值 也可以按比例改变宽和高的值 利用resizable缩放某个子窗口非常方便 例8 3 演示resizable的基本用法 8 1 5选择 selectable jQueryUI提供的selectable方法一般用于选择一个或多个选项 例8 4 演示selectable的基本用法 8 1 6排序 sortable jQueryUI提供的sortable方法用于对元素排序 将selectable和sortable结合起来 能通过鼠标拖放动态设置元素的顺序 例8 5 演示sortable的基本用法 8 2联合使用ASP NETAJAX和jQueryUI ASP NETAJAX为基于服务器的ajax开发提供了方便的开发架构 jQueryUI则为客户端界面提供了方便的设计手段 联合使用这两种技术 能使Web开发的效率如虎添翼 jQueryUI提供的界面互动构件 widget 实现了对块级元素的界面互动功能 这里的构件是指由多个HTML元素构成的UI组件 也包括ASP NETWeb服务器控件 最理想的办法就是将ASP NETAJAX和jQuery结合起来 这样可以同时集成两种架构的优点 既能快速解决服务器和客户端开发中遇到的难题 又能大大简化设计的难度 既缩短了项目开发周期 也保证了程序的健壮性 8 2 1PageRequestManager类 PageRequestManager类在ASP NET客户端架构的Sys WebForms命名空间下 该类提供了异步发送和回传的客户端事件 利用这些事件 就可以在ASP NETAJAX中同时使用服务器控件 HTML元素以及jQueryUI 而且也能快速实现页面局部更新的效果 要使用这些客户端事件 属性和方法 首先需要利用客户端脚本获取ASP NETAJAX自动生成的PageRequestManager对象 varprm Sys WebForms PageRequestManager getInstance 8 2 1PageRequestManager类 在ASP NETAJAX的Web窗体页面的生命周期中 客户端第1次加载页面时 将首先触发PageRequestManager对象的pageLoaded事件 以后每次异步请求和回发都会依次触发下面的事件 initializeRequest事件 beginRequest事件 pageLoading事件 pageLoaded事件 endRequest事件 1 initializeRequest事件该事件在异步请求的回送被初始化之前触发 2 beginRequest事件该事件在异步请求初始化完成后 向服务器提交请求之前触发 8 2 1PageRequestManager类 3 pageLoading事件该事件在异步请求已经被服务器接收并响应 但还没有对页面进行任何更新之前触发 4 pageLoaded事件该事件在异步回送完成而且页面区域被更新之后触发 在这个事件中 我们可以利用jQueryUI处理HTML元素和服务器控件对象 8 2 1PageRequestManager类 5 endRequest事件该事件在异步请求和回送处理完毕后触发 一般在该事件中结束动画告知用户异步请求处理完毕 在客户端脚本中 还可以利用endRequest事件的arg参数处理异步回送的结果 6 在异步处理过程中可以使用的方法prm get isInAsyncPostBack 判断是否为异步回送 prm abortPostBack 取消正在执行的异步回送 8 2 2拉帘式折叠面板 accordion jQueryUI的拉帘式折叠面板的效果就像拉帘式窗帘一样 可以全部折叠所有项 也可以展开其中的某一项 用jQueryUI构造accordion构件时 每一项的标题块用h标记来实现 标题块内的标题用a标记实现 对应项的内容用div来实现 定义HTML后 调用accordion 方法即可 FirstheaderFirstcontentSecondheaderSecondcontent accordion accordion 8 2 2拉帘式折叠面板 accordion 常用方法1 accordion options 该方法用于初始化一个或多个选项 每个选项的选项名和选项值之间用冒号分隔 多个选项之间用逗号分隔 2 accordion option optionName value 该方法用于获取或设置指定的选项 不指定value值时为获取optionName选项的值 指定value值时为设置optionName选项的值为value accordion accordion option disable 禁用折叠3 accordion optionName 该方法用于执行选项名指定的功能 参数optionName表示选项名 8 2 2拉帘式折叠面板 accordion 常用事件1 create事件事件类型 accordioncreate 当创建可折叠面板时触发 例如初始化 selector accordion create function event ui 绑定创建事件 selector bind accordioncreate function event ui 2 change事件事件类型 accordionchange 当更改accordion时触发 如果有动画 则动画完成后触发 否则立即触发 8 2 2拉帘式折叠面板 accordion 例8 6 演示在UpdatePanel内利用accordion实现折叠面板的基本用法 单击左侧accordion内的按钮时 在右侧用动画表示异步提交和更新的过程 8 2 3自动完成 autocomplete 当在文本框中输入一些文字内容时 利用jQueryUI的autocomplete实现自动完成选项提示 能让用户快速选择键入的内容 例8 7 演示在ASP NETAJAX中实现自动完成功能的基本用法 8 2 4按钮 button jQueryUI的button的作用是将指定的元素显示为按钮样式 常用有两种方法 selector button 将选择器选择的元素作为按钮样式 selector buttonset 将选择器选择的元素作为按钮选项 例8 8 演示按钮的基本用法 8 2 5日期选择 datepicker jQueryUI的日期选择用于显示一个日历 然后让用户从中选择年 月 日 选择的内容将自动添加到文本框中 常用选项maxDate Date Number String 默认为null 功能 设置一个最大的可选日期 可以是Date对象 或者是数字 从今天算起 例如 7 或者有效的字符串 y 代表年 m 代表月 w 代表周 d 代表日 例如 1m 7d minDate Date Number String 默认为null功能 设置一个最小的可选日期 用法与maxDate相似 numberOfMonths Number Array 默认为1 功能 设置一次要显示多少个月份 8 2 5日期选择 datepicker 常用方法destory 从元素中移除拖拽功能 用法 datepicker destroy disable 禁用元素的拖拽功能 用法 datepicker disable enable 启用元素的拖拽功能 用法 datepicker enable option 获取或设置元素的参数 用法 datepicker option optionName value 多语言支持多语言支持实际上就是本地化 Localization 设置 如果不做本地化处理 jQuery默认使用英文 本书用的日期中文语言包插件见jquery ui datepicker cn js 8 2 5日期选择 datepicker 例8 9 演示datepicker的基本用法 8 2 6对话框 dialog jQueryUI的对话框是一个浮动窗口 一般用div来实现 其中包含标题栏和内容区域 调用 selector dialog 时 将初始化对话框实例并自动打开对话框 如果要重复使用一个对话框 最简单的方法是禁用 自动打开 选项 autoOpen false 和使用 selector dialog open 打开它 使用 selector dialog close 关闭打开的对话框 8 2 6对话框 dialog 例8 10 演示jQueryUI模式对话框的基本用法 8 2 6对话框 dialog 例8 11 演示jQueryUI非模式对话框的基本用法 当在文本框内单击时 自动弹出提示对话框 鼠标离开文本框 对话框自动消失 8 2 7进度条 progressbar 利用jQueryUI的progressbar可以显示某项工作的进度 例8 12 演示progressbar的基本用法 8 2 8滑动条 slider jQueryUI的滑动条与进度条用法类似 区别是滑动条可以拖动 一般用于控制某些区域范围的数值 例8 13 演示slider的基本用法 8 2 9页签 tabs jQueryUI的tabs和我们在C S模式中使用的TabControl控件的功能相似 例8 14 演示tabs的基本用法 8 3jQuery代码和C 代码之间的数据交互 这一节我们主要解决以下几个问题 1 客户端jQuery代码如何和服务器端C 代码之间传递或共享数据 2 服务器如何用C 定义WebService供各种操作系统平台的各种语言访问 3 客户端如何通过jQueryajax调用服务器的WebService 4 代码隐藏类如何通过C 调用服务器的WebService 8 3 1通过HiddenField控件传递数据 在客户端用jQuery通过id获取或设置HiddenField控件的值 在服务器端用C 通过对象获取或设置HiddenField控件的值 例8 15 演示如何通过HiddenField控件实现服务器和客户端之间的数据共享 8 3 2通过HTML5的data特性传递数据 在HTML5中 我们可以直接定义某个标记的附加数据 这些附加数据以 data 为前缀的自定义特性来声明 其中 data 是关键字 其后是自定义的特性名称 例如 例8 16 利用自定义附加数据特性 完成进度条更新功能 9 3 3通过RegisterDataItem方法传递数据 使用Scriptmanager对象的RegisterDataItem方法可在异步回发期间将数据从服务器发送到客户端 而不需要考虑接收数据的控件是否位于UpdatePanel控件中 例9 17 演示通过Scriptmanager对象的RegisterDataItem方法传递数据的基本用法 8 3 4通过jQueryajax和Web服务实现jQuery和C 的交互 1 客户端调用Web服务的基本原理在ASP NETAJAX中 有三种服务形式 一种是ASP NETWeb服务 文件扩展名为 asmx 简称Web服务 另一种是WCF服务 文件扩展名为 svc 第三种是ASP NET内置的应用程序服务 包括用户的身份验证 角色和配置文件信息 这三种服务都可以通过服务器C 代码和客户端jQuery直接访问 8 3 4通过jQueryajax和Web服务实现jQuery和C 的交互 2 在服务器端定义Web服务或者WCF服务3 在客户端通过ASP NETAJAX和jQuery调用服务器端的Web服务在和之间 可以直接使用ServiceReferences元素指定引用的Web服务 asmx服务或者WCF服务 4 在客户端直接使用jQueryajax调用Web服务 8 3 4通过jQueryajax和Web服务实现jQuery和C 的交互 例8 18 演示在ASP NETAJAX中 客户端脚本调用Web服务的基本用法 8 4利用jQueryValidate实现客户端数据验证 开发Web页面时 有两种常用的数据验证技术 一种是使用jQuery验证插件在客户端进行验证 另一种是在客户端和服务器端同时进行验证 在实际的项目开发中 一般将这两种技术结合使用 jQueryValidate是jQuery官方网站提供的免费插件 也可以从微软的CDN网站上下载该插件的各种版本 本书使用的jQueryValidate为1 9版 jQueryValidate默认使用英文 如果希望使用中文提示 可以自定义一个插件 本书用的自定义中文提示插件的