Question

我正在使用ASP.NET MVC3开发一个仪表板，需要有两个div，每个div包含一个局部视图，以不同的间隔刷新数据。

所以，包含“PartialOverview”的div“结果”在1分钟刷新，包含“PartialOverviewRainfall”的div“rain”在15分钟刷新。

引用两个部分视图/ div的索引页面是我放置JQuery代码的地方。当我只使用一个div时，它可以工作，“PartialOverview”因为它是显示器的大部分，但我似乎无法使代码正确包含另一个div。

这是我的代码：

<script type="text/javascript">
  $(document).ready(function() {
    $("#results").load("/EDM/Index");  
    setInterval(function() {
        $("#results").load("/EDM/Index");
    }, 60000); //Refreshes every 60 seconds  
    $.ajaxSetup({ cache: false });  
 }); 
</script> 

<div id="rain">
  @Html.Partial("PartialOverviewRainfallList")
</div>
<div id="results">
  @Html.Partial("PartialOverviewList")
</div>

有没有办法调整javascript代码以包含两个div？

Answer 1

您可以为其他部分添加另一个setInterval：

<script type="text/javascript">
    $(document).ready(function() {
        window.setInterval(function() {
            $("#results").load("/EDM/Index");
        }, 60000); //Refreshes every 60 seconds  

        window.setInterval(function() {
            $("#rain").load("/EDM/Rain");
        }, 900000); //Refreshes every 15 minutes

        $.ajaxSetup({ cache: false });  
    }); 
</script>

或尝试使用更通用的解决方案（例如使用HTML5 data-*属性）：

<div id="rain" class="refresh" data-interval="60000" data-url="@Url.Action("rainr", "edm")">
    @Html.Partial("PartialOverviewRainfallList")
</div>
<div id="results" class="refresh" data-interval="900000" data-url="@Url.Action("index", "edm")">
  @Html.Partial("PartialOverviewList")
</div>

然后：

<script type="text/javascript">
    $(document).ready(function() {
        $('.refresh').each(function() {
            var element = $(this);
            var url = element.data('url');
            var interval = element.data('interval');
            (function(element, url, interval) {
                window.setInterval(function() {
                    element.load(url);
                }, interval);
            })(element, url, interval);
        });
        $.ajaxSetup({ cache: false });  
    }); 
</script>

现在你甚至可以将它放入一个单独的javascript文件中。

使用JQuery以不同的间隔在ASP.NET MVC中重新加载两个部分视图

1 个答案: