Tutorial Ajax Modal Update Progress para UpdatePanel e WebMethods
Após alguma pesquisa, consegui chegar a uma solução única para uso de um Panel como um Update Progress de forma Modal, usando o ModalPopUp tanto para páginas com UpdatePanel quanto para páginas usando WebMethods. Tudo isso muito fácil como contar 1..2..3.. com Ajax.Asp.Net
Tutorial de Ajax Modal Update Progress para páginas com UpdatePanel e WebMethods.
O controle UpdateProgress que faz parte do Ajax tem algumas desvantagens: Ele fica estático em um ponto da tela, que dependendo do tamanho da página pode acabar ficando invisível para o usuário. Outro ponto é que o mesmo permite que o usuário clique em outros controles enquanto é feito o postback. Também o UpdateProgress não funciona com WebMethods.
Po isso, resolvi pesquisar e criar uma solução única e que fosse Modal, ou seja, o usuário não consegue clicar em outros controles enquanto o postback é feito. Para isso fiz uma combinação de ModalPopup do AjaxControlTookit com os métodos do PageRequestManager.
Links: http://ajax.asp.net
Código inicial, para ambos os tipos de página:
1 - Inserir os componentes necessários ao ModalPopup, que irá ser exibido no postback, no final da página dentro da tag Form.
<cc1:ModalPopupExtender ID="popAguarde" runat="server"
PopupControlID="pnAguarde" BackgroundCssClass="modalBackground"
BehaviorID="popAguarde" />
<asp:Panel ID="pnAguarde" runat="server" Height="27px" Width="20px">
<img alt="Aguarde, carregando..." src="images/ajax-loader.gif" height="32" /></asp:Panel>
- Não esqueça do registro do AjaxControlToolkit se já não tiver.
2 - Adicione o css responsável por bloquear os controles na seção head do html.
- Conteúdo de StyleSheet.css
3 - Para páginas com UpdatePanel (sem o uso de UpdateProgress)
3.1 - Adicionar script com os handles BeginRequest e EndRequest sempre após o ScriptManager.
<script id="Pop" language="javascript" type="text/javascript">
$find("popAguarde").show();
$find("popAguarde").hide();
- Remova o UpdateProgress caso tenha colocado.
4 - Para páginas que usam WebMethods
3.2 - Adicione no script com os métodos que executam o WebMethod os métodos Show e Hide do ModalPopup.