0

ASP.NET MVC3 を使用してダッシュボードを開発しており、それぞれ部分ビューを含む 2 つの div が必要で、異なる間隔でデータを更新します。

したがって、「PartialOverview」を含む div「results」は 1 分で更新され、「PartialOverviewRainfall」を含む div「rain」は 15 分で更新されます。

2 つの部分ビュー/div を参照するインデックス ページは、JQuery コードを配置した場所です。「PartialOverview」という 1 つの div を使用するだけで機能しますが、これは表示の大部分ですが、別の 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>

2 つの div を含めるように JavaScript コードを適応させる方法はありますか?

4

1 に答える 1

2

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>

または、より一般的なソリューションを使用してみてください (たとえば、HTML5data-*属性を使用):

<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 ファイルに入れることもできます。

于 2012-06-18T10:20:52.453 に答える