使用 ajax 更新 glimpse 选项卡插件数据

Question

我正在尝试创建一个自定义 glimpse 插件，向我们显示来自我们服务器的一些信息。

当我打开页面时，我得到了我需要的所有数据，但我希望能够每 20 秒（或当我单击选项卡中的按钮时）更新一次这些数据，而不必刷新整个页面.

我已经设法将我的 JavaScript 添加到页面并订阅了 render 和 shown 事件，但我不知道如何更新标签内容出事了。

这是我的标签

    public class EagleTab : AspNetTab
    {
        private readonly IGlimpseInterventionService _glimpseInterventionService;
        public EagleTab()
            :this(new GlimpseInterventionService()){}

        public EagleTab(IGlimpseInterventionService glimpseInterventionService)
        {
            _glimpseInterventionService = glimpseInterventionService;
        }
        public override object GetData(ITabContext context)
        {
            var interventionSection = new TabSection("Last modification", "Last Message","Time since last modification","CSE","DPS", "Start Date","End date");
            var now = DateTime.Now;
            var twoHoursThresshold = new TimeSpan(1,0,0);
            foreach(var inv in _glimpseInterventionService.GetActiveInterventions()){
                var timeSinceLastMod = now - inv.LastModification;
                    interventionSection.AddRow()
                        .Column(inv.LastModification)
                        .Column(inv.LastMessage)
                        .Column(timeSinceLastMod.ToString("c"))
                        .Column(inv.CSEName)
                        .Column(inv.DPSName)
                        .Column(inv.StartDate)
                        .Column(inv.EndDate).WarnIf(timeSinceLastMod<twoHoursThresshold);
            }
            var plugin = Plugin.Create("Section", "Data");
            plugin.AddRow().Column("Active interventions").Column(interventionSection);
            return plugin;
        }
        public override string Name
        {
            get { return "Eagle Tab"; }
        }
    }

这是 JavaScript

    (function ($, pubsub, tab, render) {
        'use strict';
        function refreshTabContent(){
            //what am I supposed to do here
        }
        pubsub.subscribe('action.panel.rendering.eagle_glimpse_plugins_eagletab', function (args) {

        });
        pubsub.subscribe('action.panel.showed.eagle_glimpse_plugins_eagletab', function (args) {
            setTimeout(refreshTabContent,30000);
        });

    })(jQueryGlimpse, glimpse.pubsub, glimpse.tab, glimpse.render);

正如您在 js 中看到的那样，有一个名为 refreshTab 的函数，我想在那里更新选项卡的内容。

我知道我可以对我的控制器进行 Ajax 调用以获取数据，然后尝试使用 jQuery 更新面板，但这有点不对劲，我希望有更好的方法。

任何关于 glimpse 客户端可扩展性的教程或文档也将受到欢迎。

Answer 1

您已经朝着目标迈出了相当大的一步。不幸的是，虽然没有真正的方法可以从请求之外的选项卡获取数据。也就是说，有一种 "Glimpse" 从服务器获取数据的方法。这是一个很小的语义差异，但它与服务器数据和请求数据有关。

如果我是你，我可能会把它写成一个客户端选项卡，而不是实现 AspNetTab。 Here 是如何做到这一点的一些例子。接下来我将实现一个资源。不幸的是，它没有很好的记录，但幸运的是，它并不难使用。

This repo has some examples of how to work with client tabs back to resources. Specifically the Inventory tab is a tab that lets people mouse over products in the site and have the tab show stock levels. Here is the resource and here is the client code that interacts with the resource (given what you have so far, this should be fairly easy to adapt. Lastly, as a bonus, if you haven't seen it already, here is how to include 你的脚本到你的页面。请注意，该 repo 上的提交是逐步指导事情如何组合在一起的。

如果有帮助请告诉我。

使用 ajax 更新 glimpse 选项卡插件数据

Update glimpse tab plugin data using ajax

javascript

ajax

asp.net-mvc

glimpse