如何在等待 MVC 调用返回时为新选项卡显示加载图像或进度条？

Question

我在文件 generateReport.cshtml 中有一个 HTML 按钮，它打开一个新选项卡来显示报告：

<div>
   <a id="btnPreviewPDF" class="btn" href="#" title="Preview Report" target="_blank">Preview</a>
</div>

这将在 reportController.cs 中启动一个 MVC GET，它创建要由呈现报告的 html 使用的模型：

[GET("PreviewPdf/{id:int}/{reportDate}")]
        public virtual ActionResult PreviewReport(int id, string reportDate)
        {            
            var helper = new ReportHelper(client);
            var model = helper.GenerateViewModelForPreviewReport(id, reportDate);

            return View(model);
        }

然后在viewReport.cshtml中使用上面的模型作为模型来展示数据，例如：

@model Reports.ReportHelper

<div class="sub-header-text primary-orange text-bold">
   Summary: @Model.ReportDate.ToString("MMMM") @Model.ReportDate.ToString("yyyy")
</div>

等待 PreviewReport 在 reportController.cs 的 GET 中返回可能需要 30 多秒才能运行，因此我想在通过单击“预览”按钮创建的新选项卡上显示加载图像/gif。 由于此 GET 命令在 viewReport.cshtml 中的 HTML 代码之前运行，因此我无法找到执行此操作的方法。 我想在该新选项卡上显示加载图像，并防止浏览器抛出认为页面没有响应的消息。 任何人都可以帮助我或将我链接到一些信息吗？ 谢谢！

Answer 1

您可以在页面上创建一个带有 id 的空 div。 在ajax调用之前，设置html

$("#loadingDiv").html("Loading...");

在 ajax 调用成功后，从 div 中删除 html

$("#loadingDiv").html("");

这使用 jQuery btw，但如果你不使用它，我相信你也可以用普通的旧 javascript 来完成。

Answer 2

这都是关于状态的。 当您第一次加载页面时，一切都在加载。 因此，默认情况下向用户显示您正在加载页面。 然后在加载完成后，选择html标记并向其添加一个类以向您的页面指示加载已完成。 根据加载和完成状态设置您的样式。

下面的例子：

 console.log('loading'); setTimeout(function() { document.documentElement.classList.add('finished'); console.log('finished loading'); }, 5000);

 .loader { display: flex; align-items: center; transition-property: opacity, visibility; transition-duration: 1s; transition-timing-function: ease-in-out; } .loader::before, .loader::after { content: ""; display: block; background: #000; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; animation: pulse 2s normal infinite; } .loader::after { animation-delay: 200ms } html.finished .loader { opacity: 0; visibility: hidden; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 75%, 100% { transform: scale(1); } }

 <div class="loader"> </div>

Answer 3

另一种方法是使用不显眼的 AJAX。 您只需要从 Nuget 包管理器安装 Microsoft jQuery unobtrusive AJAX。

下载一个正在加载的 GIF。

然后，在您看来，调用以下代码：

@{using (Ajax.BeginForm("Create", "ControllerName", null, new AjaxOptions()
     {
          HttpMethod = "POST",
          LoadingElementId = "divName",
          // ...
     }
}))
{
     // Html code goes here
     <div id="divName" class="col-md-12 text-center align-self-center" style="display:none;">
         <img src="~/Images/LoadingCircle.gif" alt="Loading..." />
     </div>
}

此 div 将仅在加载时显示