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

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

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

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

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

источник

2010-01-20 anish

-1

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

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

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

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

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

в случае, если вы не хотите, чтобы показать точный прогресс, вы можете использовать некоторые animated progress indicators.

источник

2010-01-20 07:24:25

Вещь ... мне просто нужен бар, который продолжает меняться. Он может увеличивать 0-100-0-100 ... таким образом. То есть, это не должно быть точно такое же процентное увеличение. Даже пользовательский элемент управления, который делает то же самое с некоторым javascript, сделает для меня. – anish

Значит, вам просто нужна анимация? Тогда почему бы вам не использовать некоторые анимированного GIF;) –

:) ... не анимация ... Я думаю, я могу использовать ур код ... с небольшим изменением, как показано ниже: в то время как (истина) { int new_progress = 0; $ ('progressBar'). Стиль.width = new_progress ++; if (new_progress == 100) { new_progress = 0; } } что вы думаете? – anish

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

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

источник

2010-01-20 07:45:51

спасибо. .i ll chk и tell u – anish

У меня это работает ... но проблема в том, что ... это увеличение по вертикали .. :( – anish

Извините, Anish, я сделал небольшую модификацию кода для учетной записи Internet Explorer (IE использует свойство styleFloat и firefox использует cssFloat). Должен помнить об этом и должен был его протестировать. Надеюсь, это поможет! –

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

ответ

Смежные вопросы