ASP.NET MVC 4でjQueryのタイマーを使って定期的に部分ビューを更新する

ASP.NET MVCで、タイマーを使って処理させるのか実現するためには、どうしたら良いのかメモしながら調べています。

_Layout.cshtml

これはわざわざ書く必要はないと思いますが、jQueryのjsを読み込みをしています。ASP.NET MVC 4のテンプレートに付属のjQueryのバージョンは1.8.2です。最新は2.1.1らしい。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>タイマーのテスト</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    </head>
    <body>
        @RenderBody()
    </body>
</html>

Views/Home/Index.cshtml

3,000ミリ秒(3秒)に1回、idupdatePaneを対象にして、HomeコントローラーのTimeアクションを実行します。

<div id="updatePane">
    @Html.Action("Time")
</div>

<script type="text/javascript">
    $(function () {
        $.ajaxSetup({ cache: false });
        setInterval(
            function () { $("#updatePane").load("Home/Time"); }
            , 3000);
    });
</script>

Views/Home/Time.cshtml

Time.cshtmlは呼び出しされた現在時刻を返します。C#を使ったことがある方なら分かると思いますが、DateTime.Nowプロパティを取れば現在時刻が得られます。

部分ビューを返します。

<h1>@DateTime.Now</h1>

Controllers/HomeController.cs

ほとんど何も実装していませんが、Homeコントローラーは下記の通りです。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Tanzaku.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Time()
        {
            return PartialView();
        }
    }
}