c# - 基于服务器端进程的 AJAX 进度条

Question

我最初的想法是创建一个 session 变量，并在服务器端进程完成所有计算时更新它。例如，如果完成了 1/10 的主要任务，则将 session 变量更新为 10%...同时，我有第二个 AJAX 请求继续检查此 session 变量，直到服务器端处理完成为止。但是我现在读到 Session 变量在我的服务器端处理页面完成之前不可用。

我还注意到，使用这种方法，我的第二个 aspx 将在服务器端处理完成后加载，这是无用的，因为它在处理完成之前不会提供任何加载信息。

现在我有一个动画加载图标，但我需要某种指示服务器处于哪个步骤。

当前设置

function getComparison(result) {
    //grabs content from comparisons.aspx to show results
    $("#differenceSummary").html(result);
    //hide loading overlay image
    $("#loading").removeClass("visible");

}

基本上我只是将 compares.aspx 的内容转储到一个 div 中。我查看了 UpdatePanel 服务器控件，但这些示例在这种情况下似乎并没有使它看起来有用。他们都使用按钮，我需要实时了解正在发生的事情。

如果我可以将任何东西(更喜欢 1-100 或某种形式)返回给客户端，以了解我正在执行的流程，这将非常有用。

Answer 1

对于那些想知道我最终是如何做到这一点的人，我最终做了几个 AJAX 请求。

我的第一个 AJAX 请求确定了需要发出多少请求(我有 700,000 个数据库记录，我一次做了 30,000 个)并设置加载栏。设置加载栏后，我点击相同的 ASPX 文件“X”次，对于每次调用，我都会更新进度栏(需要一些数学运算)。一旦进度条达到 100%，我就会执行另一个 AJAX 请求，以从我所做的服务器端处理中获取结果。

我的初始代码调用comparison.aspx，并将其附加到一个div。

$.ajax({
        url: "comparisons.aspx",
        type: "GET",
        success: getComparison,
        error: showErrors
    });

//On Success, show results
function getComparison(result) {
    //grabs content from comparisons.aspx to show results
    $("#differenceSummary").html(result);

}

当comparisons.aspx 首次加载时，它会加载一个空的进度条，并根据我上传的文件生成信息(这特定于我的应用程序)。加载此页面时，AJAX 请求的数量将放入 javascript 中。

        //how many records to check at a time
        var numOfRecordsAtATime = 30000;

        //number of original/modified records

        var origNumOfRecords = parseInt($("#origNumOfRecords").text());
        var modNumOfRecords = parseInt($("#modNumOfRecords").text());
        var highestNum;
        //arithmetic to see how many AJAX calls are necessary
        if (origNumOfRecords > modNumOfRecords) {
            highestNum = origNumOfRecords;
        } else {
            highestNum = modNumOfRecords;
        }

        var numberofCallsToMake = parseInt(Math.floor(highestNum / numOfRecordsAtATime)) + 1;
        //How much the progress meter should increase at a time
        var increments = (100 / numberofCallsToMake);

        //number of records in total we've completed
        var numRecordsCompleted = 0;
        //number of times we've incremented
        var numIncrementsCompleted = 0;         


 function startAjax() {
    $("#progressbar").progressbar({
        value: 1
    });
    if (!halt) {
        while (true) {
            if (numRecordsCompleted < origNumOfRecords) {
                $.ajax({
                    url: "ajaxCall.aspx?randNo=" + Math.random(),
                    type: "GET",
                    success: doAjaxCall,
                    error: showTheError
                });
                numRecordsCompleted = numRecordsCompleted + numOfRecordsAtATime;

            } else {
                break;
            }

        }

    }

}

function doAjaxCall(result) {
    numIncrementsCompleted++;
    console.log(result);
    var progress = (parseInt(numIncrementsCompleted * increments));
    $("#progressbar").progressbar({
        value: progress
    });
    console.log(progress);
    if (progress == 100) {

        getResults();

    }
}