MVC4 auto refresh partial view

* Create new MVC4 application and make sure you configure unobtrusive-ajax as described in How to use MVC3 with AJAX

* Create Controller /Controllers/HomeController.cs

public class HomeController : Controller
{
  public ActionResult Index()
  {
    var model = new ViewModel();
    model.Now = DateTime.Now.ToString();
    return View(model);
  }
 
  public ActionResult Refresh()
  {
    var model = new ViewModel();
    model.Now = DateTime.Now.ToString();
    return PartialView("IndexPartial", model);
  }
}
 
public class ViewModel
{
  public string Now { get; set; }
}

* Create view /Views/Home/Index.cshtml

@using MVCTest.Controllers
@{
  ViewBag.Title = "Index";
}
<h2>Index</h2>
<a id="button" title="Refresh now">Refresh Now</a>
<a id="toggleButton" title="Auto refresh every 5 seconds">Auto Refresh</a>
 
<div id="PartialDiv">
  @Html.Partial("IndexPartial", (ViewModel)Model)  
</div>
 
<script type="text/javascript">
 
  var autoRefresh = false;
  var autoRefreshInterval = 1000 * 5;   //mili seconds (set to 5 seconds)
 
  $(document).ready(function () {
    $('a#button').click(function () {
      $('#PartialDiv').load('@Url.Action("Refresh", "Home")');
    });
 
    $('a#toggleButton').click(function () {
      $('#PartialDiv').load('@Url.Action("Refresh", "Home")');
      $(this).toggleClass("down");
      if ($(this).is('.down')) {
        autoRefresh = true;
      } else {
        autoRefresh = false;
      }
    });
 
    var refresh = function () {
      if (autoRefresh) {
        $('#PartialDiv').load('@Url.Action("Refresh", "Home")');
      }
      setTimeout(refresh, autoRefreshInterval);
    };
 
    refresh();
  });
</script>

* Create partial view /Views/Home/IndexPartial.cshtml

<h2>@Model.Now</h2>

* Add these css classes to your Site.css file

#button {
  cursor: pointer;
  font-weight: bold;
}
 
#toggleButton {
  color: darkred;
  font-weight: bold;
  cursor: pointer;
}
 
#toggleButton.down {
  color: green;
  font-weight: bold;
  cursor: pointer;
}

* The webpage should look like this with manual Refresh Now button and Auto Refresh toggle button