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

    <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>