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

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

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

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

@model Reports.ReportHelper
总结：@Model.ReportDate.ToString（“MMMM”）@Model.ReportDate.ToString（“yyyy”）

---

等待PreviewReport在获取reportController.cs时返回可能需要30秒以上的时间才能运行，因此我希望在通过单击“预览”按钮创建的新选项卡上显示加载图像/gif。由于这个GET命令是在viewReport.cshtml中的HTML代码之前运行的，所以我一直无法找到一种方法来实现这一点。我希望在新选项卡上显示正在加载的图像，并防止浏览器在认为页面没有响应时抛出消息。有人能帮我或把我链接到某个网站吗？谢谢

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

$（“#加载div”）.html（“加载…”）

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

$（“#loadingDiv”）.html（“”）

顺便说一句，这使用jQuery，但是如果您不使用它，我相信您也可以用普通的老javascript来实现。
您可以在页面上创建一个带有id的空div。在ajax调用之前，设置html

$（“#加载div”）.html（“加载…”）

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

$（“#loadingDiv”）.html（“”）

顺便说一句，这使用了jQuery，但如果您不使用它，我相信您也可以用普通的旧javascript来实现。
这都是关于状态的。第一次加载页面时，所有内容都在加载。因此，默认情况下，向用户显示您正在加载页面。然后在加载完成后，选择
html
标记并向其添加一个类，以向页面指示加载已完成。根据加载和完成状态设置样式

示例如下：


console.log（“加载”）；
setTimeout（函数（）{
document.documentElement.classList.add（'finished'）；
console.log（“已完成加载”）；
}, 5000);
.loader{
显示器：flex；
对齐项目：居中；
过渡属性：不透明度、可见性；
过渡时间：1s；
过渡定时功能：易进易出；
}
.loader：：之前，
.loader：：之后{
内容：“；
显示：块；
背景：#000；
宽度：10px；
高度：10px；
利润率：0.5px；
边界半径：50%；
动画：脉冲2s正常无限；
}
.loader：：之后{
动画延迟：200毫秒
}
html.finished.loader{
不透明度：0；
可见性：隐藏；
}
@关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：比例（1.5）；
}
75%, 100% {
变换：比例（1）；
}
}
一切都与国家有关。第一次加载页面时，所有内容都在加载。因此，默认情况下，向用户显示您正在加载页面。然后在加载完成后，选择
html
标记并向其添加一个类，以向页面指示加载已完成。根据加载和完成状态设置样式

示例如下：


console.log（“加载”）；
setTimeout（函数（）{
document.documentElement.classList.add（'finished'）；
console.log（“已完成加载”）；
}, 5000);
.loader{
显示器：flex；
对齐项目：居中；
过渡属性：不透明度、可见性；
过渡时间：1s；
过渡定时功能：易进易出；
}
.loader：：之前，
.loader：：之后{
内容：“；
显示：块；
背景：#000；
宽度：10px；
高度：10px；
利润率：0.5px；
边界半径：50%；
动画：脉冲2s正常无限；
}
.loader：：之后{
动画延迟：200毫秒
}
html.finished.loader{
不透明度：0；
可见性：隐藏；
}
@关键帧脉冲{
0% {
变换：比例（1）；
}
50% {
转换：比例（1.5）；
}
75%, 100% {
变换：比例（1）；
}
}
另一种方法是利用不引人注目的AJAX。您所需要的只是从Nuget软件包管理器安装Microsoft jQuery低调的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>
}

@{使用（Ajax.BeginForm（“Create”，“ControllerName”，null，new-AjaxOptions（））
{
HttpMethod=“POST”，
LoadingElementId=“divName”，
// ...
}
}))
{
//Html代码在这里
}

该div将仅在加载时显示
另一种方法是使用不引人注目的AJAX。您所需要的只是从Nuget软件包管理器安装Microsoft jQuery低调的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>
}

@{使用（Ajax.BeginForm（“Create”，“ControllerName”，null，new-AjaxOptions（））
{
HttpMethod=“POST”，
LoadingElementId=“divName”，
// ...
}
}))
{
//Html代码在这里
}

然后，该div将仅在加载时显示
我不确定是否理解，在GET调用完成之前，新选项卡上不会加载任何HTML。因此，在等待之后才会加载div。我不确定我是否理解，在GET调用完成之前，新选项卡上不会加载任何HTML。因此，在等待之后才会加载div