ASP.NET - Hiển thị thông báo khi trang đang tải

Question

Tôi có một trang thực hiện tác vụ dài (10 đến 15 giây) trong phương thức page_load.

Tôi có mã javascript phía máy khách sẽ hiển thị gif động "tải trang" phong nha cho người dùng.

Tôi có thể gọi phương thức JavaScript từ mã sau, để hiển thị gif động "tải trang", tuy nhiên, tác vụ dài hạn đang treo lên giao diện người dùng sao cho hình động không thực sự hiển thị cho đến khi hoàn thành nhiệm vụ dài hạn, điều đó hoàn toàn trái ngược với những gì tôi muốn.

Để kiểm tra điều này, trong phương thức page_load của tôi, tôi thực hiện cuộc gọi đến phương thức JavaScript để hiển thị gif động. Sau đó, tôi sử dụng Thread.Sleep (10000). Điều gì xảy ra là gif động không hiển thị cho đến sau khi Thread.Sleep hoàn tất.

Rõ ràng tôi đang làm điều gì đó không chính xác.

Mọi lời khuyên sẽ được đánh giá cao.

Cảm ơn.

Chris

Dưới đây là một ví dụ về code-behind:

protected void Page_Load(object sender, EventArgs e) 
    { 
     ClientScript.RegisterStartupScript 
       (GetType(), "Javascript", "javascript: ShowWaitIndicator(); ", true); 

     Response.Flush(); 

     Thread.Sleep(10000); 
    } 

Answer 1

Nghe có vẻ như onload Javascript đang được hiển thị sau khi quá trình onload ASP. Bạn có thể muốn trì hoãn hành động tốn thời gian của mình cho Page.LoadComplete - theo cách này, người dùng của bạn sẽ thấy hiển thị Javascript trước khi hoạt động chuyên sâu xảy ra.

Sau đó, bạn sẽ cập nhật nội dung trang nếu cần sau khi hàm hoàn tất.

Bạn có thể cung cấp ví dụ về mã không?

Answer 2

Tôi đã thực hiện việc này bằng cách đặt bộ hẹn giờ trên trang. Sau khi đánh dấu đầu tiên của nó vô hiệu hóa nó và chạy nhiệm vụ của bạn.

<asp:Timer runat="server" id="UpdateTimer" interval="500" ontick="UpdateTimer_Tick" /> 

Tôi đặt điều này trong UpdatePanel cho các nhu cầu của mình. Tôi không chắc chắn những gì sẽ làm việc tốt nhất cho bạn. Sau đó, trong mã của bạn đằng sau ...

Protected Sub UpdateTimer_Tick(ByVal sender As Object, ByVal e As EventArgs) 
     UpdateTimer.Enabled = False 

     ' run method here 

    End Sub 

Answer 3

Nguyên nhân là do sự kiện cháy Page.Load trước bất kỳ phản ứng đã được gửi cho khách hàng; vì vậy bất kỳ hướng dẫn nào cho máy khách (chẳng hạn như thực thi javascript của bạn) không xảy ra cho đến khi máy khách nhận được phản hồi.

Vì vậy, việc đặt tác vụ dài trong Page.Load sẽ không có tác dụng bạn muốn. Điều này nghe có vẻ giống như một trường hợp sử dụng AJAX hoặc một số hình thức thu hồi dữ liệu không đồng bộ khác. Trong trường hợp này, trang mà bạn quay trở lại máy khách sẽ không cho biết kết quả của nhiệm vụ dài hạn của bạn - vì vậy trang của chính nó (với nó là spinner) tải nhanh, sau đó yêu cầu máy khách yêu cầu dữ liệu; khi dữ liệu đã sẵn sàng (10-15 giây sau), bạn có thể cập nhật DOM trong ứng dụng khách với kết quả.

Answer 4

Tôi sẽ tránh gọi JavaScript của bạn từ mã sau.

Thay vào đó, hãy sử dụng thư viện jQuery.Bạn có thể kích hoạt mã của bạn được gọi ngay sau khi DOM được nạp bằng cách sử dụng đoạn mã sau:

$(document).ready(function() { 
    //Call your JavaScript method here. 
}); 

Bạn cũng sẽ cần phải thêm jQuery để trang của bạn, đó là một kịch bản duy nhất bao gồm từ Microsoft CDN. Thêm này để đánh dấu của bạn để làm điều này:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 

này sẽ gọi GIF JavaScript phương pháp ngay lập tức khi trang web được tải và bạn có thể loại bỏ Thread.Sleep của bạn. Tôi giả sử phương thức GIF động của bạn sẽ tự động ẩn hình ảnh sau 10-15 giây.

Answer 5

Ví dụ sau sẽ hoạt động cho bạn. chỉ cần đặt trong Sự kiện tải trang.

Response.Write("<div id=\"loading\" style=\"position:absolute; width:100%; text-align:center; top:300px;\"><img src=\"http://www.cse.iitk.ac.in/users/singhroh/images/loading.gif\" border=0></div>"); 
    Response.Flush(); 
    System.Threading.Thread.Sleep(5000);   
    Response.Write("script>document.getElementById('loading').style.display='none';</script>"); 

Answer 6

Dùng trường học cũ, bạn có thể chuyển chế độ đệm. Với tính năng đệm (mặc định), trang được tạo trong toàn bộ phần trước khi nó được gửi tới máy khách. Nếu bạn chuyển đổi đệm, nó được gửi khi nó được tải, vì vậy bạn có thể gửi html để chuyển tải đồ họa trên, làm nhiệm vụ chạy dài của bạn, sau đó gửi một số javascript để tắt nó đi.