WebSurfer's Home

トップ > Blog 1   |   Login
Filter by APML

ModalPopup でプログレス表示

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>

Tags: , ,

AJAX

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  December 2019  >>
MoTuWeThFrSaSu
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

View posts in large calendar