在本篇文章中,我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件,客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息。

主要内容

1.通过客户端脚本取消异步更新

2.通过客户端脚本显示或者隐藏进度信息

一.通过客户端脚本取消异步更新

1.创建一个Web页面并切换到设计视图。

2.在工具箱中双击ScriptManager、UpdatePanel、UpdateProgress控件添加到页面中。添加后页面如下:

3.在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。

4.添加一个Button控件并设置它的Text属性值为“refresh”。

5.在UpdateProgress控件中添加文本text Processing…,并添加一个HtmlButton控件并设置它的Text属性为cancle。

6.双击refresh控件添加Click事件。

7.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间。

  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3. System.Threading.Thread.Sleep();
  4.  
  5. Label1.Text = DateTime.Now.ToString();
  6. }

8.添加如下脚本,获取一个当前PageRequestManager类的实例,并创建一个函数调用abortPostBack方法来停止异步更新。

  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. var prm = Sys.WebForms.PageRequestManager.getInstance();
  4.  
  5. function CancelAsyncPostBack() {
  6.  
  7. if (prm.get_isInAsyncPostBack()) {
  8.  
  9. prm.abortPostBack();
  10.  
  11. }
  12. }
  13. // -->
  14. </script>

9.设置HtmlButton的click特性为CancelAsyncPostBack。

10.添加如下的样式块到<head>元素之间。

  1. <style type="text/css">
  2.  
  3. #UpdatePanel1 {
  4.  
  5. width:200px; height:100px;
  6.  
  7. border: 1px solid gray;
  8.  
  9. }
  10.  
  11. #UpdateProgress1 {
  12.  
  13. width:200px; background-color: #FFC080;
  14.  
  15. bottom: %; left: 0px; position: absolute;
  16.  
  17. }
  18.  
  19. </style>

11.保存并按Ctrl + F5运行。

12.单击refresh按钮,经过短暂的延时之后显示进度信息,完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。

13.单击refresh按钮并立即单击Cancle按钮结束异步更新,注意到UpdatePanel中的时间信息并没有更新。

二.通过客户端脚本显示或者隐藏进度信息

在下列情况下,UpdateProgress控件将不会自动显示:

由UpdateProgress控件关联的UpdatePanel之外的控件引发的异步更新。

UpdateProgress控件没有关联任何UpdatePanel,不在UpdatePanel中的控件引发的异步更新(例如用代码实现的更新)。

下面的例子将展示一个不在UpdateProgress所关联的UpdatePanel中的控件所引发的异步更新时,如何显示UpdateProgress控件。

1.在我们前面所创建的页面中,切换到设计视图。

2.选中UpdateProgress控件,在属性窗口中,设置AssociatedUpdatePanelID属性为UpdatePanel1。

3.在UpdatePanel和UpdateProgress控件之外添加一个Button控件。

4.设置Button的Text属性值为Trigger,并设置ID属性为Panel1Trigger。

5.选择UpdatePanel控件,在属性窗口中Triggers属性行单击ellipsis (…)。

6.创建一个异步更新触发器,并设置控件ID为Panel1Trigger。

7.双击Trigger按钮添加Click事件。

8.在Buttond的Click事件处理中添加如下代码,人为的创建一个3秒钟的延迟并显示当前服务器的时间,并附加上一条信息表示是由触发器引发的异步更新。

  1. protected void Panel1Trigger_Click(object sender, EventArgs e)
  2. {
  3. System.Threading.Thread.Sleep();
  4.  
  5. Label1.Text = DateTime.Now.ToString() + " - trigger";
  6. }

9.在代码窗口,在已有的<Script>脚本块中添加如下代码:

  1. <script language="javascript" type="text/javascript">
  2.  
  3. <!--
  4.  
  5. var prm = Sys.WebForms.PageRequestManager.getInstance();
  6.  
  7. function CancelAsyncPostBack() {
  8.  
  9. if (prm.get_isInAsyncPostBack()) {
  10.  
  11. prm.abortPostBack();
  12.  
  13. }
  14.  
  15. }
  16.  
  17. prm.add_initializeRequest(InitializeRequest);
  18.  
  19. prm.add_endRequest(EndRequest);
  20.  
  21. var postBackElement;
  22.  
  23. function InitializeRequest(sender, args) {
  24.  
  25. if (prm.get_isInAsyncPostBack()) {
  26.  
  27. args.set_cancel(true);
  28. }
  29.  
  30. postBackElement = args.get_postBackElement();
  31.  
  32. if (postBackElement.id = 'Panel1Trigger') {
  33.  
  34. $get('UpdateProgress1').style.display = 'block';
  35.  
  36. }
  37.  
  38. }
  39.  
  40. function EndRequest(sender, args) {
  41.  
  42. if (postBackElement.id = 'Panel1Trigger') {
  43.  
  44. $get('UpdateProgress1').style.display = 'none';
  45.  
  46. }
  47.  
  48. }
  49.  
  50. // -->
  51.  
  52. </script>

10.保存并按Ctrl + F5运行。

11.单击Trigger按钮,如下所示:

ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程的更多相关文章

  1. ASP.NET AJAX入门系列(4):使用UpdatePanel控件(一)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  2. ASP.NET AJAX入门系列(1):概述

    经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不 ...

  3. ASP.NET AJAX入门系列

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  4. ASP.NET AJAX入门系列(6):UpdateProgress控件简单介绍

    在ASP.NET AJAX Beta2中,UpdateProgress控件已经从“增值”CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章基本翻译自ASP.N ...

  5. ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二) UpdatePanel

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  6. ASP.NET AJAX入门系列(2):使用ScriptManager控件

    ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处理页面上的所有组件以及页面局部更新,生成相关的客户端代理脚本以便能够在JavaScript中访问W ...

  7. ASP.NET AJAX入门系列(5):使用UpdatePanel控件(二)

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  8. ASP.NET AJAX入门系列(10):Timer控件简单使用

    本文主要通过一个简单示例,让Web页面在一定的时间间隔内局部刷新,来学习一下ASP.NET AJAX中的服务端Timer控件的简单使用. 主要内容 Timer控件的简单使用 1.添加新页面并切换到设计 ...

  9. ASP.NET AJAX入门系列(8):自定义异常处理

    在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. ...

随机推荐

  1. kbmMW 5.07.00试用笔记

    在kbmMW 5.06.20试用笔记中遇到的问题,在这个版本中,基本都解决了.但还是发现修正后存在的小问题及新问题: 1.Resolve返回值错误 当提交的ClientQuery是执行一条sql语句, ...

  2. 关于selenium实现滑块验证

    关于selenium实现滑块验证 python2.7+selenium2实现淘宝滑块自动认证参考链接:https://blog.csdn.net/ldg513783697/article/detail ...

  3. 2019-03-11-day008-函数帮助

    [ i for i in dir(set) if not i.startswith('_') ] 查看数据类型的方法   

  4. G++ C++之区别

    1.遇到精度用C++ 2.G++内存超限,C++过了 其他都用G++

  5. SQL注入之Sqli-labs系列第一关

    在开始接触渗透测试开始,最初玩的最多的就是Sql注入,注入神器阿D.明小子.穿山甲等一切工具风靡至今.当初都是以日站为乐趣,从安全法实施后在没有任何授权的情况下,要想练手只能本地环境进行练手,对于sq ...

  6. js--call( )/apply()/bind()--应用

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call funct ...

  7. PHP实现二叉树的深度优先遍历(前序、中序、后序)和广度优先遍历(层次)

    前言: 深度优先遍历:对每一个可能的分支路径深入到不能再深入为止,而且每个结点只能访问一次.要特别注意的是,二叉树的深度优先遍历比较特殊,可以细分为先序遍历.中序遍历.后序遍历.具体说明如下: 前序遍 ...

  8. 20165228 2017-2018-2 《Java程序设计》第7周学习总结

    20165228 2017-2018-2 <Java程序设计>第7周学习总结 教材学习内容总结 MySQL数据库管理系统安装和初始化 使用MySQL建立连接和数据库.表 使用JDBC:(1 ...

  9. Go unitest

    待测试: // add.go package util func Add(a int, b int) int { return a + b} 使用gotests工具,自动生成测试用例框架: https ...

  10. Django中Ajax处理

    1.大部分和Flask中相同. 2.Django处理JSON,主要是对于查询结果集处理. 使用Django提供的序列化的类来完成QuerySet到JSON字符串的转换 from django.core ...