ASP.NET中用於導入/導出表格數據的進度條

我有一個ASP.NET應用程序，其中的數據正在導入/導出。我希望有一個進度條，如下所示。ASP.NET中用於導入/導出表格數據的進度條

一個表格中的一行及其單元格不斷添加。一行滿後，清空該行並將新單元格添加到同一行。

爲此，我認爲我們需要有一個線程功能以及在導出/導入時不會回發的情況下將「呈現表」呈現給客戶端。

我該怎麼做？

來源

2010-01-20 anish

-1

實際上，您不僅需要服務器的線程功能，而且還需要一些定期請求計算進度的JavaScript異步邏輯。否則服務器無法發送它。

雖然您可能可以使用某些控制庫;我想我已經看到了一些花哨的進度條。如果你想從頭開始，這裏有一些技巧：

在服務器端，用靜態變量/字典創建一個類，它將保存進度並在寫入進度的代碼中插入一些點進入變量。創建一個只啓動一個新線程的Web方法，另一個讓您恢復進度。或者，您可以創建一個取消方法，該方法將設置一些工作方法讀取並拋出異常的標誌。

在客戶端，只需使用一些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;

如果你不想顯示確切的進步而進步，你可以使用一些animated progress indicators。

來源

2010-01-20 07:24:25

事情是......我只需要一個酒吧，不斷變化。它可以通過這種方式遞增0-100-0-100 ...。也就是說，它不需要完全相同的百分比增量。即使是一個用戶控件，它與上面的一些JavaScript一樣會爲我做。 – anish 2010-01-20 07:34:23

所以基本上你只需要一個動畫？那麼你爲什麼不使用一些gif動畫;） – 2010-01-20 07:40:24

：）...不...動畫我想我可以使用我們的代碼......用如下的微小變化：而（真）{ int new_progress = 0; $（'progressBar'）。style。width = new_progress ++; if（new_progress == 100） { new_progress = 0; } } 你覺得呢？ – anish 2010-01-20 07:45:01

下面的代碼不使用表格，而只是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>

來源

2010-01-20 07:45:51

謝謝。 .i ll chk and tell u – anish 2010-01-20 08:11:51

我得到它的工作...但問題是..它的垂直遞增.. :( – anish 2010-01-20 08:28:56

對不起，我做了一個小小的修改代碼來說明Internet Explorer（IE使用屬性styleFloat和firefox使用cssFloat）。應該記住這個，並且應該測試它。希望這有助於！ – 2010-01-20 13:25:04

ASP.NET中用於導入/導出表格數據的進度條

回答

相關問題