如何在显示完整页面之前显示加载状态？答案

【问题标题】：How to show a loading state before show the complete page?如何在显示完整页面之前显示加载状态？
【发布时间】：2014-03-10 01:48:31
【问题描述】：

我正在使用高图表。我的一些图表需要大量计算，大约需要 1 分钟才能完成。如您所知，在 highcharts 中，我们将图表作为模型并将其传递给我们的视图。我希望加载视图并显示加载图片，并在后台计算完成后接收模型并显示图表。

表示我希望显示我的视图但也等待接收模型。

如何在 asp.net mvc4 和 c# 中处理这个问题？

或者任何其他方式...？

【问题讨论】：

标签： c# asp.net-mvc-4 highcharts

【解决方案1】：

这是我想要的，

Highcharts 提供了一个显示加载的选项。

可以通过

中提供的选项来完成

提供的 api 中的选项here

您可以使用showLoading() 和hideLoading() 方法来动态显示和隐藏测试。

这样您就可以在计算开始时启动加载指示器，然后在显示图表后将其隐藏

这是一个example，希望对你有用。

【讨论】：

好东西，但只有一个问题。我正在使用 nuget highcharts。在控制器中提供了服务器端的图表。问题是在完成计算之前，什么都不会作为 View() 返回。

【解决方案2】：

我的解决办法是这样的：

在我看来，我检查该模型是否为空。

如果模型为 null，我将向控制器中的方法发送一个 ajax 请求以进行计算。

在此过程中，我正在显示一个页面，其中包含一个包含Please wait,Loadin... 消息的 div。

然后计算方法将计算结果保存在TempDate中，在成功函数中我会刷新视图。

在此视图的控制器中，我会将TempDate 传递给视图。

public ActionResult Chart()
{
    var chart=TempData["chart"];
    return View(chart);
}

图表视图：

@model DotNet.Highcharts.Highcharts
<script src="~/Scripts/jquery-1.8.3.js"></script>
@if (Model != null)
{
<script src="~/Scripts/highcharts.src.js"></script>
@(Model)
}
else
{
<h3 style="text-align:center">Loadin...</h3>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("/WebServices/DrawChart",function(){
                window.location.replace("/WebServices/ChancePreview");
            })
        });
    </script>
}

最后：

public JsonResult DrawChart()
{
    //Calculations goes here...
    TempData["chart"]=chart;
}

【讨论】：