Question

我正在使用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才能完成此任务，但我无法做到。

有人能指出我正确的方向还是更好的方法，提供一个如何做到这一点的例子？

提前致谢

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

Answer 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，因此{j}代码中的clearTimeout(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

我将把你给相关问题"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)" />

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

2 个答案: