本文转自： http://msdn.microsoft.com/zh-cn/library/bb386518.aspx
在本教程中，将通过编写 ECMAScript (JavaScript) 代码来扩展具有客户端行为的 UpdateProgress 控件。
您的代码将使用属于 Microsoft AJAX Library 的一部分的 PageRequestManager 类。
在 UpdateProgress 控件中，您将添加一个使用户能够取消异步回发的按钮。
作为此任务的一部分，您将使用客户端脚本来显示或隐藏进度消息。
在客户端脚本中取消异步回发
最终代码1：
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidButton1_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now.ToString();
}
</script>
<html>
<headrunat="server">
<title>UpdateProgressTutorial</title>
<styletype="text/css">
#UpdatePanel1{
width:200px;height:100px;
border:1pxsolidgray;
}
#UpdateProgress1{
width:200px;background-color:#FFC080;
bottom:0%;left:0px;position:absolute;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<scriptlanguage="javascript"type="text/javascript">
<!--
varprm=Sys.WebForms.PageRequestManager.getInstance();
functionCancelAsyncPostBack(){
if(prm.get_isInAsyncPostBack()){
prm.abortPostBack();
}
}
//-->
</script>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Panelrendered."></asp:Label><br/>
<asp:ButtonID="Button2"runat="server"OnClick="Button1_Click"Text="refresh"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgressID="UpdateProgress1"runat="server">
<ProgressTemplate>
Processing
<inputid="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()"/>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>
使用客户端脚本显示更新进度
在下列方案中，将不会自动显示 UpdateProgress 控件：
UpdateProgress 控件与某个特定的更新面板相关联，但异步回发是从一个未位于该更新面板内的控件引发的。
UpdateProgress 控件不与任何 UpdatePanel 控件相关联，
并且异步回发不是从一个既不位于 UpdatePanel 内部也不是一个触发器的控件引发。
例如，使用代码执行更新。
下面的过程演示如何在异步回发并非来自关联的 UpdatePanel 控件内部时显示 UpdateProgress 控件。
此过程假定您已完成本教程的第一部分。
最终代码2：
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
protectedvoidButton1_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now.ToString();
}
protectedvoidPanel1Trigger_Click(objectsender,EventArgse)
{
System.Threading.Thread.Sleep(3000);
Label1.Text=DateTime.Now.ToString()+"-trigger";
}
</script>
<html>
<headid="Head1"runat="server">
<title>UpdateProgressTutorial</title>
<styletype="text/css">
#UpdatePanel1{
width:200px;height:100px;
border:1pxsolidgray;
}
#UpdateProgress1{
width:200px;background-color:#FFC080;
bottom:0%;left:0px;position:absolute;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<scriptlanguage="javascript"type="text/javascript">
<!--
varprm=Sys.WebForms.PageRequestManager.getInstance();
functionCancelAsyncPostBack(){
if(prm.get_isInAsyncPostBack()){
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
varpostBackElement;
functionInitializeRequest(sender,args){
if(prm.get_isInAsyncPostBack()){
args.set_cancel(true);
}
postBackElement=args.get_postBackElement();
if(postBackElement.id=='Panel1Trigger'){
$get('UpdateProgress1').style.display='block';
}
}
functionEndRequest(sender,args){
if(postBackElement.id=='Panel1Trigger'){
$get('UpdateProgress1').style.display='none';
}
}
//-->
</script>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Panelrendered."></asp:Label><br/>
<asp:ButtonID="Button1"runat="server"Text="refresh"OnClick="Button1_Click"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="Panel1Trigger"/>
</Triggers>
</asp:UpdatePanel>
<asp:ButtonID="Panel1Trigger"runat="server"Text="Trigger"OnClick="Panel1Trigger_Click"/>
<asp:UpdateProgressID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Processing
<inputid="Button2"
type="button"
value="cancel"
onclick="CancelAsyncPostBack()"/>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
分享到：
相关推荐
在ASP.NET AJAX中，UpdateProgress控件与AjaxUpdatePanel配合使用，提供了一种在后台处理时显示进度指示器的方式。当AjaxUpdatePanel内的内容正在更新时，UpdateProgress控件会显示在页面上，向用户表明后台操作正在...
在ASP.NET AJAX框架中，一个非常重要的组件是`UpdateProgress`控件，它专门用于显示在后台异步处理正在进行时的进度指示器，为用户提供反馈，让他们知道后台操作尚未完成。本文将深入探讨`UpdateProgress`控件的工作...
第一章：ajax概述 第七章：使用客户端脚本对UpdateProgress编 第二章：使用ScriptManager 第八章：自定义异常处理 第三章：使用ScriptManagerProxy控件 第九章：在母版页中使用UpdatePanel 第四章：使用...
ASP.NET_AJAX入门系列：使用客户端脚本对UpdateProgress编程.doc ASP.NET_AJAX入门系列：在多个UpdatePanle中使用Timer控件.doc ASP.NET_AJAX入门系列：在母版页中使用UpdatePanel.doc ASP.NET_AJAX入门系列：自定义...
在C#代码后面，通常不需要对UpdateProgress控件做额外的编程操作，因为它的行为主要由ASP.NET AJAX框架自动管理。不过，如果你需要更复杂的逻辑，例如在特定条件下显示或隐藏进度条，可以通过JavaScript或者C#代码来...
客户端代码将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一个Button，来允许用户取消异步更新，并且使用客户端脚本来显示或者隐藏进度信息，翻译自官方文档。 ASP.NET AJAX...
**ASP.NET AJAX 入门系列46：使用客户端脚本对UpdateProgress编程** 在ASP.NET AJAX框架中，UpdateProgress控件是一种非常实用的功能，它允许我们在页面进行异步更新（AJAX请求）时显示一个进度指示器，为用户提供...
1. **Timer**控件：这个控件允许开发者在客户端以定时器的形式触发服务器端事件。例如，如果你希望每隔一段时间自动刷新某些数据，Timer控件就非常适用。通过设置Interval属性，你可以定义控件触发服务器事件的频率...
它引入了对客户端脚本库的引用，如MicrosoftAjax.js和MicrosoftAjaxWebForms.js，这些库提供了对异步调用、页面生命周期事件处理等功能的支持。此外，`ScriptManager`还控制了`UpdatePanel`的行为，比如设置更新模式...
在本文中，我们将深入探讨如何在ASP.NET Web应用程序中使用Ajax控件，特别是与"timer"、"UpdatePanel"、"UpdateProgress"和"ScriptManager"相关的知识点。这些技术是提高网页交互性和用户体验的关键工具，因为它们...
- **Timer控件**：Timer控件在客户端以设定的时间间隔触发事件，可用于定期执行服务端的方法，实现无刷新更新。 - **Ajax验证控件**：新引入的Validators控件扩展了ASP.NET验证功能，允许在Ajax请求中进行客户端...
ASP.NET AJAX 是微软提供的一种用于构建富客户端Web应用程序的技术，它允许开发者在不刷新整个页面的情况下更新页面的部分内容，从而提升用户体验。AJAX (Asynchronous JavaScript and XML) 的核心是利用JavaScript...
在这个"ASP.NET AJAX核心控件示例"中，我们将探讨四个关键的控件：ScriptManager、UpdatePanel、UpdateProgress和Timer，它们在实现页面无刷新更新和优化用户体验方面起着重要作用。 1. **ScriptManager**: ...
- **ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程**：教程可能涉及如何通过JavaScript控制UpdateProgress的显示和隐藏，以及如何根据特定条件自定义其行为。 - **ASP.NET AJAX入门系列（8）：...
在本系列的第五部分，我们将会深入探讨ASP.NET AJAX中的一个关键组件——UpdateProgress控件。UpdateProgress控件是ASP.NET AJAX Toolkit中的一个工具，它在页面进行异步更新（通常由UpdatePanel触发）时，能够显示...
Ajax Timer控件模拟了JavaScript的setTimeout或setInterval函数，允许在后台定期触发事件，而无需页面整体刷新。在本示例中，Timer可能用于定时检查新消息，从而保持聊天室的实时性。每当计时器触发，它会引发Tick...
UpdateProgress控件示例... 8. 在异步更新时显示滚动进度条... 4). Timer控件示例... 9.在客户端无刷新定时执行服务端方法... 5). Ajax中新Validators控件用法示例... 10. Validators控件使用配置示例... ...
例如，你可以在后台执行任务时调用客户端脚本来更新进度条。 ```javascript function updateProgress(percentComplete) { $('#progressBar').css('width', percentComplete + '%'); } ``` 5. **触发异步更新**：...
- **ScriptManager控件**：是ASP.NET AJAX的核心，管理页面上所有服务器控件的Ajax功能和客户端脚本库。每个页面仅需一个，并应放在form标记内。 - **UpdatePanel控件**：用于实现页面局部更新，通过异步回传更新...