JQuery tabcontrol : load gridview

Question

JQuery/CSS tabcontrol이 있는데, 현재 gridviews가 포함 된 4 개의 탭을 처리하고 있습니다. 탭을 눌렀을 때 gridview를로드하고 싶습니다. 이렇게하면 Gridview의 sprocs 일부 시간이 걸리는 것처럼 페이지로드 시간이 줄어 듭니다. gridviews는 한 번로드해야합니다. 특정 탭을 열 때마다 업데이트 할 필요가 없습니다.

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를로드하는 버튼을 만들고 jquery 탭의 select 이벤트에서 해당 버튼을 클릭하는 것입니다. 다음과 같은 내용 :

$("#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.