Giao diện người dùng JQuery Tabs caching

Question

Tôi đang làm việc trong ứng dụng ASP .net MVC. Tôi có một tab Giao diện người dùng JQuery có Javascript để bật bộ nhớ đệm như sau.

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(); 
     } 
    }); 
} 

Tôi đã tạo ba mục tab bằng cách sử dụng danh sách nói tab1, tab2, tab3.

Bây giờ điều xảy ra là khi tab được biên dịch, nó cho phép cahing cho tất cả các mục tab. Nhưng làm thế nào tôi có thể đặt riêng bộ nhớ đệm cho các mục tab này nếu cần. Nói (tab1 cache, tab2 không có cache, tab3 cache) Tôi chỉ có thể thấy một cách để áp dụng bộ nhớ đệm cho toàn bộ tab thay vì áp dụng bộ nhớ đệm cho các mục tab riêng lẻ khi cần.

Ngoài ra, tôi cũng cần phải bật hoặc tắt tính năng lưu vào bộ nhớ cache cho các mục tab này (tab1, tab2, tab3) động. Làm thế nào tôi có thể đạt được điều này. Bất kỳ trợ giúp sẽ được đánh giá cao?

Answer 1

Gần đây tôi đã sử dụng tính năng này. Nhìn vào mã, nó sử dụng "cache.tabs" với $.data để xác định xem tab có được lưu trong bộ nhớ cache hay không. Vì vậy, bạn chỉ cần lấy phần tử và đặt $.data(a, "cache.tabs", false);

Tôi đã tạo tiện ích mở rộng nhanh để thực hiện điều đó, giả sử các tab là tĩnh. Có thể có những vấn đề không ổn định và chắc chắn có thể được cải thiện.

(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); 

Như bạn có thể thấy tôi gán các phương pháp cũ load-_load25624, chỉ là một số tên ngẫu nhiên, giữ nó như là một thành viên của đối tượng, và gọi nó là trong phương pháp mới load sau khi đã xác định nếu tab nên được lưu vào bộ nhớ cache. Cách sử dụng:

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

Sẽ bật bộ nhớ cache cho toàn bộ mục và tắt bộ nhớ cache chỉ cho mục đầu tiên (chỉ mục 0).

Answer 2

Vì vậy, đơn giản hóa phân tích của Eric, bạn có thể kiểm soát bộ nhớ đệm của từng tab bằng cách đặt dữ liệu 'cache.tabs' trong phần tử neo của mỗi tab.

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

Sau khi nội dung tab đã được tải lần đầu tiên, bạn có thể bật bộ nhớ đệm cho tab đó. Tôi chỉ cần đặt nó vào trong $(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) 
}); 

Cảm ơn, Eric!

Answer 3

Hãy thử điều này

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

Answer 4

Không có ở trên làm việc cho tôi trong IE. Tôi đã phải đưa

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

Ở cấp độ trang, chứ không phải trên phương pháp Ajax (mà làm việc cho Chrome)

Vì vậy:

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

Cũng như:

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