c# - 如何将后台代码的进度百分比传递给Jquery进度条？

Question

我在 asp.net 中有一个后台 worker 。我想传递进度更改的百分比并将其显示在 jquery 进度条中。不幸的是，我发现它只更新一次进度条并且只有进度完成。

查询

    $(document).ready(function() {
        $("#progressbar").progressbar();
              setTimeout(updateProgress, 100);
    });

   function updateProgress() {
              $.ajax({
                  type: "POST",
                  url: "Downloader.aspx/GetData",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  async: true,
                  success: function(msg) {
                      // Replace the div's content with the page method's return.

                      $("#progressbar").progressbar("option", "value", msg.d);
                  }
              });
          }

下载器.aspx.cs

static BackgroundWorker _bw;
public static int Percent { get; set; }

    protected void Button1_Click(object sender, EventArgs e)
    {
        _bw = new BackgroundWorker
        {
            WorkerReportsProgress = true,
            WorkerSupportsCancellation = true
        };
        _bw.DoWork += bw_DoWork;
        _bw.ProgressChanged += bw_ProgressChanged;
        _bw.RunWorkerCompleted += bw_RunWorkerCompleted;

        _bw.RunWorkerAsync("Hello world");
    }

    void bw_DoWork(object sender, DoWorkEventArgs e)
    {

        for (int i = 0; i <= 100; i += 20)
        {
            if (_bw.CancellationPending) { e.Cancel = true; return; }
            _bw.ReportProgress(i);
            Thread.Sleep(1000);
        }
        e.Result = 123;
    }

    void bw_RunWorkerCompleted(object sender,
                                       RunWorkerCompletedEventArgs e)
    {
            percentage.Text = "Complete: " + e.Result;      // from DoWork
    }

    void bw_ProgressChanged(object sender,
                                    ProgressChangedEventArgs e)
    {
        Percent = e.ProgressPercentage;
    }

    [WebMethod]
    public static int GetData()
    {
        return Percent;
    }

一旦 bw_ProgressChanged 检测到任何变化，如何更新 jquery 进度条？

Answer 1

您必须在 ajax success 函数中递归 setTimeout()，直到该过程完成。

这种方法称为 ajax 轮询。

模拟 HTML:

    <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
    Percentage:<asp:Label ID="percentage" runat="server"></asp:Label>

客户端脚本:

    $(document).ready(function () {
        // TODO: revert the line below in your actual code
        //$("#progressbar").progressbar();
        setTimeout(updateProgress, 100);
    });

    function updateProgress() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (msg) {
                // TODO: revert the line below in your actual code
                //$("#progressbar").progressbar("option", "value", msg.d);
                $("#percentage").text(msg.d);
                if (msg.d < 100) {
                    setTimeout(updateProgress, 100);
                }
            }
        });
    }

代码隐藏: 没有变化。