• 1. 用AJAX改善用户体验(一)
  • 2. 简单描述 实现无刷新验证用户名是否存在的工作原理? AJAX 的核心技术是什么?回顾
  • 3. 预习检查ASP.NET AJAX 有哪些常用核心组件? AutoComplete 控件可以实现什么功能?
  • 4. 本章任务使用 ASP.NET AJAX 核心组件实现无刷新和局部更新效果 使用 AutoComplete 控件实现自动完成功能
  • 5. 本章目标掌握 ASP.NET AJAX 框架技术核心组件 掌握 AutoComplete 控件的使用
  • 6. AJAX概述AJAX的典型应用 AJAX 在 Google Suggest 中的应用(智能提示)AJAX 在 GoogleMaps 中的应用(图像显示几乎没有延迟)
  • 7. AJAX组成原理AJAX是:JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体,主要应用于异步获取后台数据和局部刷新XmlHttpRequestJavaScriptCSSDOM服务器
  • 8. ASP.NET AJAX框架技术ASP.NET AJAX 框架把复杂脚本封装成控件,大大提高了开发效率 ASP.NET AJAX 框架主要包括: 核心组件、工具包、增值组件、示例代码以及框架类库5部分
  • 9. ASP.NET AJAX安装下载安装:ASP.NET 2.0 AJAX Extensions 1.0 安装包 安装后当我们新建网站的时候会出现Asp.net AJAX-Enabled Web Site模板 ASP.NET AJAX模板ASP.NET AJAX核心组件视频:安装ASP.NET AJAX视频
  • 10. ASP.NET AJAX核心组件简介 ASP.NET AJAX核心组件主要包括: ScriptManager——全局脚本控制器 UpdatePanel——更新面板 UpdateProgress Timer——时钟控件 ScriptManagerProxy
  • 11. ScriptManager控件ScriptManager 控件——全局脚本控制器 每个 AJAX 程序都必须包括此控件,并且只有一个 ScriptManager控件声明语法
  • 12. UpdatePanel控件 UpdatePanel 控件——更新面板 用来实现无刷新效果 只需把需要更新的部分放在该控件内容模板中即可 UpdatePanel控件声明语法表示采用何种方式来获取服务器端的资源它包括Always和Conditional两种模式Always:每次请求时无条件刷新面板内容 Conditional:有触发条件的更新UpdatePanel还有两个重要的子元素: :内容模板,类似GridView等控件的模板列 :相当于触发器,只有满足条件后才更新
  • 13. 使用UpdatePanel控件实现无刷新效果更改为“60000.0000”点“刷新”按钮,实现数据无刷新更新 我们以用 GridView 显示 MyBank 数据库中Accounts 表的数据信息为例
  • 14. 使用UpdatePanel控件实现无刷新效果把需要更新的内容放在 UpdatePanel内容模板中
    把需要更新的部分放在内容模板中关键HTML代码演示示例1: 使用UpdatePanel控件
  • 15. UpdatePanel 控件的 Triggers属性Triggers属性:表示只有当定义的触发条件满足后才更新面板中的内容我们先来做一个实验实现如图所示的无刷新效果实现这个功能非常简单
  • 16. UpdatePanel 控件的 Triggers属性把要更新的内容 放在内容模板中
    把需要更新的部分放在内容模板中关键HTML代码 protected void btnInOutpanel_Click(object sender, EventArgs e) { lblDateTimeInPanel.Text = DateTime.Now.ToString(); }后台关键代码
  • 17. UpdatePanel 控件的 Triggers属性点“显示当前时间”按钮,页面被刷新如果我们把按钮放 在UpdatePanel外如何让UpdatePanel外的按钮实现无刷新效果?
  • 18. UpdatePanel 控件的 Triggers属性把要更新的内容 放在内容模板中
    只要添加Triggers属性即可实现无刷新效果演示示例2: 使用UpdatePanel控件的Triggers属性
  • 19. UpdateProgress控件 UpdateProgress控件: 用来在更新过程中给出提示 可以起到类似进度条的功能等待中的友情提示
  • 20. UpdateProgress控件 模仿校友录,实现登录提示和局部刷新效果:出现等待友情提示实现登录部分局部刷新效果
  • 21. UpdateProgress控件 protected void imgBtnLogin_Click(object sender, ImageClickEventArgs e) { div1.Style.Add("display", "none"); System.Threading.Thread.Sleep(2000); div2.Style.Add("display", "block"); }后台关键代码 正在加载数据,请稍候... UpdatePanel控件声明代码演示示例3: 使用UpdateProgress控件
  • 22. Timer控件 Timer 控件: 间隔一定的时间自动刷新页面,或完成特定的任务 典型应用:Web时钟、聊天室、“超女”人气榜、电厂实时数据等 Timer 控件声明代码Interval:表示执行Tick任务的间隔时间, 单位是毫秒
  • 23. Timer控件 实现奥运会金牌榜实时更新功能金牌数由“35”变成“36”金牌数自动无刷新更新
  • 24. Timer控件 实现奥运会金牌榜自动无刷新更新数据功能在MyAjaxTest数据库中 添加新表OlympicGolds金牌榜页面布局
  • 25. Timer控件 关键HTML代码设置时间间隔为1秒protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DisplayGoldsInfo(); } } protected void DisplayGoldsInfo() { ...... gvGoldsInfo.DataSource = ds; gvGoldsInfo.DataBind(); } protected void Timer1_Tick(object sender, EventArgs e) { DisplayGoldsInfo(); } 后台关键代码演示示例4: 使用Timer控件
  • 26. ASP.NET AJAX扩展控件ASP.NET AJAX 还提供了许多扩展控件,丰富了AJAX页面效果,使用简单方便 可以实现自动完成功能分组菜单折叠效果弹出模式窗口
  • 27. ASP.NET AJAX扩展控件使用ASP.NET AJAX扩展控件,需要: 下载控件工具包:ASP.NET AJAX Control Toolkit http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit 添加对工具包的引用视频:添加ASP.NET AJAX扩展控件过程
  • 28. ASP.NET AJAX扩展控件简介扩展控件说明AutoComplete根据用户输入的前几个字母或汉字给出相关提示FilteredTextBox文本框过滤控件Accordion分组菜单折叠Calendar通过客户端方法完善了刷新、焦点获取、自动隐藏的日历控件DropShadow实现各种阴影效果CascadingDropDown级联下拉菜单CollapsiblePanel折叠面板DragPanel可自由拖拽的面板ModalPopup弹出“模式”窗口Tabs选项卡控件Rating分级控件Slider以滑块的形式显示数据
  • 29. 添加关键字搜索自动完成功能 用 AutoComplete 控件来实现类似 Google 搜索建议的自动完成功能 关键字SearchKeywords 表数据信息实现关键字搜索自动完成功能
  • 30. 添加ASP.NET AJAX效果 如何在不使用ASP.NET AJAX模板的项目中添加AJAX效果呢? 下面我们就在MyBookShop项目中使用AutoCompleteExtender 控件,实现自动完成功能对比使用“Asp.net AJAX-Enabled Web Site” 模板和没有使用模板的页面的Web.Config文件没有使用模板的Web.Config文件使用模板的Web.Config文件拷贝使用AJAX模板的Web.Config文件的相关 属性节到不使用模板的Web.Config中即可演示示例5: MyBookShop项目中自动提示
  • 31. AutoComplete 控件简介 AutoComplete控件简介: 用来实现自动完成功能,根据用户输入的前几个字母或汉字给出相应的提示 AutoComplete控件声明语法 属性名称 说 明TargetControlID要实现自动完成功能的控件IDServicePathWeb 服务的路径ServiceMethod要使用的 Web 服务的方法MinimumPrefixLength用户输入多少个字母才出现提示效果EnableCaching是否启用缓存CompletionSetCount提示数据的行数这里需要一个Web Service文件
  • 32. 创建Web Service 在MyBookShop项目MyWebService文件夹下添加MyWebService.asmx文件[System.Web.Script.Services.ScriptService()]添加此特性,方可在客户端引用 Web 服务
  • 33. 创建Web Service[WebMethod] public string[] GetHotSearchByKeywords(string prefixText, int count) { return SearchKeywordManager.GetHotSearchKeywords(prefixText,count); } 修改Web Service方法,实现根据输入关 键字前缀,查找搜索次数前10名的关键字数据库数据信息输入测试数据,以便查看方法返回的结果得到GetHotSearchByKeyword 方法的返回结果演示示例6:MyBookShop项目中创建WebService
  • 34. 实现自动完成功能添加AutoComplete 控件的母版页布局 关键HTML代码
  • 35. 实现关键字搜索自动完成功能实现自动完成功能
  • 36. 总结简述AJAX整合原理 ASP.NET AJAX 运行环境有什么要求? ASP.NET AJAX 有哪些核心组件? AutoCompleteExtender控件的ServicePath、 ServiceMethod、MinimumPrefixLength属性各表示什么意思? 用AJAX调用Web Service,需要特别添加什么属性?