3

ASP.NET MVC 3 を使用して Web サイトを開発しています。

下の図に示すように、さまざまな部門からのニュースを含むいくつかのセクションがあります。

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を使用する必要があると思いますが、できませんでした。

誰かが私を正しい方向に向けることができますか?

前もって感謝します

編集: 明確にするために、ページ全体を更新するのではなく、部分ビューの非同期更新のみを行います

4

2 に答える 2

8

あなたの部分的な見方では、すべてを 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);
于 2011-05-29T23:35:31.173 に答える
0

出発点として、Razor (mvc 3) の関連する質問「UpdatePanel」に対する回答を参照します。スティーブ・マロリーの答えとそれほど変わらないが、他のいくつかの点を強調していることに注意してください。

ただし、各部分ビューを個別に更新する場合は、属性を削除する必要がある場合があります[ChildActionOnly](id 1 のみを更新するか、id 2 のみを更新します)。

このスクリプトは、返されたパーシャルに配置できます。

<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)" />
于 2011-05-30T06:37:50.230 に答える