使用代码隐藏for循环更新Jquery progressbar

Question

我正在尝试实现这一点： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3

我尝试首先实现它，但是我不知道如何实现它。因此尝试使用jquery progressbar进行实现，我在网上找到了一些实现示例。我希望基于for循环后面的代码更新进度条。

我是前端开发的新手。请帮忙！

我的aspx页面：

<div id="progressbar"></div>
<div id="result"></div><br />
<asp:Button ID="btnGetData" runat="server" Text="Get Data" />


<script type="text/javascript">

$(document).ready(function () {
    $$("progressbar").progressbar({ value: 0 });

    $$('btnGetData').click(function () {
        var intervalID = setInterval(updateProgress, 250);
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetResult",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            //async: true,
            success: function (data) {
                debugger;                      
                var test = parseInt(data.d);
                $("#progressbar").progressbar("value", test);
                $("#result").text(msg.d);
                clearInterval(intervalID);
            }
        });
        return false;
    });


    function updateProgress() {
        var value = $("#progressbar").progressbar("option", "value");
        if (value < 100) {
            $("#progressbar").progressbar("value", value + 1);
        }
    }
});

</script>

CodeBehind：

[System.Web.Services.WebMethod]
public static object GetResult()
{          
    DataSet ds = new DataSet();

    var Numbers = GetNumbers.Tables[0];
    var count = 0;

    foreach(int num in Numbers.Rows)
    {
        ds.Tables[0].Rows.Add(GetData());
        count+1;
    }

    return count;
}