1

データがインポート/エクスポートされるASP.NETアプリケーションがあります。以下のようなプログレスバーが欲しいのですが。

1つの行とそのセルを持つテーブルが追加され続けます。行がいっぱいになったら、その行を空にして、同じ行に新しいセルを追加します。

このためには、スレッド機能と、エクスポート/インポート中にポストバックなしでクライアントに「テーブルをレンダリング」し続けるための何かが必要だと思います。

どうやってやるの？

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メソッドと、進行状況を返す2番目のスレッドを作成します。オプションで、workerメソッドが読み取って例外をスローするフラグを設定する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;

正確な進行状況を表示したくない場合は、アニメーション化された進行状況インジケーターを使用できます。

于 2010-01-20T07:24:25.333 に答える