Cómo ejecutar una función de javascript antes de la devolución de datos del botón asp.net

Question

Tengo un botón asp.net que es el servidor runat, hay una función que maneja esa devolución de datos de botón al hacer clic.

¿Cómo puedo mostrar una palabra "loading ..." en la página antes de ir al procedimiento del servidor?

Answer 1

Mira OnClientClick, puedes agregar una llamada a una función js, o JS en línea allí.

O puede conectar el botón con JQuery y mostrar un diálogo modal con una devolución de llamada asíncrona.

Answer 2

Conecta OnClientClick a alguna función de javascript que devuelve verdadero o falso. La devolución de datos se produce si devuelve verdadero, de lo contrario, se cancela.

<asp:Button id="MyButton" runat="Server" Text="Close" 
         OnClientClick="return PromptClose();"/> 


    <script type="text/javascript"> 
    function PromptClose(){ 
     return prompt("Do you really want to close this window?"); 
    } 
    </script> 

Answer 3

Se podría utilizar el evento onsubmit de la forma de su página. Esto sucede antes de que se envíe el formulario, y le permitirá detener el envío del formulario si lo necesita al cancelar el burbujeo. En caso de que lo necesite, las últimas 2 líneas en este ejemplo cancelarán el burbujeo en los navegadores.

<form runat="server" onsubmit="ShowLoading()"> 
</form> 
<script type="text/javascript"> 
    function ShowLoading(e) { 
     var div = document.createElement('div'); 
     var img = document.createElement('img'); 
     img.src = 'http://www.oppenheim.com.au/wp-content/uploads/2007/08/ajax-loader-1.gif'; 
     div.innerHTML = "Loading...<br />"; 
     div.style.cssText = 'position: fixed; top: 30%; left: 40%; z-index: 5000; width: 222px; text-align: center; background: #fff; border: 1px solid #000'; 
     div.appendChild(img); 
     document.body.appendChild(div); 

     // These 2 lines cancel form submission, so only use if needed. 
     window.event.cancelBubble = true; 
     e.stopPropagation(); 
    } 
</script> 

El código JavaScript anterior es sólo, por ejemplo, sin embargo, esto es (en mi opinión) la mejor forma de hacer lo que estás buscando. Se ve algo como esto (en el centro de la pantalla):

Cargando ...
http://www.oppenheim.com.au/wp-content/uploads/2007/08/ajax-loader-1.gif

Esto funcionará para cualquier elemento que plantea una devolución de datos, por lo que no tienen para llamar manualmente al ShowLoading() en cada botón o elemento de formulario que pueda tener en su página. Reemplazaría el contenido de ShowLoading() con alguna funcionalidad de carga real y no solo el código de ejemplo que lancé.