如何在 MVC 视图之间显示“正在加载”答案

【问题标题】：How to show 'loading' between MVC Views如何在 MVC 视图之间显示“正在加载”
【发布时间】：2015-05-27 18:34:50
【问题描述】：

我有一个视图，其中包含一个由 jquery 生成的充满数据的表。在该表中，其中一列具有到另一个视图（完全独立的控制器）的链接（标准<a href="">）。经常单击此链接可能会导致加载时间过长，因为正在加载的视图在将结果显示到屏幕之前可能需要处理大量数据。

有没有办法在点击其中一个链接时获得“加载微调器”，直到新屏幕加载？

同样，这是一个 View 中的标准超链接 (href)，它链接到一个完全独立的 View、独立的控制器。

【问题讨论】：

如果您不使用 ajax 加载其他视图，那么您不能。如果您使用 ajax 加载，那么您只需要在将 html 加载到其中之前，在 div 中放置一个微调器。
视图是完全独立的页面 - 两个 .aspx 视图。当我点击链接时，我们称它为“Page1.aspx”，我不再真正on Page1.aspx...即使它位于浏览器中。我实际上在 Page2.aspx 上，等待数据。遗憾的是，浏览器不知道这一点。
对于我的一些网站，我只关心在下一页加载之前向用户显示“请稍候”消息，我使用 jQuery Block UI 插件。如果单击该链接，我只需调用 blockUI 函数来显示自定义的等待消息。如果您有兴趣，我可以在答案中提出一些内容以显示更多细节。只是一个想法，如果这就是你想要做的。
@BKirby 实际上，这听起来很棒。我很想看看。
我刚刚注意到（因为我们实际上还没有在网站的任何地方使用它）我有 jquery.blockUI.js！所以，我猜你的方法就像让 href 成为 <a href="#" onClick="block('/myPage/' + variableId + )">Go To New Page</a> ？

标签： jquery asp.net-mvc

【解决方案1】：

这是来自我的一个网站的示例，它带有一个提交按钮，只是在点击时阻止了 UI。下图显示了用户随后看到的内容。收集数据后，新页面会被加载并呈现。

<input type="submit" value="Search" name="searchparty">

<script>
//submit search, display loading message
    $('input[type = submit]').click(function(){
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000',
            opacity: .6
        } }); 
    });
</script>

【讨论】：

使用 blockUI 是救命稻草！非常感谢您指出这一点。今天早上我已经将它合并到了几页中，我对它非常着迷。 :)
太棒了，很高兴听到！ :)
我试过这个。但是“加载中请稍候”文本没有显示@B Kirby

【解决方案2】：

我在 Javascript 事件中使用了以下内容来在页面加载时显示加载图像：

$(window).on('load', function () {
  $(".loadingDiv-parent").fadeOut("slow");
});
$(window).on('beforeunload', function () {
  $(".loadingDiv-parent").fadeIn(50);
});

CSS 正确显示图像：

/*  LOADING SPINNER  */
.loadingDiv-parent {
   position: fixed;
   text-align: center;
   width: 100%;
   height: 100%;
   z-index: 999998;       
}

.loadingDiv {
   position: fixed;
   text-align: center;
   top: 40%;
   left: 45%;
   z-index: 999999;
}

.loadingDiv .loading-image {
   display: block;
   margin: 25px 75px;
}

然后在视图中：

<div class="loadingDiv-parent">
  <div class="loadingDiv">
    <div class="card border-success">
        <div class="card-header">
            <h3 class="panel-title">Loading ... Please Wait</h3>
        </div>
        <div class="card-body">
            <i class="Your_icon loading-image" style="font-size:7em;" aria-hidden="true"></i>
            <span id="panelclose_btn"></span>
        </div>
    </div>
</div>

我使用Font Awesome 图标显示为加载微调器图像。

【讨论】：