javascript - 在等待 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("正在加载...");

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

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

这使用了 jQuery 顺便说一句，但如果你不使用它，我相信你也可以用普通的旧 JavaScript 来完成它。