在不重新加载页面的情况下定期刷新结果

本文关键字：情况下 结果 刷新 新加载 加载 | 更新日期: 2023-09-27 18:03:54

我使用asp.net MVC3的网站，在一个视图中显示查询结果(在控制器中管理)使用foreach。

我现在要做的是每次自动刷新查询的输出，而不刷新页面。

我如何使用ajax做到这一点?

View的代码:

@{
    string firstTime = "";
}
 @foreach( var database in Model)
 {
        if (!(firstTime == database.DB))
        {
          <h3> @database.DB </h3>
        }
           <div class="logContainer" onclick="location.href='/logs/Details?databaseID=@database.DB&exceptionName=@database.Exception&exceptionsOccurred=@database.Count';">
                <div class="counter"><b>@database.Count</b></div> 
                <div class="exceptionName"> Exceptions of Type: @database.Exception</div>
                <div class="date">Siste: @database.LastOccurred</div>
           </div>
       <hr />
     firstTime = database.DB; 
}

在不重新加载页面的情况下定期刷新结果

您可以使用窗口。setInterval javascript方法，以定期向服务器发送AJAX请求并刷新DOM的相应部分。例如，如果您想每10秒刷新一次内容:

window.setInterval(function() {
    $.post('@Url.Action("someaction", "somecontroller")', function(result) {
        $('#results').html(result);
    });
}, 10 * 1000);

这将向控制器动作发送一个AJAX请求，而控制器动作又会返回一个包含更新结果的部分视图:

pubilc ActionResult SomeAction()
{
    SomeViewModel model = ...
    return PartialView(model);
}

这个局部视图的结果将被注入到一些DOM元素中，其中包含id="results"。

您可以使用JSON传递查询结果并自己从javascript中呈现HTML，或者将for-each代码分离到不同的部分视图，并使用jQuery的$。Ajax方法用新的响应

更改查询结果的div HTML

为什么不把你的数据放到一个现有的网格控件中，比如DataTables，它是轻量级的，速度很快，而且可以扩展。然后，使用一个javascript计时器，告诉数据表刷新它的内容。

我在MVC3中使用了这个方法，效果很好。

相关文章：