在本篇文章中，我们将通过编写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秒钟的延迟并显示当前服务器的时间。

protected void Button1_Click(object sender, EventArgs e)

{

    System.Threading.Thread.Sleep();

    Label1.Text = DateTime.Now.ToString();

}

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

<script language="javascript" type="text/javascript">

<!--

var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

    if (prm.get_isInAsyncPostBack()) {

      prm.abortPostBack();

    }

}

// -->

</script>

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

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

<style type="text/css">

#UpdatePanel1 {

  width:200px; height:100px;

  border: 1px solid gray;

}

#UpdateProgress1 {

  width:200px; background-color: #FFC080;

  bottom: %; left: 0px; position: absolute;

}

</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秒钟的延迟并显示当前服务器的时间，并附加上一条信息表示是由触发器引发的异步更新。

protected void Panel1Trigger_Click(object sender, EventArgs e)

{

    System.Threading.Thread.Sleep();

    Label1.Text = DateTime.Now.ToString() + " - trigger";

}

9．在代码窗口，在已有的<Script>脚本块中添加如下代码：

<script language="javascript" type="text/javascript">

<!-- 

var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

    if (prm.get_isInAsyncPostBack()) {

      prm.abortPostBack();

    }

}

prm.add_initializeRequest(InitializeRequest);

prm.add_endRequest(EndRequest);

var postBackElement;

function InitializeRequest(sender, args) {

    if (prm.get_isInAsyncPostBack()) {

        args.set_cancel(true);

    }

    postBackElement = args.get_postBackElement();

    if (postBackElement.id = 'Panel1Trigger') {

        $get('UpdateProgress1').style.display = 'block';                

    }

}

function EndRequest(sender, args) {

    if (postBackElement.id = 'Panel1Trigger') {

        $get('UpdateProgress1').style.display = 'none';

    }

}

// -->

</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. Python 面向对象和面向过程对比

    # 大象装冰箱 # 脚本, 此时代码是最简单的. 不需要构思整个程序的概况 print("开门") print("装大象") print("关门&qu ...

  2. calc() --- css3

    http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

  3. 神州数码RIP路由协议

    实验要求:熟练掌握RIP配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 physical-l ...

  4. easyUI 下拉组件转义

    <labelclass="label"for="belongWidget">归属组件:</label> <inputid=&quo ...

  5. Python之路PythonThread，第四篇，进程4

    python3  进程/线程4 进程间同步互斥方法: from multiprocessing import Lock 创建 进程锁对象 lock = Lock() lock.acquire()  给 ...

  6. Unity 3D光源-Spot Light聚光灯用法详解、模拟手电筒、台灯等线性教程

    Unity4大光源之聚光灯 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  7. s21day02 python笔记

    s21day02 python笔记 一.昨日内容回顾及补充 内容回顾 补充 if条件语句嵌套 10086示例 pycharm更改解释器 python3.7解释器 python2.7解释器 二.循环语句 ...

  8. 1px的实现方法

    1.用伪元素实现 .border_1px_top{ position:relative;} .border_1px_top:before{ content: ""; positio ...

  9. find 以及linux 和windows 文件互传

    1. find  命令  查找文件或目录 同时也会用到的有 which   whereis   locate   经常也会遇到一些快捷键  ctrl  +  l  e  a  w  u  k     ...

  10. 2017.4.7 Sprng MVC工作流程描述图

    图一: 图二: Spring工作流程描述         1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServlet捕获:       2. Dispa ...