zoukankan      html  css  js  c++  java
  • 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- 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; }
        }

  • 相关阅读:
    部分网络加载预训练模型代码实现
    数据不平衡处理方法
    面试题目汇总
    多线程和多进程
    数据结构知识点总结
    GBDT和XGBoost的区别
    GBDT和随机森林的区别
    机器学习-特征处理
    一篇写得很好的关于lct的博客
    Count and Say 2014/10/23
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4017099.html
Copyright © 2011-2022 走看看