Индикатор выполнения в ASP.NET для импортированных / экспортированных данных таблицы - PullRequest
Новая
       7

Индикатор выполнения в ASP.NET для импортированных / экспортированных данных таблицы

1 голос
/ 20 января 2010

У меня есть приложение ASP.NET, в котором данные импортируются / экспортируются.Я хотел бы иметь индикатор выполнения, как показано ниже.

Таблица с одной строкой и ее ячейками продолжает добавляться.Как только строка заполнится, очистите эту строку и добавьте новые ячейки в ту же строку.

Для этого, я думаю, нам нужно иметь функциональность потока, а также что-то, чтобы «рендерить таблицу» клиенту безпостбэк при экспорте / импорте.

Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 20 января 2010

Следующий код не использует таблицу, вместо этого просто divs, но он должен делать то, что вам нужно.Я включил теги html и body, чтобы вы могли легко скопировать и вставить его, чтобы увидеть, как он выглядит.Конечно, это все на стороне клиента и не зависит от ASP.NET, идея состоит в том, что вы запускаете индикатор выполнения с событием onsubmit, и страница ответов не начинает загружаться, пока не завершится вход / экспорт данных 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<div id="progressDiv" style="width:100%;"></div>

<script type="text/javascript">
    timerId = setInterval("addBlock()", 100);
    function addBlock()
    {
        var progressDiv = document.getElementById('progressDiv')
        var div = document.createElement('div');

        div.style.display = 'block';
        div.style.cssFloat = 'left';
        div.style.styleFloat = 'left';
        div.style.width = '10px';
        div.style.height = '10px';
        div.style.backgroundColor = 'red';
        div.style.border = '1px solid black';

        progressDiv.appendChild(div);
        if (progressDiv.childNodes.length == 20)
            while (progressDiv.hasChildNodes())
                progressDiv.removeChild(progressDiv.firstChild);
    }
</script>
</body></html>
0 голосов
/ 20 января 2010

На самом деле вам нужна не только функциональность потоков на сервере, но и какая-то асинхронная логика JavaScript, которая периодически запрашивала бы ход вычислений.В противном случае сервер не сможет отправить его.

Вы можете использовать некоторую библиотеку элементов управления;Я думаю, что я видел некоторые модные индикаторы прогресса вокруг.Если вы хотите начать с нуля, вот пара советов:

На стороне сервера создайте класс со статической переменной / словарем, в котором будет храниться прогресс, и вставьте несколько точек в код, в котором вы пишетепрогресс в переменную.Создайте веб-метод, который только начинает новый поток, и второй, который возвращает вам прогресс.При желании вы можете создать метод cancel, который установит некоторый флаг, который рабочий метод читает и выдает исключение.

На стороне клиента просто используйте некоторую библиотеку JavaScript ( Prototype , jQuery и т. д.) для запуска Ajax обратных вызовов к этим методам.Простым визуальным представлением может быть таблица, как вы сказали, или простой div с фоном, для которого вы просто устанавливаете процентную ширину, что-то вроде: 

 <div class="prog">
    <div class="con">
      <div class="bar" id="progressBar" style="width:0"></div>
    </div>
 </div>

со стилями CSS :

.prog 
 { width:412px;height:18px !important;border:1px solid #ccc;
   border-bottom-color:#ddd;border-right-color:#ddd;padding:0;
   margin:0;float:left;display:inline;overflow:hidden; }

.prog .con 
{ width:410px;height:16px !important;
  background:transparent url("images/background.jpg") repeat-x 0 2px;
  border:0;margin:0;padding:1px; text-align:left;
}

.prog .con .bar  
{
  height:16px;background:transparent url("images/background.jpg") repeat-x 0 -15px; 
}

и в javascript , где вам нужно установить прогресс 

$('progressBar').style.width = new_progress;

Если вы не хотите показывать точный прогресс, вы можете использоватьнекоторые анимированные индикаторы прогресса .

...