Question

我有一个ASP.NET应用程序，其中导入/导出数据。我希望有一个进度条，如下所示。

包含一行的表及其单元格一直在添加。一行填满后，清空该行并将新单元格添加到同一行。

对于这一点，我认为我们需要有一个线程功能，以及在导出/导入时不需要回发的情况下将“呈现表”保存到客户端。

我该怎么做？

Answer 1

以下代码不使用表，而只使用div，但它应该执行您所需的操作。我包含了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>

Answer 2

实际上，您不仅需要服务器上的线程功能，还需要某种定期询问计算进度的JavaScript异步逻辑。否则服务器无法发送它。

你可能可以使用一些控制库;我想我已经看到了一些奇特的进步酒吧。如果你想从头开始，这里有几个提示：

在服务器端，创建一个带有静态变量/字典的类，该类将保存进度并在代码中插入一些点，将进度写入变量。创建一个Web方法，它只是启动一个新线程，第二个方法可以让您重新获得进度。（可选）您可以创建一个cancel方法，该方法将设置worker方法读取的一些标志并抛出异常。

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

ASP.NET中用于导入/导出表数据的进度条

2 个答案: