Asp.net mvc3定期刷新结果而无需重新加载页面

时间:2011-07-28 12:19:46

标签: c# javascript jquery ajax asp.net-mvc-3

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

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

我怎么能用ajax做到这一点?

这是视图的代码:

@{
    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; 
}

3 个答案:

答案 0 :(得分:5)

您可以使用window.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);
}

然后,将使用id="results"将此局部视图的结果注入到某个DOM元素中。

答案 1 :(得分:2)

你可以使用JSON传递查询结果并自己从javascript渲染HTML,或者将for-each代码分离到不同的局部视图,并使用jQuery的$ .ajax方法使用新响应更改查询结果的div html

答案 2 :(得分:0)

为什么不将数据放入现有的网格控件,例如DataTables,它是轻量级的,非常快速且可扩展。然后,使用javascript计时器,告诉数据表刷新它的内容。

我已经将它与MVC3一起使用效果很好。