在MVC 4的Razor视图中，3秒后刷新JavaScript和Ajax调用控制器，无需任何点击

Refresh JavaScript and Ajax call to controller after 3 seconds without any click in Razor View in MVC 4

本文关键字：调用 Ajax 控制器任何点 JavaScript MVC Razor 视图 3秒刷新更新时间：2023-09-26

Controller Action:

public ActionResult googlemap()
    {
        return View();
    }

它将调用googlemap.cshtml视图。
所以Ajax调用和JavaScript代码在googlemap.cshtml视图:

@{
    ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script>
<script type="text/javascript">
        var myMarkers = [];
        window.onload = function () {
            $.ajax({
                async: false,
                type: "POST",
                dataType: "json",
                url: '@Url.Action("googlemapfindlatlon", "Home")',
                data: '{}',
                success: function (data) {
                    $.each(data, function (i, v) {
                        myMarkers.push(v);
                    });
                    var mapOptions = {
                        center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    //alert(myMarkers[0].Latitude)
                    //alert(myMarkers[0].Langitude)
                    var infoWindow = new google.maps.InfoWindow();
                    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < myMarkers.length; i++) {
                        var data = myMarkers[i]
                        var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
                        lat_lng.push(myLatlng);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title: data.title
                        });
                        latlngbounds.extend(marker.position);
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.Address);
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                    }
                    //map.setCenter(latlngbounds.getCenter());
                    //map.fitBounds(latlngbounds);
                }
            });
            //init google map
        }
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
 height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>

控制器中的动作:

 public JsonResult googlemapfindlatlon()
    {
        Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
        var latlon = entities.LatLangs.ToList();
        //var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
        return Json(latlon, JsonRequestBehavior.AllowGet);
    }

所以这里我想我的Ajax调用是重复完成后，每3秒自动到控制器中的JsonResult动作，控制器获得最新的值，并发送回Ajax。

var myMarkers = [];
window.onload = function () {
    DisplayMap();
}
function DisplayMap() {
    $.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        url: '@Url.Action("googlemapfindlatlon", "Home")',
        data: '{}',
        success: function (data) {
            $.each(data, function (i, v) {
                myMarkers.push(v);
            });
            var mapOptions = {
                center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //alert(myMarkers[0].Latitude)
            //alert(myMarkers[0].Langitude)
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < myMarkers.length; i++) {
                var data = myMarkers[i]
                var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.Address);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            //map.setCenter(latlngbounds.getCenter());
            //map.fitBounds(latlngbounds);
        }
    });
    //init google map
}

setTimeout(function () {
    DisplayMap();
}, 3000);// JavaScript source code

试试这个:

var searchActiveTVInterval = null;
$(document).ready(function () {        
  clearInterval(searchActiveTVInterval);
  searchActiveTVInterval = setInterval("SearchActiveTV()", 3000);
});
function SearchActiveTV() {
  console.log(1);
  //your AJAX Call
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

window.setInterval(function(){
  /// call your ajax function here
}, 3000);