Как показать состояние загрузки перед отображением полной страницы?

Question

Я использую highcharts. Некоторые мои диаграммы нуждаются в тяжелых вычислениях, которые потребуются около 1 минуты. Как вы знаете, в диаграммах мы делаем наши диаграммы в качестве модели и передаем ее нашему мнению. Я хочу, чтобы представление загружалось и показывало загрузочное изображение, и когда расчет фона выполняется, получите модель и покажите диаграммы.

Означает, что я хочу, чтобы мое представление было показано, но также ждут получения модели.

Как справиться с этим в asp.net mvc4 и C#?

Или любые другие способы ...?

Answer 1

Мое решение заключается в следующем:

На мой взгляд, я могу проверить, что это модель нуль или нет.

Если модель будет пустой, я отправлю запрос ajax методу моего контроллера для вычисления.

Пока это происходит, я показываю страницу с div, содержащую сообщение Please wait,Loadin....

Тогда метод расчета сохранил результат вычисления в 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; 
} 

Answer 2

Вот что я бы предпочел,

Highcharts дает возможность показать загрузку.

можно сделать с помощью опций, предусмотренных в

вариантов в апи условие here

вы можете использовать showLoading() и hideLoading() метод для динамического отображения и скрытия теста.

так что вы можете запустить индикатор загрузки, когда расчеты инициируют и скрыть его после отображения диаграммы

вот example, который я надеюсь, что будет работать для вас.