在间隔mvc上刷新视图模型

问题描述

| 我有一个带有viewmodels列表的视图，该视图基于数据库中的数据。我显示了此列表，但是我希望在数据库中的数据更改时以给定的间隔（5秒）刷新列表。我的控制器中有一个可更新viewmodel的Action。我使用MVC 3和Razor。 我猜需要一些JavaScript / jQuery。 我的剧本：

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

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

我在控制器中的操作：

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

    

解决方法

如果要刷新DOM的某些部分，则需要定义AJAX请求的成功回调。像这样：

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

您有一些div可以承载部分视图结果：

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

此外，某些浏览器（例如IE）可能会缓存GET请求。为了避免这种情况，您可以使用以下方法：

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);

    ,setTimeout（GetRefereshedList，5000）; 在GetRefreshedList ..中，您可以使用$ .ajax（）方法从服务器获取新列表并在客户端上更新所有视图。 如果可以共享您的代码，我可以再扩展一点。