Wie Sie eine JavaScript-Funktion vor dem Postback von asp.net-Schaltfläche

Question

ausführen Ich habe eine ASP.NET-Schaltfläche, die Run-Server ist, gibt es eine Funktion, die Postback der Schaltfläche onclick.

Wie kann ich ein "loading ..." Wort auf der Seite anzeigen, bevor Sie zur Serverprozedur gehen?

Answer 1

Betrachten Sie OnClientClick, können Sie einen Anruf zu einer js-Funktion hinzufügen, oder inline JS dort.

Oder Sie können die Schaltfläche mit JQuery verbinden und einen modalen Dialog mit einem asynchronen Callback anzeigen.

Answer 2

Verbinden Sie OnClientClick mit einer JavaScript-Funktion, die Wahr oder Falsch zurückgibt. Das Postback tritt auf, wenn es wahr zurückgibt, sonst wird es abgebrochen.

<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

Sie könnten das Ereignis onsubmit Ihres Seitenformulars verwenden. Dies geschieht, bevor das Formular abgeschickt wird, und ermöglicht es Ihnen, die Übermittlung des Formulars zu stoppen, wenn Sie das Blubbern abbrechen müssen. Falls Sie dies benötigen, werden die letzten 2 Zeilen in diesem Beispiel den Browser blubbern deaktivieren.

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

Die obige JavaScript ist nur zum Beispiel, aber diese (meiner Meinung nach) ist die bevorzugte Art und Weise zu tun, was Sie suchen. Es sieht so etwas wie diese (in der Mitte des Bildschirms):

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

Dies wird für jedes Element arbeiten, das ein Postback wirft, so dass Sie nicht haben Rufen Sie ShowLoading() manuell auf jedem Button oder Formularelement auf, das Sie möglicherweise auf Ihrer Seite haben. Ich würde den Inhalt von ShowLoading() durch einige echte Ladefunktionen ersetzen und nicht nur den Beispielcode, den ich zusammen geworfen habe.