c# - JQuery 对页面加载的影响

Question

我有一个页面在页面加载中做了一些耗时的事情（实际上就是这样）。我想向用户展示一个体面的消息，然后在过程完成后用实际结果替换它。

我尝试的每一件事都让 UI 在漫长的过程结束后呈现，这无济于事。我尝试使用 UpdatePanel 来渲染页面，然后从客户端触发更新，但它也不起作用。

有人可以告诉我如何做到这一点吗？

谢谢

Answer 1

我建议您执行以下操作：

1. 创建一个新页面，该页面仅在加载时显示您想要显示的任何内容。加载图形或其他。
2. 通过 AJAX 调用您当前的页面并让它返回success或failure您想要返回到第 1 页的任何内容。
3. ajax 调用返回后，您可以将加载图标或 html 替换为您的成功图形。

HTML页面1： <div id="content"><img src="images/loading.png" alt="loading" /></div>

jQuery：

$.ajax({
    type: "GET",
    timeout: 30000,  // set accordingly
    url: "/some/url", // this is the page that will do all the work
    beforeSend: function() {
      // do some stuff
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("An error has occurred making the request: " + errorThrown); // if there was an issue
    }, 
    success: function() {
    $('#content').html('Success!!'); // change icon or what you need to do.
    }
    });

我无法让 UI 正确格式化代码。jQuery ajax 参考：http ://api.jquery.com/jQuery.ajax/

Answer 2

如果您使用的是 ASP.NET WebForms，您可以使用 UpdatePanel 和 UpdateProgress 在加载内容时显示图像。只需将 updateprogress 控件指向 updatepanel 控件即可。UpdateProgress 将包含加载图像和更新面板您的主要内容和控件。然而，UpdateProgress 和 UpdatePanel 是微软编写的一个丑陋的工具，我强烈推荐使用 jQuery 和它真正的 AJAX 调用（虽然它会涉及更多的工作）

Answer 3

您可以使用jQuery BlockUI 插件- 在您准备好的处理程序中，您将阻止、处理然后解除阻止。

如果有大量数据流向客户端，在准备好处理程序启动并阻塞页面之前可能会有一段不舒服的时间，所以另一种策略是有一个<div>覆盖页面（你的“请等待，加载” 消息），您隐藏在准备好的处理程序的末尾。