当后端处理某些内容时，如何添加"Loading icon"并使背景变暗？

Question

我是 asp.net 的新手，javascript。

我在使用 MVC5 Razor 引擎实现的 ASP.NET 应用程序中的页面中有多个视图。每个视图看起来像一个面板，它们是 cshtml 文件。不是 aspx。每个面板都有单独的提交按钮，它们通过Ajax.BeginForm选项连接到自己的API。

我想知道如何在屏幕中央添加处理/加载图标并使背景变暗，直到提交完成并返回到我的视图？

@using (Ajax.BeginForm("FilterReport", "Report", new AppAjaxOptions()
{
    ExtendOnSuccess = "ReportView.onFilteringCompleted(data)",
    UpdateTargetId = "filterContent",
}))
{
//some <div> .... </div> here
<button type="submit" class="btn btn-primary">@LanguagesFacade.GetValue(DictionaryKey.Filter)</button>
}

API 的签名如下所示：

public PartialViewResult FilterReport(ReportFilterViewModel reportFilterViewModel)

请让我知道如何在同时执行此 API 期间在屏幕上实现加载图标？

提前谢谢。

Answer 1

下面是一个示例片段。这应该对您有所帮助

//for demo
$('button').on('click', function() {
  showLoadingIcon();  //call this when you want to show loading icon
});
//----------------------------Core functionality----------------------------------//
function showLoadingIcon() {
  var loadingImage = '<div class="loading-div">' +
    '<span class="loading-icon " style="opacity:none;">' +
    '<i class="fa fa-refresh fa-2x fa-spin" style="margin-left: 47px;"></i>' +
    '</span></div>';
  $('body').append(loadingImage);
}
function hideLoadingIcon() {       //call this when you want to hide loading icon
 $('#loading_icon_div').remove();
}

div {
  background-color: pink;
  width: 400px;
  height: 400px;
}
.loading-div {
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.5);
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0px 0px -50px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button>show loading icon..</button>
  some random text goes here..
</div>