使用ajax更新一瞥标签插件数据

Update glimpse tab plugin data using ajax

本文关键字：标签 插件 数据 ajax 更新 使用      更新时间：2023-09-26

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

当我打开页面时，我得到我需要的所有数据，但我希望能够每隔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更新面板，但这只是接缝有点错，我希望有一个更好的方法。

任何关于一瞥客户端可扩展性的教程或文档都是受欢迎的。

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

如果我是你，我可能会把它写为一个客户端标签，而不是实现AspNetTab。这里有一些如何做到这一点的例子。接下来，我将实现一个资源。不幸的是，它没有很好的记录，但幸运的是，它不是很难工作。

这个repo有一些关于如何使用客户端选项卡返回资源的示例。具体来说，库存选项卡是一个选项卡，它允许用户将鼠标放在网站中的产品上，并让选项卡显示库存水平。这里是资源，这里是与资源交互的客户端代码(考虑到您目前所拥有的，这应该很容易适应。最后，作为奖励，如果您还没有看到它，下面是如何将脚本包含到页面中的方法。请注意，该repo上的提交是一步一步地指导事情如何组合在一起的。

如果有帮助请告诉我。

相关文章：