使用 ASP.NET MVC 3 持续刷新 PartialView

Question

我正在使用 ASP.NET MVC 3 开发一个网站。

我有许多部分包含来自不同部门的新闻，如下图所示：

https://i.sstatic.net/G21qi.png

使用

@Html.Action("_News", "Home", new { id = 1 })

Where id 1 = "Ledelsen", 2 = "Omstillingen" 等将这些部分添加到母版页。

我的控制器包含以下操作：

[ChildActionOnly]
public ActionResult _News(int id)
{
    // controller logic to fetch correct data from database
    return PartialView();
}

我已启动并运行 CRUD，但我的问题是如何以设定的时间间隔刷新 PartialViews 而无需回发？

我猜我必须使用 Javascript/jQuery 来完成此任务，但我无法做到。

谁能指出我正确的方向，或者更好的是，提供一个如何做到这一点的例子？

提前致谢

编辑：只是为了澄清我不想刷新整个页面，而只对部分视图进行异步刷新

Answer 1

在您的部分视图中，我建议将整个内容包装在 div 中：

<div id="partial1">

在 javascript 中，您需要一个函数来使用 AJAX 将部分视图加载到 div 中：

$("#partial1").load("_News", { id="1"} );

这就是使用 jQuery。一些文档此处。基本上，这将替换由调用 _News 操作生成的视图指示的 div。如果您向 javascript 调用添加一些逻辑，则 id 可以改变。

然后将对 load() 的调用包装在 setTimeout() 中：

var t = setTimeout(function () {$("#partial1").load("_News", { id="1"} );}, 60000);

这将每 60 秒运行一次包含的函数。可以在 JavaScript 代码中的任何位置使用 t 来停止自动刷新。

编辑

这应该可以解决缓存问题。感谢@iko 的建议。我注意到您需要 cache: false 才能正常工作。

var t = setTimeout(function () { $.ajax({ 
                                     url: "_News", 
                                     data: { "id": "1" }, 
                                     type: "POST", 
                                     cache: false, 
                                     success: function (data) { 
                                          $("#partial1").innerHTML = data; 
                                     }}); }, 60000);

Answer 2

我将向您推荐我对 Razor (mvc 3) 中的相关问题 "UpdatePanel" 给出的答案起点。请注意，这与史蒂夫·马洛里的答案没有太大不同，但强调了其他一些要点。

但不同之处在于，如果您想单独更新每个部分视图（仅更新 id 1 或仅更新 id 2），您可能需要删除 [ChildActionOnly] 属性。

该脚本可以放置在返回的部分中。

<script type="text/javascript">
    setInterval(function()
    {
          $.load('<%= Url.Action("_News", "Home", new { id = Model.Id } ) %>', function(data) {
          $('#partial_'@(Model.Id)').html(data);
      });
    }
    , 30000);
</script>

<div id="partial_@(Model.Id)" />