如何展示＆＃39; loading＆＃39;在MVC观看之间

Question

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

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

同样，这是一个视图中的标准超链接（href），链接到一个完全独立的View，单独的控制器。

Answer 1

以下是来自我的某个网站的示例，其中包含提交按钮，只需在点击时阻止用户界面。下图显示了用户随后看到的内容。收集数据后，将加载并显示新页面。

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

Answer 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图标来显示正在加载的微调器图像。