初始表单请求/重定向显示页面加载答案

【问题标题】：Initial form request / redirect show page loading初始表单请求/重定向显示页面加载
【发布时间】：2015-02-17 13:42:31
【问题描述】：

我正在开发一个 asp.net 网络表单项目，该项目有一个 site.master 页面以及其他使用该站点主页面的 aspx 页面。

我在网站主服务器上有一个 div：

<div id="msg" class="dialog">loading, please wait...</div>

它的完整上下文（站点管理员）是这样的（注意我在这里保持简单）：

<body id="pageContainer">
    <div id="msg" class="dialog">loading, please wait...</div>
    <div id="pageBody">
    <form id="formMaster" runat="server">
    </form>
    </div>
</body>

class=对话框是这样定义的：

.dialog {
    display: none;
    width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

基本上，当我想跨请求显示“正在加载，请稍候”时，我会使用它，并通过 jquery 打开/关闭它：

     // Simulate some time before everything's loaded
     setTimeout(function () {
         $("#msg").fadeOut(function () {
             // Wait for #msg to fade out before fading in #pageBody
             $("#pageBody").animate({
                 opacity: "1.0"
             }, 1);
         });
     }, 1);

这是在$(document).ready() 内部完成的。我需要模拟一些时间，然后使 pageBody div 可见（使用 opacity 属性）...这似乎工作正常，但最初说超链接点击/提交将用户重定向到另一个页面加载不显示马上...这需要相当长的时间才能让用户感到困惑。

例如，如果我有一个简单的超链接页面（该页面包含大量数据库数据）...最初单击该超链接会显示旋转圆圈（在 chrome 选项卡中），然后最终将您带到该页面。那时我的加载 div 出现，最后淡出并显示页面。我希望我的加载 div 可以立即出现，以便用户知道正在发生一些事情。我们的大多数用户对网络不太了解，所以他们甚至不注意浏览器的旋转轮，他们只是认为页面没有响应（我不怪他们，这可能很棘手）。

我该怎么做才能让这个加载，请稍候... div 几乎是瞬间出现的？或者我可以吗？

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

是的，你可以，使用 Javascript/jQuery 和 begin-end 请求。

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginLoading);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endLoading);

function beginLoading(sender, args) {
    var LoadingDiv = $find(LoadingDiv);
    if (LoadingDiv!= null) {
        LoadingDiv.show();
    }
}

function endLoading(sender, args) {
    var LoadingDiv = $find(LoadingDiv);
    if (LoadingDiv != null) {
        LoadingDiv.hide();
    }
}

【讨论】：

什么是 LoadingDiv 我将我的 div id 作为字符串传递给它吗？
我将 LoadingDiv 作为占位符放入其中，但实际上它可以是您想要控制的任何元素 ID。所以也许，您可以根据要求显示和隐藏加载图像（如旋转的 GIF）。
这是在我的 site.master 中还是在每个页面上？
嗯，这由你决定。如果您希望这是一个站点范围的活动，那么是的，母版页将是一个很好的地方。如果要将其限制为一页，则可以将其放在页面本身上。如果它是一个asp元素，请确保获取html元素的客户端ID（不同于ID）。
使用我的代码我只是 $find(msg) 吗？那是我用来显示加载进度的 div...