Continous refresh of PartialView using ASP.NET MVC 3

本文关键字：NET MVC ASP using refresh of PartialView Continous | 更新日期: 2023-09-27 17:57:52

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

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

https://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来实现这一点，但我一直没能做到

有人能为我指明正确的方向吗？或者更好的是，提供一个如何做到这一点的例子？

提前感谢

编辑：只是澄清一下，我不想刷新整个页面，只想异步刷新部分视图

Continous refresh of PartialView using ASP.NET MVC 3

在您的局部视图中，我建议将整个东西包装在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秒运行一次包含的功能。可以使用t，因此可以在javascript代码中的任何位置使用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);

我将向您介绍我对一个相关问题的回答"UpdatePanel"；以Razor（mvc 3）为起点。注意，这与Steve Mallory的回答没有太大区别，但强调了其他一些要点。

然而，不同之处在于，如果要单独更新每个局部视图（仅更新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)" />
相关文章：