1

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

有一行的表格及其单元格不断添加。一旦一行已满，清空该行并将新单元格添加到同一行。

为此，我认为我们需要有一个线程功能以及在导出/导入时保持“呈现表”给客户端而无需回发的东西。

我怎样才能做到这一点？

4

2 回答 2

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>
于 2010-01-20T07:45:51.917 回答
-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;

如果您不想显示确切的进度，可以使用一些动画进度指示器。

于 2010-01-20T07:24:25.333 回答