如何在ASP.NET MVC中顯示不同視圖作爲幻燈片顯示MVC

Question

我正在開發具有多個視圖的健康和監視儀表板，並希望定期顯示所有視圖作爲幻燈片放映。 我們的要求是在我們的團隊空間的電視上播放此幻燈片，以主動解決問題。我在setTimeout和setInterval作爲一個選項。尋找最佳實踐或解決方案來實現這種功能。任何幫助或建議將不勝感激。

Answer 1

你忘了包括AJAX標籤;-)

可以執行一個AJAX基於時間的調用來更新並顯示出許多面板（div的？），你可能有一個。

經典ASP.NET - https://msdn.microsoft.com/en-us/e-us/library/bb386404(v=vs.100).aspx

ASP MVC 3（jquery的） - "UpdatePanel" in Razor (mvc 3)

ASP MVC（局部視圖） - How do I refresh a partial view every 3 seconds in MVC 4?

ASP MVC（局部視圖） - https://blogs.msdn.microsoft.com/miah/2008/11/16/extending-mvc-auto-refreshing-a-partial-view-using-ajax/

不知道你的要求是什麼（圖形渲染？只是顏色？）

Answer 2

您可以使用AngularJS。爲什麼角？

1. 它內置了一個$interval服務，它允許您每x毫秒執行一次代碼。
2. 它內置了一個$http服務，它簡化了在ASP.NET MVC中的Ajax調用。
3. 它簡單易學，很受歡迎，一個偉大的方式來實現你的項目雙向約束力，並在單頁應用

這裏是有間隔的服務將運行每20秒一個完整的例子，獲取數據從兩個部分視圖，並在滑動器顯示該數據：

控制器：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public PartialViewResult CurrentDateTimeView() 
    { 
     string date = DateTime.Now.ToString(); 
     return PartialView("~/Views/Home/_CurrentDateTimeView.cshtml", date); 
    } 

    public PartialViewResult SomeOtherView() 
    { 
     return PartialView("~/Views/Home/_SomeOtherView.cshtml"); 
    } 
} 

局部圖1：<h1>@Model</h1>

局部圖2：<h1>Some other view...</h1>

索引視圖：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script> 

<script type="text/javascript"> 
    var $slider = null; 

    var app = angular.module('app', []); 
    app.controller('controller', function ($scope, $http, $interval, $q) { 

     //Loop - executes every 20 seconds 
     $interval(function() { 

      angular.element(document.querySelector('#dashboard')).empty(); 

      $http.get("/Home/CurrentDateTimeView").success(function (data, status, headers, config) { 
       var view = "<div class='slide'>" + data + "</div>"; 
       var dashboard = angular.element(document.querySelector('#dashboard')); 
       dashboard.append(view); 

       $http.get("/Home/SomeOtherView").success(function (data, status, headers, config) { 
        var view = "<div class='slide'>" + data + "</div>"; 
        var dashboard = angular.element(document.querySelector('#dashboard')); 
        dashboard.append(view); 

        if ($slider == null) { 
         $slider = $('.sliderDashboard').bxSlider({ 
          slideWidth: 200, 
          minSlides: 1, 
          maxSlides: 1, 
          slideMargin: 10 
         }); 
        } 
        else { 
         $slider.reloadSlider(); 
        } 
       }); 
      }); 

     }, 10000); 
    }); 
</script> 

<div ng-app="app" ng-controller="controller"> 
    <div class="sliderDashboard" id="dashboard"> 

    </div> 
</div> 

你問什麼顯然可以在許多不同的方式來解決，這只是其中之一。您可能需要稍微調整以適應您的解決方案，或者僅使用幫助您並更改其餘部分的部分。這取決於您