JQuery tabcontrol: load gridview

Question

У меня есть вкладка JQuery/CSS tabcontrol, которая в настоящее время обрабатывает 4 вкладки, содержащие gridviews. Я хочу, чтобы gridview был загружен, когда вы нажимаете на вкладки. Это уменьшает время загрузки страницы, так как некоторые из sprocs gridview занимают некоторое время. Сетки должны загружаться один раз, их не нужно обновлять каждый раз, когда вы открываете конкретную вкладку.

JQuery:

$(document).ready(function() 
{ 
    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 
}); 

Теперь я только начал использовать JQuery, так что я действительно не знаю, чтобы справиться с этим ... кто-нибудь идеи?

Answer 1

У меня была аналогичная проблема. То, что я сделал, это создать кнопку для загрузки gridview, а в событии select для вкладок jquery я нажимаю эти кнопки. Что-то вроде этого:

$("#tabs").tabs({ 
     select: function (event, ui) { 
      switch (ui.index) { 
       case 0: 
        $("#<%= btnOne.ClientID %>").click(); 
        break; 
       case 1: 
        $("#<%= btnTwo.ClientID %>").click(); 
        break; 
       case 2: 
        $("#<%= btnThree.ClientID %>").click(); 
        break; 
      } 
     } 
}); 

Answer 2

Если вы хотите сделать все на сервере, вам нужна панель обновления и принудительно выполните обратную передачу с помощью __doPostBack, чтобы сервер мог обработать запрос ... Вы также можете использовать $ .ajax для этого а также ...

В противном случае сделайте все это на клиенте, передайте данные клиенту из веб-службы и создайте таблицу на клиенте.

HTH.