使用 ASP.NET MVC 3 持续刷新局部视图答案

【问题标题】：Continous refresh of PartialView using ASP.NET MVC 3使用 ASP.NET MVC 3 持续刷新局部视图
【发布时间】：2011-09-04 11:16:08
【问题描述】：

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

我有很多版块包含不同部门的新闻，如下图所示：

http://i.stack.imgur.com/G21qi.png

这些部分通过使用添加到母版页

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

其中 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 来完成此操作，但我无法做到。

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

提前致谢

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

【问题讨论】：

标签： c# ajax asp.net-mvc-3 partial-page-refresh

【解决方案1】：

在您的部分观点中，我建议将整个内容包装在一个 div 中：

<div id="partial1">

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

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

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

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

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

这将每 60 秒运行一次包含的函数。 t 可以使用，因此 clearTimeout(t) 可以在您的 javascript 代码中的任何位置停止自动刷新。

编辑

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

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

【讨论】：

我不是 jQuery 专家，但您不会缺少围绕 setTimeout 调用的函数包装器吗？看起来它会调用 load，然后将 load 函数返回的任何内容（请求对象？）传递给 setTimeout，我猜这会导致错误。
@AHM 我认为这个例子是正确的，虽然我不会说它是完整的。 .load() 是 .ajax() 的包装器。它将返回的 html 加载到调用元素中。您可以包含一个回调函数，但这不是必需的。 setTimeout 只是按计划调用包含代码。
嗯.... 除非 load 返回一个闭包，否则这是错误的。 SetTimeout 肯定需要回调，因为它是第一个参数。我认为这应该是 setTimeout(function(){$("#partial1").load("_News", { id="1"} )}, 60000)
@AHM 是的，你是对的。我从记忆中走出来，在我的情况下总是一个糟糕的决定。我正在更新我的答案。谢谢。
我最终使用了这个在本地主机上完美运行的解决方案。然而，在服务器上，它总是根据页面加载时的内容刷新这些部分。这意味着即使我提交了一些东西，它也会等待 60 秒，当 jQuery 第一次重新加载时，它会加载旧内容，就好像它正在缓存它一样。有任何想法吗？正如我所说，它可以在我的本地机器上完美运行。

【解决方案2】：

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

不同之处在于，如果您想单独更新每个局部视图（仅更新 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)" />

【讨论】：