JQuery UI 选项卡缓存

Question

我正在开发 ASP .net MVC 应用程序。我有一个 JQuery UI 选项卡，其启用缓存的 Javascript 如下。

function LoadStudentDetailTabs() {
    $('#tabStudentDetail').tabs({
        cache: true,
        spinner: '',
        select: function(event, ui) {

            $("#gridSpinnerStudentDetailTabs h5").text("Loading Details...");
            $('#tabStudentDetail > .ui-tabs-panel').hide();
            $("#gridSpinnerStudentDetailTabs").show();
        },
        load: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        },
        show: function(event, ui) {
            $("#gridSpinnerStudentDetailTabs").hide();
            $('#tabStudentDetail > .ui-tabs-panel').show();
        }
    });
}

我使用列表构建了三个选项卡项，例如 tab1、tab2、tab3。

现在发生的情况是，当构造选项卡时，它会启用所有选项卡项的缓存。但如何根据需要单独设置这些选项卡项的缓存。比如说（tab1缓存，tab2无缓存，tab3缓存）我只能看到一种将缓存应用于整个选项卡的方法，而不是根据需要将缓存应用于单个选项卡项目。

我还需要动态启用或禁用这些选项卡项（tab1、tab2、tab3）的缓存。我怎样才能做到这一点。任何帮助将不胜感激？

Answer 1

我最近也用到了这个。查看代码，它使用“cache.tabs”和 $.data 来确定选项卡是否应该被缓存。因此，您只需要抓取该元素，然后设置 $.data(a, "cache.tabs", false);

我创建了一个快速扩展来做到这一点，假设选项卡是静态的。可能存在不可预见的问题，当然可以改进。

(function($) {
    $.extend($.ui.tabs.prototype, {
        _load25624: $.ui.tabs.prototype.load,
        itemOptions: [],
        load: function(index) {
            index = this._getIndex(index);

            var o = this.options,
                a = this.anchors.eq(index)[0];

            try {
                if(o.itemOptions[index].cache === false)
                    $.data(a, "cache.tabs", false);
            }
            catch(e) { }

            return this._load25624(index);
        }
    });
})(jQuery);

正如您所看到的，我将旧的 load 方法分配给 _load25624，只是一些随机名称，将其保留为对象的成员，并在新的 中调用它确定是否应该缓存选项卡后，使用 load 方法。用法：

$("#tabs").tabs({
    cache: true,
    itemOptions: [
        { cache: false }
    ]
});

将为整个项目集打开缓存，并仅针对第一个项目（索引 0）关闭缓存。

Answer 2

因此，为了简化 Eric 的分析，您可以通过在每个选项卡的锚元素中设置“cache.tabs”数据来控制每个选项卡的缓存。

// disable cache by default
$("#tabs").tabs({
    cache: false,
});

然后，在第一次加载选项卡内容后，您可以启用该选项卡的缓存。我只需将其放在 $(document).ready 中：

$(document).ready(function () {
    // cache content for the current tab
    var currentTabIndex = $("#tabs").tabs('option', 'selected');
    var currentTabAnchor = $("#tabs").data('tabs').anchors[currentTabIndex];
    $(currentTabAnchor).data('cache.tabs', true)
});

谢谢，Eric！

Answer 3

试试这个

$(document).ready(function(){
  $("#tabs").tabs({
    spinner: 'Loading...',
    cache: false,
    ajaxOptions: {cache: false}
  });
});

Answer 4

以上在 IE 中都不适合我。我必须放在

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

页面级别，而不是 Ajax 方法（适用于 Chrome）

所以：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ViewResult MyPage()
{
}

以及：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult MethodCalledByAjax()
{
}