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

Question

我正在使用 ASP.NET MVC 3 開發一個網站。

我有很多部分包含來自不同部門的新聞，如下圖所示：

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

這些部分通過使用添加到母版頁

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

其中 id 1 =“Ledelsen”，2 =“Omstillingen”等等。

我的 Controller 包含以下操作：

[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 中，您需要 function 才能使用 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 秒運行一次包含的 function。 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);

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)" />