如何将进度的百分比在代码中传递给Jquery进度条

本文关键字：Jquery 百分比 代码 | 更新日期: 2023-09-27 18:04:00

我有一个asp.net后台工作者。我想通过的百分比计数的进展改变，并显示在jquery的进度条。不幸的是，我发现它只更新进度条一次，只有进度完成。

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);
                  }
              });
          }

Downloader.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;
    }

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

如何将进度的百分比在代码中传递给Jquery进度条

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

这个方法叫做ajax-polling。

嘲笑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);
                }
            }
        });
    }

代码:没有变化。

你应该使用setInterval(yourfunctionname,1000)而不是setTimeout在文档。准备好。

  $(document).ready(function() {
        $("#progressbar").progressbar();
              setInterval(updateProgress, 100);
    });
相关文章：