MVC 5 Ajax + bootstrap+ Handle Bar Example: Implementing Service Status

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: #5c b85c; " ></span> {Else}} <span class= "Glyphicon glyphicon-exclamation-sign" style= "Colo R: #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 (" Get        Monitoringservicesstatus ");                $ (document). Ready (function () {$ ("#service-status"). PopOver ({html:true,                Content:function () {return $ (' #service-status-details '). html ();            }            });            Refreshservicestatus ();        Window.setinterval (Refreshservicestatus, 5 */*frequency set to 5 mins*/);        });                function Refreshservicestatus () {/*should is 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, "one 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, "MINS"). Thenext (1). With (M = M.servicename, "Management Portal"). With (M = M.isup, false). With (M = M.timedurationago, "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, "MINS"). Thenext (1). With (M = M.servicename, "aZure Preview Portal"). With (M = M.isup, True). With (M = M.timedurationago, "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 Example: Implementing Service Status