<script src=http://www.mamicode.com/Scripts/handlebars-v1.3.0.js"></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; }
    }

MVC 5 Ajax + bootstrap+ handle bar 例:  实现service 状态