Come eseguire una funzione javascript prima del postback del pulsante asp.net

Question

Ho un pulsante asp.net che è il server runat, c'è una funzione che gestisce il postback del pulsante onclick.

Come posso visualizzare una parola "loading ..." nella pagina prima di passare alla procedura del server?

Answer 1

Guardare OnClientClick, è possibile aggiungere una chiamata a una funzione js o JS in linea lì.

Oppure è possibile collegare il pulsante con JQuery e visualizzare una finestra di dialogo modale con una richiamata asincrona.

Answer 2

Collegare a OnClientClick una funzione javascript che restituisce true o false. Il postback si verifica se restituisce true, altrimenti viene cancellato.

<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

È possibile utilizzare l'evento onsubmit della forma della tua pagina. Ciò accade prima che il modulo venga inviato e ti consentirà di interrompere l'invio del modulo se necessario annullando il bubbling. Nel caso in cui sia necessario, le ultime 2 righe in questo esempio annulleranno il bubbling tra i browser.

<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> 

Il JavaScript di cui sopra è solo per esempio, tuttavia questo è (a mio parere) il modo preferito per fare quello che stai cercando. Sembra qualcosa di simile (al centro dello schermo):

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

Questo funziona per qualsiasi elemento che solleva un postback, in modo da non avere per chiamare manualmente ShowLoading() su ogni pulsante o elemento del modulo che potresti avere sulla tua pagina. Sostituirei il contenuto di ShowLoading() con alcune funzionalità di caricamento reali e non solo il codice di esempio che ho inserito.