lunes, 14 de diciembre de 2009

ASP.NET: Deshabilitar un botón durante un postback

Los usuarios más desesperados tienen la manía de pulsar varias veces un botón cuando éste tarda en responder. O hay otros usuarios que suelen hacer doble click en todo tipo de botones. Esto puede hacer que tu web en Asp.net no funcione bien, ya que podría realizar varias veces la misma acción.

Solucionar esto en una página con AJAX es muy sencillo mediante javascript usando este código:

//Guardo el último elemento que ha causado un postback
  var postBackElementID;

  //Guardar estado del "PostbackElement"
  var peCursorStyle;
  var peDisabled;
  var peLinkTarget;
  var peLinkClick;

  //Obtener referencia a PageRequestManager
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  
  //Añadir eventos de PageRequestManager
  prm.add_initializeRequest(InitializeRequest);
  prm.add_endRequest(EndRequest);
    
  function InitializeRequest(sender, args){
    //Obtengo el elemento que ha causado el postback
    postBackElementID = sender._postBackSettings.sourceElement != undefined ? sender._postBackSettings.sourceElement.id : "";
    
    //Deshabilito el botón que ha causado el postback
    if(postBackElementID != "" && $(postBackElementID)){
        var postBackElement = $(postBackElementID);
    
        peCursorStyle = postBackElement.style.cursor;
        peDisabled = postBackElement.disabled;
        postBackElement.style.cursor = 'wait';
        postBackElement.disabled = true;
        
        if(postBackElement.tagName == 'A'){
            peLinkTarget = postBackElement.href;
            peLinkClick = postBackElement.onclick;
            postBackElement.href = 'javascript:void(0);';
            postBackElement.onclick = new Function('return false;');
        }
    }
  }
  
  function EndRequest(sender, args){
    //Habilito el botón que ha causado el postback (si estaba habilitado)
    if(postBackElementID != "" && $(postBackElementID)){
        var postBackElement = $(postBackElementID);
    
        postBackElement.style.cursor = peCursorStyle;
        postBackElement.disabled = peDisabled;

        if(postBackElement.tagName == 'A'){
            postBackElement.href = peLinkTarget;
            postBackElement.onclick = peLinkClick ? peLinkClick : "javascript:void(0);";
        }
    }
  }

InitializeRequest se ejecutará al inicio del postback, mientras que EndRequest lo hará al finalizar éste. En el primero deshabilitamos el control y guardamos su estado. En el segundo reestablecemos el estado de dicho control.

Nota: En este ejemplo se usa la librería prototype. Si no la estás usando, cambia $ por document.getElementById.

No hay comentarios:

Publicar un comentario