How to show different views as a slideshow in ASP.NET MVC

Question

I am developing a health and monitoring dashboard with several views and want to show all views one by one as a slide show periodically. Our requirement is to play this slide show on a TV in our team space to troubleshoot the issues proactively. Am looking at setTimeout and setInterval as an option. Looking for best practices or solution to implement this kind of functionality. Any help or advise will be highly appreciated.

Answer 1

You could use AngularJS.Why angular?

1. It comes built in with a $interval service which lets you execute code every x milliseconds.
2. It comes built in with a $http service which simplifies making ajax calls in ASP.NET MVC.
3. It's easy to learn, very popular and a great way to implement two way binding in your project and create single page applications

Here's a complete example with an interval service which will run every 20 seconds, gets data from two partial views and display that data in a slider:

Controller:

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");
    }
}

Partial View 1: <h1>@Model</h1>

Partial View 2: <h1>Some other view...</h1>

Index View:

<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>

Obviously what you're asking can be solved in many different ways and this is just one of them. You may need to tweak it slightly to work how you want for your solution or just use the sections that help you and change the rest.It's up to you

Answer 2

You forgot to include the AJAX tag ;-)

You can perform an AJAX time-based call to update and show one of many panels (divs?) you may have.

Classic 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 (partial view) - How do I refresh a partial view every 3 seconds in MVC 4?

ASP MVC (partial view) - https://blogs.msdn.microsoft.com/miah/2008/11/16/extending-mvc-auto-refreshing-a-partial-view-using-ajax/

Not sure what are your requirements.. (graphics rendering? just colors?)