MVC 5 Ajax + bootstrap+ handle bar 例: 實現service 狀態

Js Script 

<script src="../../Scripts/handlebars-v1.3.0.js"></script>




 <script id="service-status-details-template" type="text/x-handlebars-template">


        {{#each values}}
        <div class="top-buffer-10">
            <div class="pull-left">{{ServiceName}}</div>
            <span style="margin-left: 15px;"> </span>
            <div class="pull-right">
                <span class="service-details-time">{{TimeDurationAgo}} AGO</span>
                {{#if IsUp}}
                <span class="glyphicon glyphicon-ok-sign" style="color: #5cb85c;"></span>
                {{else}}
                <span class="glyphicon glyphicon-exclamation-sign" style="color: #ff4f28;"></span>
                {{/if}}
            </div>
        </div>
        {{/each}}


    </script>
    <div style="z-index: 10;display: none;" id="service-status-details">
    </div>
    <a id="service-status" style="margin-left: 30%;" data-placement="bottom" href="#"></a>


    <script>
        var serviceStatusUrl = '@Url.Action("GetMonitoringServicesStatus")';


        $(document).ready(function () {
            $("#service-status").popover(
            {
                html: true,
                content: function () {
                    return $('#service-status-details').html();
                }
            });


            refreshServiceStatus();
            //window.setInterval(refreshServiceStatus, 5 * 60 * 1000 /*frequency set to 5 mins*/);
        });


        function refreshServiceStatus() { /*should be change to set interval*/
            $.ajax({
                type: 'POST',
                url: serviceStatusUrl, /*this value is set in _monitoringServices.cshtml */
                success: function (data) {
                    applyToJsTemplate("service-status-details", "service-status-details-template", data);


                    if (!data.isOk) {
                        $("#service-status").attr("class", "btn glyphicon glyphicon-exclamation-sign");
                        $("#service-status").css("color", "#ff4f28");
                    } else {
                        $("#service-status").attr("class", "btn glyphicon glyphicon-ok-sign");
                        $("#service-status").css("color", "#5cb85c");
                    }


                },
                dataType: "json"
            });




        }


        function applyToJsTemplate(layoutId, templateId, data) {
            $("#" + layoutId).html(Handlebars.compile($("#" + templateId).html())(data));
        }
    </script>

Css 

<style>
        .popover-content {
        background-color: #dadada;
    }
    .service-details-time {
        color: #adadad;
    }


    .service-details-name {
        color: #5d5d5d;
    }
    .popover {
        max-width: 100%;
    }
    


</style>

C# 

  public JsonResult GetMonitoringServicesStatus()
        {
            if (DateTime.Now.Second % 2 == 0)
            {
                var serviceList = Builder<MonitoringServicesModel>.CreateListOfSize(5)
                    .TheFirst(1).With(m => m.ServiceName, "Active Directory").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "11 MINS")
                    .TheNext(1).With(m => m.ServiceName, "aZure.Microsoft.com").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "5 MINS")
                    .TheNext(1).With(m => m.ServiceName, "aZure Preview Portal").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "16 MINS")
                    .TheNext(1).With(m => m.ServiceName, "Management Portal").With(m => m.IsUp, false).With(m => m.TimeDurationAgo, "31 MINS")
                    .TheNext(1).With(m => m.ServiceName, "Network Infrastructure").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")
                    .Build();
                var allUp = serviceList.All(s => s.IsUp);
                return Json(new { isOk = allUp, values = serviceList }, JsonRequestBehavior.AllowGet);
            }
            else
            {
                var serviceList = Builder<MonitoringServicesModel>.CreateListOfSize(5)
                   .TheFirst(1).With(m => m.ServiceName, "Active Directory").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")
                   .TheNext(1).With(m => m.ServiceName, "aZure.Microsoft.com").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "26 MINS")
                   .TheNext(1).With(m => m.ServiceName, "aZure Preview Portal").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "16 MINS")
                   .TheNext(1).With(m => m.ServiceName, "Management Portal").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "5 SECONDS")
                   .TheNext(1).With(m => m.ServiceName, "Network Infrastructure").With(m => m.IsUp, true).With(m => m.TimeDurationAgo, "1 MINS")
                   .Build();
                var allUp = serviceList.All(s => s.IsUp);


                return Json(new { isOk = allUp, values = serviceList }, JsonRequestBehavior.AllowGet);
            }
        }








  public class MonitoringServicesModel
    {
        public string ServiceName { get; set; }


        public string TimeDurationAgo { get; set; }


        public bool IsUp { get; set; }
    }