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.
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:ModalPopupExtender ID="popAguarde" runat="server"
TargetControlID="Button1"
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.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
2 - Adicione o css responsável por bloquear os controles na seção head do html.
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
- Conteúdo de StyleSheet.css
.modalBackground
{
background-color: whitesmoke;
filter: alpha(opacity=70);
opacity: 0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
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">
<!--
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)
function BeginRequestHandler(sender, args)
{
$find("popAguarde").show();
}
function EndRequestHandler(sender, args)
{
$find("popAguarde").hide();
}
// -->
</script>
- 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.
- Onde é chamado o WebMethod: $find("popAguarde").show();
- Onde é retornado o WebMethod: $find("popAguarde").hide();
- Exemplo completo:
<script id="Pop" type="text/javascript">
<!--
function cApagarAgenda(ID)
{
$find("popAguarde").show();
PageMethods.sApagarAgenda(ID, onCompleteApagarAgenda);
}
function onCompleteApagarAgenda(result)
{
$find("popAguarde").hide();
alert(result);
}
// -->
</script>
Ricardo Andreatto
http://www.favoritosonline.com.br