Question

I have a view with a List of ViewModels that is based on data from my database. I present this list, but I want to the list to be refreshed on a given interval(5 secs) as the data in the database changes. I have a Action in my controller that update the ViewModels. I use MVC 3 and Razor.
I guess some JavaScript/jQuery is needed.

My script:

<script type="text/javascript">
$(document).ready(function () {
    var hdRaceId = $("#hdRaceId");

    setInterval("GetList()", 5000);
    function GetList() {
        $.get("/Timer/Update/?id=" + hdRaceId.val());
    }

My Action in my controller:

        public ActionResult Update(int id)
    {
        var raceintermediates = RaceIntermediateModel.GetRaceintermediatesForRace(id);
        return View("Speaker", raceintermediates);
    }

Answer 1

If you want to refresh some part of the DOM you need to define a success callback to your AJAX request. Like this:

window.setInterval(function() {
    var hdRaceId = $('#hdRaceId').val(); 
    var updateUrl = '@Url.Action("Update", "Timer")';
    $.get(updateUrl, { id: hdRaceId }, function(result) {
        $('#someDivId').html(result);
    });
}, 5000);

where you have some div that will host the partial view results:

<div id="someDivId"></div>

also some browsers like IE might cache GET requests. In order to avoid this you could use the following:

window.setInterval(function() {
    var hdRaceId = $('#hdRaceId').val(); 
    var updateUrl = '@Url.Action("Update", "Timer")';
    $.ajax({
        url: updateUrl,
        type: 'GET',
        data: { id: hdRaceId }, 
        cache: false,
        success: function(result) {
            $('#someDivId').html(result);
        }
    });
}, 5000);