将新数据加载到页上而不重新加载

本文关键字:加载 新加载 数据 新数据 | 更新日期: 2023-09-27 17:50:07

我正在做一个ASP的高级规范。网页中可能有一些延迟的数据。

当页面加载时,呈现的初始数据将来自本地数据库(这将快速呈现)。我想要的是一个单独的进程,可以出去查找更新的数据(从我拥有的任何其他服务)。这是比较耗时的,但其思想是先呈现数据,然后如果发现新数据,就将其追加到现有页面的顶部。

我想听听一些关于如何做到这一点的建议。

技术范围为ASP。. Net 4.0, c# MVC3和HTML5。

谢谢。

将新数据加载到页上而不重新加载

使用jQuery的AJAX是实现这一目标的好方法。例如,你可以在你的标记上放一个内容占位符div:

<div id="result" data-remote-url="@Url.Action("Load", "SomeController")"></div>

加载完DOM后:

$(function() {
    $.ajax({
        url: $('#result').data('remote-url'),
        type: 'POST',
        beforeSend: function() {
            // TODO: you could show an AJAX loading spinner
            // to indicate to the user that there is an ongoing
            // operation so that he doesn't run out of patience
        },
        complete: function() {
            // this will be executed no matter whether the AJAX request
            // succeeds or fails => you could hide the spinner here
        },
        success: function(result) {
            // In case of success update the corresponding div with
            // the results returned by the controller action
            $('#result').html(result);
        },
        error: function() {
            // something went wrong => inform the user 
            // in the gentler possible manner and remember
            // that he spent some of his precious time waiting 
            // for those results
        }
    });
});

,其中Load controller动作将负责与远程服务通信,并返回包含数据的部分视图:

public ActionResult Load()
{
    var model = ... go ahead and fetch the model from the remote service
    return PartialView(model);
}

现在,如果这个获取数据是I/O密集型的,你可以利用异步控制器和I/O完成端口,这将避免你在从远程数据源获取数据的漫长操作期间危及工作线程。