How to create a "Processing" modal window using UpdateProgress and ModalPopup ASP.net AJAX controls - Português

by ambarreira 7. janeiro 2010 00:00

//Incluir as referencias ASP.net AJAX controls
// do AJAX e Toolkit
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

// Incluir ScriptManager tag na página (.aspx, .ascx, etc)
<asp:ScriptManager ID="ScriptManager1" runat="server" />

// Incluir UpdateProgress Control dentro de Panel Control
// e da ModalPopupExtender Control
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress">
    <asp:UpdateProgress ID="UpdateProg1" DisplayAfter="0" runat="server">
      <ProgressTemplate>
        <div style="position: relative; top: 30%; text-align: center;">
          <img src="loading.gif" style="vertical-align: middle" alt="Processing" />
          Processing ...
        </div>
      </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" />

São necessárias duas fuções javascript para executar os pedidos do AJAX.

//JavaScript code que pode ser incluido em jsUpdateProgress.js
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args){
    // shows the Popup
    $find(ModalProgress).show();
}
function endReq(sender, args) {
    // shows the Popup
    $find(ModalProgress).hide();
}

Nas páginas asp.net deve ser clocado na head o seguinte código, para que seja incluido o javascript,