如何在 ASP.NET MVC 中以幻灯片形式显示不同的视图 [关闭]

Question

我正在开发一个包含多个视图的运行状况和监控仪表板，并希望定期以幻灯片的形式逐一显示所有视图。 我们的要求是在我们团队空间的电视上播放此幻灯片，以主动解决问题。我正在考虑将 setTimeout 和 setInterval 作为一个选项。寻找实现此类功能的最佳实践或解决方案。任何帮助或建议将不胜感激。

Answer 1

你可以使用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>

显然，您的问题可以通过许多不同的方式来解决，这只是其中之一。您可能需要稍微调整一下以按照您的解决方案工作，或者只使用对您有帮助的部分并更改其余部分。这取决于您

Answer 2

您忘记包含 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/

不确定您有什么要求..（图形渲染？只是颜色？）