本文转自： http://msdn.microsoft.com/zh-cn/library/bb386518.aspx

在本教程中，将通过编写 ECMAScript (JavaScript) 代码来扩展具有客户端行为的 UpdateProgress 控件。
您的代码将使用属于 Microsoft AJAX Library 的一部分的 PageRequestManager 类。
在 UpdateProgress 控件中，您将添加一个使用户能够取消异步回发的按钮。
作为此任务的一部分，您将使用客户端脚本来显示或隐藏进度消息。

在客户端脚本中取消异步回发
最终代码1：

Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html  >
<head runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"/>
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

</div>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

使用客户端脚本显示更新进度
在下列方案中，将不会自动显示 UpdateProgress 控件：
UpdateProgress 控件与某个特定的更新面板相关联，但异步回发是从一个未位于该更新面板内的控件引发的。

UpdateProgress 控件不与任何 UpdatePanel 控件相关联，
并且异步回发不是从一个既不位于 UpdatePanel 内部也不是一个触发器的控件引发。
例如，使用代码执行更新。

下面的过程演示如何在异步回发并非来自关联的 UpdatePanel 控件内部时显示 UpdateProgress 控件。
此过程假定您已完成本教程的第一部分。

最终代码2：

Code
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html  >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <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>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger" runat="server" Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

</div>
    </form>
</body>
</html>

[转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程相关推荐

  1. ASP.NET AJAX入门系列（6）：UpdateProgress控件简单介绍

    在ASP.NET AJAX Beta2中,UpdateProgress控件已经从"增值"CTP中移到了ASP.NET AJAX核心中.以下两篇关于UpdateProgress的文章 ...

  2. 想在客户端脚本中引用CHECKBOXLIST中的CHECKBOX项?

    有时候,我们需要在客户端验证客户是否勾选上了CHECKBOXLIST中的某一项或者验证客户端是否未选择CHECKBOXLIST的任何项 我们通常需要为这种验证撰写客户端脚本并保证其在触发回传前调用 问 ...

  3. 第八篇: UpdateProgress 控件--显示正在处理中的信息

    UpdateProgress 控件负责当页面在异步更新数据时,显示目前处理状况. 1. 新建 Web窗体: UpdateProgress(一).aspx.    添加一个 ScriptManger 控 ...

  4. ASP.Net 中ASP:ScriptManager控件的使用

    概述 ScriptManager 控件管理用于 Microsoft ASP.NET AJAX 页面的客户端脚本.默认情况下,ScriptManager 控件将 Microsoft AJAX 库的脚本与 ...

  5. 在 .NET Compact Framework 2.0 中宿主 ActiveX 控件

    适用于: ActiveX Microsoft .NET Compact Framework 版本 2.0 摘要:了解如何在使用 .NET Compact 的应用程序中宿主 ActiveX 控件.本文提 ...

  6. Gridview导出到Excel,Gridview中的各类控件,Gridview中删除记录的处理

    Asp.net 2.0中新增的gridview控件,是十分强大的数据展示控件,在前面的系列文章里,分别展示了其中很多的基本用法和技巧(详见< ASP.NET 2.0中Gridview控件高级技巧 ...

  7. ASP中利用OWC控件实现图表功能详解[zz]

    ASP中利用OWC控件实现图表功能详解 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...

  8. c#在WinForm中重写ProgressBar控件（带%的显示）

    c#在WinForm中重写ProgressBar控件(带%的显示) 2009-05-14 13:13 #region 定义textProgressBar控件的类 namespace csPublish ...

  9. WinForm中使用Excel控件

     最近项目中要在WinForm中使用Excel控件,经过几天的研究,现在总结一下成果. 在WinForm中使用Excel控件主要有三种方法:WebBrowser.DSOFramer.OWC.下面分别 ...

最新文章

  1. java自学手记——继承
  2. learn Linux sed command
  3. 微信公众平台开发接口PHP SDK完整版
  4. 数据结构（七）排序---直接插入排序（稳定）
  5. 腾讯云安装javaweb环境
  6. 「企业架构」什么是TOGAF？完整的介绍
  7. JPA环境下使用Hibernate二级缓存
  8. Ubuntu .desktop 文件编写
  9. 麻省理工大学公开课学习笔记【1、算法分析】
  10. 多个PDF怎么一起打印？教你两种打印方法
  11. 博客添加音乐插件、网站运行时间、文章阅读次数和网站访客统计
  12. 科技对金融业的告白信，有百融云创的落款
  13. 新颖的 USB HUB快充方案助您无忧！！（兼容PD、QC、AFC等快充协议）
  14. linux test指令大全,linux test命令详解
  15. 切换NPM源(淘宝源)
  16. 新版V10MXone Pro自适应苹果CMS影视模板/亲测
  17. 检测浏览器是否开启硬件加速
  18. jdbc（2）——之Class.forName(com.mysql.cj.jdbc.Driver)理解
  19. 从FC到Wii 24年来游戏机CPU发展历程回顾
  20. w7怎么修改服务器dns,Win7本地连接的ip设置方法 Win7如何设置DNS服务器？

热门文章

  1. java matlab 矩阵_如何在MATLAB中将函数应用于矩阵的每一行/列？
  2. cubase怎么添加midi设备_Cubase教程丨20分钟快速上手Cubase（下）
  3. 目标检测评价指标mAP计算
  4. Vue.js 列表渲染
  5. Git笔记(三)——[cherry-pick, merge, rebase]
  6. Java实现 二叉搜索树算法（BST）
  7. 局部特征用于图像检索 Aggregating local features for Image Retrieval
  8. CMake入门指南-编译教程
  9. java学习笔记7--抽象类与抽象方法
  10. 你得学会并且学得会的Socket编程基础知识