[转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程
生活随笔
收集整理的這篇文章主要介紹了
[转]MSDN - 在客户端脚本中为 UpdateProgress 控件编程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文轉自： http://msdn.microsoft.com/zh-cn/library/bb386518.aspx
在本教程中，將通過編寫 ECMAScript (JavaScript) 代碼來擴展具有客戶端行為的 UpdateProgress 控件。
您的代碼將使用屬于 Microsoft AJAX Library 的一部分的 PageRequestManager 類。
在 UpdateProgress 控件中，您將添加一個使用戶能夠取消異步回發的按鈕。
作為此任務的一部分，您將使用客戶端腳本來顯示或隱藏進度消息。
在客戶端腳本中取消異步回發
最終代碼1：
<%@?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 控件编程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu source
- 下一篇： Javascript在页面加载时的执行顺