by WebSurfer
29. May 2011 17:43
AJAX による部分ページ更新のプログレスを表示するには、普通、UpdateProgress コントロールを利用しますが、代わりに ModalPopup を使った例を書いてみました。
ModalPopup はクライアントのコードで表示／非表示にできますので、リクエストの開始と完了のイベントがクライアント側で取得できれば、そのイベントハンドラでコントロールできます。
イベントは PageRequestManager クライアントオブジェクトに用意されている beginRequest と endRequest を使っています。PageRequestManager クラスの詳しい説明は MSDN ライブラリ を参照してください。
以下のコードは、実際に動かして試せるよう 実験室 にアップしましたので、興味のある方は試してみてください。
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp" %>
<!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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>WebSurfer's Page - 実験室</title>
<script type="text/javascript">
//<![CDATA[
var manager;
function pageLoad(sender, args) {
if (args.get_isPartialLoad() === false) {
manager =
Sys.WebForms.PageRequestManager.getInstance();
manager.add_beginRequest(OnBeginRequest);
manager.add_endRequest(OnEndRequest);
}
}
function OnBeginRequest(sender, args) {
var modalPopupBehavior =
$find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function OnEndRequest(sender, args) {
var modalPopupBehavior =
$find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
function AbortPostBack() {
if (manager.get_isInAsyncPostBack()) {
manager.abortPostBack();
}
}
//]]>
</script>
<style type="text/css">
/*Modal Popup*/
.modalBackground {
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
#UpdatePanel1 {
width: 200px;
height: 200px;
border: gray 2px solid;
position: relative;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.progress {
height: 50px;
width: 400px;
background-color: White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
UpdatePanel
<hr />
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1"
runat="server"
Text="Refresh Panel"
OnClick="Button_Click" />
<br /><br />
［Refresh Panel］ボタンをクリックすると、
5 秒後にこのパネル内が更新されます。
その間 ModalPopup が表示されます。
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="DummyButton"
runat="server"
style="display: none;" />
<asp:Panel ID="Panel1"
runat="server"
CssClass="progress">
<asp:Image ID="Image1"
runat="server"
ImageUrl="~/img/grid-loading.gif" />
非同期ポストバックで更新中です・・・
<input type="button"
value="中止"
onclick="AbortPostBack()" />
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
TargetControlID="DummyButton"
BehaviorID="programmaticModalPopupBehavior"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground" />
</form>
</body>
</html>