Làm thế nào để chạy một chức năng javascript trước khi postback của nút asp.net

Question

Tôi có một nút asp.net đó là máy chủ runat, có một chức năng xử lý mà postback của nút onclick.

Làm cách nào để hiển thị từ "loading ..." trong trang trước khi chuyển sang quy trình máy chủ?

Answer 1

Nhìn vào OnClientClick, bạn có thể thêm lệnh gọi hàm js hoặc JS nội tuyến ở đó.

Hoặc bạn có thể kết nối với nút bằng JQuery và hiển thị hộp thoại phương thức có gọi lại không đồng bộ.

Answer 2

Kết nối OnClientClick với một số chức năng javascript trả về đúng hoặc sai. Các postback xảy ra nếu nó trả về true khác nó bị hủy bỏ.

<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

Bạn có thể sử dụng sự kiện onsubmit của biểu mẫu trên trang của mình. Điều này xảy ra trước khi biểu mẫu được gửi và sẽ cho phép bạn ngừng gửi biểu mẫu nếu bạn cần bằng cách hủy bong bóng. Trong trường hợp bạn cần điều này, 2 dòng cuối cùng trong ví dụ này sẽ hủy bong bóng trên các trình duyệt.

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

JavaScript ở trên chỉ là ví dụ, tuy nhiên đây là cách ưa thích để thực hiện những gì bạn đang tìm kiếm. Nó trông giống như thế này (ở trung tâm của màn hình):

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

này sẽ làm việc cho bất kỳ yếu tố đó đặt ra một PostBack, vì vậy bạn không cần phải để gọi thủ công ShowLoading() trên mọi nút hoặc phần tử biểu mẫu mà bạn có thể có trên trang của mình. Tôi sẽ thay thế các nội dung của ShowLoading() bằng một số chức năng tải thực và không chỉ là mã ví dụ mà tôi đã ném cùng nhau.