`
tomgooityeeee
  • 浏览: 73702 次
文章分类
社区版块
存档分类
最新评论

[转]msdn - 在客户端脚本中为 updateprogress 控件编程

    博客分类:
  • java
阅读更多
    <p>本文转自: http://msdn.microsoft.com/zh-cn/library/bb386518.aspx</p><p>在本教程中,将通过编写 ecmascript (javascript) 代码来扩展具有客户端行为的 updateprogress 控件。<br>您的代码将使用属于 microsoft ajax library 的一部分的 pagerequestmanager 类。<br>在 updateprogress 控件中,您将添加一个使用户能够取消异步回发的按钮。<br>作为此任务的一部分,您将使用客户端脚本来显示或隐藏进度消息。</p><p>在客户端脚本中取消异步回发 <br>最终代码1:</p><div class="cnblogs_code"><img id="code_closed_image_115526" height="16" src="http://www.cnblogs.com/images/outliningindicators/contractedblock.gif" width="11" align="top"><img id="code_open_image_115526" style="display: none;" height="16" src="http://www.cnblogs.com/images/outliningindicators/expandedblockstart.gif" width="11" align="top"><span class="cnblogs_code_collapse" id="code_closed_text_115526">code</span><span id="code_open_text_115526" style="display: none;"><br>&lt;!--&lt;br /&gt;&lt;br /&gt;code highlighting produced by actipro codehighlighter (freeware)&lt;br /&gt;http://www.codehighlighter.com/&lt;br /&gt;&lt;br /&gt;--&gt;<span style="color: #000000; background-color: #ffff00;">&lt;%</span><span style="color: #000000; background-color: #f5f5f5;">@pagelanguage</span><span style="color: #000000; background-color: #f5f5f5;">=</span><span style="color: #800000; background-color: #f5f5f5;">"</span><span style="color: #800000; background-color: #f5f5f5;">c#</span><span style="color: #800000; background-color: #f5f5f5;">"</span><span style="color: #000000; background-color: #f5f5f5;"></span><span style="color: #000000; background-color: #ffff00;">%&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">doctypehtmlpublic"-//w3c//dtdxhtml1.0transitional//en"<br>"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000; background-color: #f5f5f5;"><br>protected</span><span style="color: #0000ff; background-color: #f5f5f5;">void</span><span style="color: #000000; background-color: #f5f5f5;">button1_click(objectsender,eventargse)<br>{<br>system.threading.thread.sleep(</span><span style="color: #000000; background-color: #f5f5f5;">3000</span><span style="color: #000000; background-color: #f5f5f5;">);<br>label1.text</span><span style="color: #000000; background-color: #f5f5f5;">=</span><span style="color: #000000; background-color: #f5f5f5;">datetime.now.tostring();<br>}<br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;">updateprogresstutorial</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">style</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000; background-color: #f5f5f5;"><br>#updatepanel1</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>width</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">200px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">height</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">100px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>border</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">1pxsolidgray</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;"><br>#updateprogress1</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>width</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">200px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">background-color</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">#ffc080</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br>bottom</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">0%</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">left</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">0px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">position</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;">absolute</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">form</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp:scriptmanager</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="scriptmanager1"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script</span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="javascript"</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;">&lt;!--</span><span style="color: #000000; background-color: #f5f5f5;"><br></span><span style="color: #0000ff; background-color: #f5f5f5;">var</span><span style="color: #000000; background-color: #f5f5f5;">prm</span><span style="color: #000000; background-color: #f5f5f5;">=</span><span style="color: #000000; background-color: #f5f5f5;">sys.webforms.pagerequestmanager.getinstance();<br></span><span style="color: #0000ff; background-color: #f5f5f5;">function</span><span style="color: #000000; background-color: #f5f5f5;">cancelasyncpostback(){<br></span><span style="color: #0000ff; background-color: #f5f5f5;">if</span><span style="color: #000000; background-color: #f5f5f5;">(prm.get_isinasyncpostback()){<br>prm.abortpostback();<br>}<br>}<br></span><span style="color: #008000; background-color: #f5f5f5;">//</span><span style="color: #008000; background-color: #f5f5f5;">--&gt;</span><span style="color: #008000; background-color: #f5f5f5;"><br></span><span style="color: #000000; background-color: #f5f5f5;"></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp:updatepanel</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="updatepanel1"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">contenttemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp:label</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="label1"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #ff0000;">text</span><span style="color: #0000ff;">="panelrendered."</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">asp:label</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">br</span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp:button</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="button2"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #ff0000;">onclick</span><span style="color: #0000ff;">="button1_click"</span><span style="color: #ff0000;">text</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">contenttemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">asp:updatepanel</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp:updateprogress</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="updateprogress1"</span><span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">progresstemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br>processing<img src="http://www.cnblogs.com/images/dot.gif" alt=""><br></span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="button2"</span><span style="color: #ff0000;"><br>type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"><br>value</span><span style="color: #0000ff;">="cancel"</span><span style="color: #ff0000;"><br>onclick</span><span style="color: #0000ff;">="cancelasyncpostback()"</span><span style="color: #ff0000;"></span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">progresstemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">asp:updateprogress</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">form</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span><span style="color: #000000;"><br></span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></span>
分享到:
评论

相关推荐

    自己做的ASPNETAJAX-AjaxUpdatePanel_UpdateProgress控件例子

    在ASP.NET AJAX中,UpdateProgress控件与AjaxUpdatePanel配合使用,提供了一种在后台处理时显示进度指示器的方式。当AjaxUpdatePanel内的内容正在更新时,UpdateProgress控件会显示在页面上,向用户表明后台操作正在...

    Ajax控件:UpdateproGress

    在ASP.NET AJAX框架中,一个非常重要的组件是`UpdateProgress`控件,它专门用于显示在后台异步处理正在进行时的进度指示器,为用户提供反馈,让他们知道后台操作尚未完成。本文将深入探讨`UpdateProgress`控件的工作...

    ASP.NET-AJAX教程.rar

    第一章:ajax概述 第七章:使用客户端脚本对UpdateProgress编 第二章:使用ScriptManager 第八章:自定义异常处理 第三章:使用ScriptManagerProxy控件 第九章:在母版页中使用UpdatePanel 第四章:使用...

    ASP.NET_AJAX入门系列

    ASP.NET_AJAX入门系列:使用客户端脚本对UpdateProgress编程.doc ASP.NET_AJAX入门系列:在多个UpdatePanle中使用Timer控件.doc ASP.NET_AJAX入门系列:在母版页中使用UpdatePanel.doc ASP.NET_AJAX入门系列:自定义...

    一个基于ASP.NET+C#实现的类似SQL2005中的UpdateProgress进度条控件源码例子

    在C#代码后面,通常不需要对UpdateProgress控件做额外的编程操作,因为它的行为主要由ASP.NET AJAX框架自动管理。不过,如果你需要更复杂的逻辑,例如在特定条件下显示或隐藏进度条,可以通过JavaScript或者C#代码来...

    ASP.NET AJAX

    客户端代码将使用ASP.NET AJAX Library中的PageRequestManager,在UpdateProgress控件中,将添加一个Button,来允许用户取消异步更新,并且使用客户端脚本来显示或者隐藏进度信息,翻译自官方文档。 ASP.NET AJAX...

    ASP.NET AJAX系列46

    **ASP.NET AJAX 入门系列46:使用客户端脚本对UpdateProgress编程** 在ASP.NET AJAX框架中,UpdateProgress控件是一种非常实用的功能,它允许我们在页面进行异步更新(AJAX请求)时显示一个进度指示器,为用户提供...

    Ajax 控件安装包 Timer UpdateProgress ScriptManager UpdatePanel

    1. **Timer**控件:这个控件允许开发者在客户端以定时器的形式触发服务器端事件。例如,如果你希望每隔一段时间自动刷新某些数据,Timer控件就非常适用。通过设置Interval属性,你可以定义控件触发服务器事件的频率...

    Ajax UpdatePanel ScriptManager UpdateProgress 示例

    它引入了对客户端脚本库的引用,如MicrosoftAjax.js和MicrosoftAjaxWebForms.js,这些库提供了对异步调用、页面生命周期事件处理等功能的支持。此外,`ScriptManager`还控制了`UpdatePanel`的行为,比如设置更新模式...

    Ajax控件安装 timer UpdatePanel UpdateProgress ScriptManager

    在本文中,我们将深入探讨如何在ASP.NET Web应用程序中使用Ajax控件,特别是与"timer"、"UpdatePanel"、"UpdateProgress"和"ScriptManager"相关的知识点。这些技术是提高网页交互性和用户体验的关键工具,因为它们...

    ASP.NET Ajax框架教程.doc

    - **Timer控件**:Timer控件在客户端以设定的时间间隔触发事件,可用于定期执行服务端的方法,实现无刷新更新。 - **Ajax验证控件**:新引入的Validators控件扩展了ASP.NET验证功能,允许在Ajax请求中进行客户端...

    ASP_AJAX入门

    ASP.NET AJAX 是微软提供的一种用于构建富客户端Web应用程序的技术,它允许开发者在不刷新整个页面的情况下更新页面的部分内容,从而提升用户体验。AJAX (Asynchronous JavaScript and XML) 的核心是利用JavaScript...

    ASP.NET AJAX核心控件示例

    在这个"ASP.NET AJAX核心控件示例"中,我们将探讨四个关键的控件:ScriptManager、UpdatePanel、UpdateProgress和Timer,它们在实现页面无刷新更新和优化用户体验方面起着重要作用。 1. **ScriptManager**: ...

    ajax基础教程(下).rar

    - **ASP.NET AJAX入门系列(7):使用客户端脚本对UpdateProgress编程**:教程可能涉及如何通过JavaScript控制UpdateProgress的显示和隐藏,以及如何根据特定条件自定义其行为。 - **ASP.NET AJAX入门系列(8):...

    ASP.NET AJAX系列5

    在本系列的第五部分,我们将会深入探讨ASP.NET AJAX中的一个关键组件——UpdateProgress控件。UpdateProgress控件是ASP.NET AJAX Toolkit中的一个工具,它在页面进行异步更新(通常由UpdatePanel触发)时,能够显示...

    ajax Timer UpdatePanel UpdateProgress 示例代码,简单聊天室,源代码

    Ajax Timer控件模拟了JavaScript的setTimeout或setInterval函数,允许在后台定期触发事件,而无需页面整体刷新。在本示例中,Timer可能用于定时检查新消息,从而保持聊天室的实时性。每当计时器触发,它会引发Tick...

    Asp.net+Ajax框架教程 文档+源码

    UpdateProgress控件示例... 8. 在异步更新时显示滚动进度条... 4). Timer控件示例... 9.在客户端无刷新定时执行服务端方法... 5). Ajax中新Validators控件用法示例... 10. Validators控件使用配置示例... ...

    Ajax进度条 控件写

    例如,你可以在后台执行任务时调用客户端脚本来更新进度条。 ```javascript function updateProgress(percentComplete) { $('#progressBar').css('width', percentComplete + '%'); } ``` 5. **触发异步更新**:...

    XML与WEB Service技术(微软):第07章 ASP.NET AJAX.ppt

    - **ScriptManager控件**:是ASP.NET AJAX的核心,管理页面上所有服务器控件的Ajax功能和客户端脚本库。每个页面仅需一个,并应放在form标记内。 - **UpdatePanel控件**:用于实现页面局部更新,通过异步回传更新...

Global site tag (gtag.js) - Google Analytics