在 ASP 母版页中使用 AJAX 刷新数据答案

【问题标题】：Refreshing data using AJAX in ASP masterpage在 ASP 母版页中使用 AJAX 刷新数据
【发布时间】：2012-01-16 15:30:42
【问题描述】：

我有一些作为后台作业运行的进程，允许用户继续使用页面，当作业完成时（可能需要几分钟）我想向用户显示一条消息，这是最好的地方显示这将是主页面AFAIK（以防他们在网站上从一个页面移动到另一个页面）所以我在主页面文件中定义了一个div。

我正在尝试找到显示数据的最佳方法，目前我在 masterpage vb 文件中有一个方法可以轮询数据库以查看作业（涉及复杂逻辑和一些数据库访问）是否已完成，如果有，它会在 div 中显示一条消息，例如“作业 13132 已完成” - 工作正常。

问题是这不是动态的，我必须刷新页面才能调用检查进程是否完成的函数，我如何使用 AJAX 每 5 秒自动传送此内容？

我曾尝试使用 5 秒滴答时间的 asp 计时器，但整个页面每 5 秒刷新一次计时器点击事件。

Protected Sub Timer1_Tick(Byval sender as Object, Byval e As EventArgs)
    poll_results()
End Sub

Public Sub poll_results()

 'database access logic 

 If dbtable.isCompleted = True
     Dim sb As New StringBuilder()
     sb.Append("$('#status').html('Job abc123 is complete');")
     Page.ClientScript.RegisterStartupScript(GetType(Page), "myscript", sb.ToString(), True)
 End If

End Sub

有没有办法只使用更新的消息刷新 div，而不使用此代码进行完全刷新？或者如果这不可能，有没有办法使用 jQuery 复制上述函数，并且只有在作业完成后才能更新 DIV 文本？

【问题讨论】：

您提到了 ASP Masterpage，但您标记了 ASP.NET，这是一个 ASP.NET Webforms 项目吗？
嗨，是的，这是一个基于 asp.net webforms 的项目。

标签： asp.net ajax vb.net webforms

【解决方案1】：

您可以轻松地抛出我们所说的异步调用，而不是在同一页面中调用您的方法，只需在您的网站中创建一个async 文件夹并添加一个新的Generic Handler，调用页面，例如checkPendingJobs.ashx。

在该页面中，添加您当前的方法：

Public Sub ProcessRequest (Byval context as HttpContext)

    Dim r As String = ""

    If dbtable.isCompleted = True
       Dim sb As New StringBuilder()
       r = "Job abc123 is complete"
    End If     

    context.Response.ContentType = "text/plain"
    context.Response.Write(r)
}

现在您已经完成了 服务器部分，让我们来做客户端部分，在您的页面中，将这个 jQuery 代码添加到游览母版页，女巫每次都会触发刷新页面，或者您可以使用setInterval() 每 xx 秒检查一次：

<script>

var checkJobs = true;

$(document).ready(function() {

    // every time someone refreshes the page
    checkPendingJobs();

    // every 5 seconds...
  setInterval(function(){ checkPendingJobs(); }, 5000);

});

function checkPendingJobs() {
    // no need to check it if we already have a valid response
    if(!checkJobs) return;

    // caching issue trick
    var now = new Date(); 

    $.ajax({
        url: "../async/checkPendingJobs.ashx",
        type: "GET",
        data: { t: now.getTime() },
        success: function(data) {

            // do we have text to show?
            if(data.length > 0) {
                alert(data);
                checkJobs = false; // no need to check it more...
                // $('#status').html(data);
            }
        },
        error: function(msg) {
            alert('Error found:\n' + msg);
        }
    });        
}

</script>

【讨论】：

嗨，非常感谢您发布此代码，很抱歉让您感到痛苦，但我已将其复制并粘贴进去，只是为了在进行任何更改之前进行测试，但我在 javascript 中收到以下错误错误控制台.. 错误：属性列表后缺少 } - LINE => 成功：函数（数据）{ 我看不到任何丢失但之前没有这样做过，所以不能确定是否有我需要添加的东西?
缺少一个 } 来关闭 .ajax() 呼叫，还有一个逗号 , ... 抱歉，代码已在答案中编辑，您可以安全地复制/粘贴，请测试VB代码，这么多年C#我忘记了VB的基础知识:o(

【解决方案2】：

最常见的方法是创建一个呈现 JSON 或 HTML 的页面。这就是“poll_results”方法，把它想象成poll_result.aspx。您可以将单个作业 ID 传递到此页面，也可以仅对自上次轮询以来已完成的任何作业进行轮询。

您的 Masterpage 将包含一段 JavaScript 代码，该代码段将使用计时器（客户端 JavaScript 计时器）向服务器发送 AJAX 请求，点击您的“poll_request.aspx”页面。此页面将返回 HTML 或 JSON，您将编写一些 JavaScript 来显示您的消息。如果您需要一些代码示例，请告诉我。

【讨论】：