Как передать процент выполнения кода за индикатором выполнения Jquery?

Question

У меня есть фоновый работник в 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 обнаружил какие-либо изменения?

Answer 1

Вы должны использовать setTimeout() в своей функции успеха ajax до тех пор, пока процесс не завершится.

Этот метод называется 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);
                }
            }
        });
    }

Код сзади: Без изменений.

Answer 2

Вы должны использовать setInterval (yourfunctionname, 1000) вместо setTimeout в document.ready.

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