2015-01-23 2 views
0

기본 부트 스트랩 탭을 사용하고 페이지를 새로 고친 후 현재 탭의 상태를 유지하려고합니다. 내가 다음 스크립트해야 할 일, 현재 탭의 상태를 유지하기 위해 숨겨진 필드 SetActiveNavTab을 사용하고부트 스트랩 페이지 새로 고침 후 영구 상태가있는 .NET의 탭

<form runat="server" id="mainForm"> 


<div class="Tabs"> 


    <ul class="nav nav-tabs"> 
     <li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');"> 
      <a data-toggle="tab" href="#sectionA"> 
       Heading 1 
     </li> 
     <li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');"> 
      <a data-toggle="tab" href="#sectionB"> 
       Heading 2 
     </li> 
     <li runat="server" id="liSectionNotes> 
      <a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');"> 
       Heading 3</li> 
     </ul> 


     <div class="tab-content"> 
      <div id="sectionContractPayments" class="tab-pane fade"> 
       <h4>Heading 1</h4> 
       Content for heading 1 
      </div> 
      <div id="sectionTracking" class="tab-pane fade">        
       <h4>Heading 2</h4> 
       Content for heading 2  
      </div> 
      <div id="sectionNotes" class="tab-pane fade">        
       <h4>Heading 3</h4>  
       Content for heading 3 
      </div> 


     </div>  
    </div> 


    <%-- This is to keep the state of current tab. --%> 
    <asp:HiddenField ID="SetActiveNavTab" runat="server" /> 


</form> 

: 다음 탭으로 내 양식 부트 스트랩 3

<script> 

/* Not working ... */ 
function activaTab2(tab) { 
    $('.nav-tabs a[href="#' + tab + '"]').tab('show'); 
}; 
function makeActiveTab(activeTabName) { 
    $('#<%=SetActiveNavTab.ClientID%>').val(activeTabName); 
    activaTab2($('#<%=SetActiveNavTab.ClientID%>').val(activeTabName)); 
    alert(activeTabName + "AND" + activaTab2($('#<%=SetActiveNavTab.ClientID%>').val());); 
} 
/* Not working ... */ 


$(document).ready(function() { 


    function activaTab(tab) { 
     $('.nav-tabs a[href="#' + tab + '"]').tab('show'); 
    }; 

    activaTab($('#<%=SetActiveNavTab.ClientID%>').val()); 


}); 
</script> 

부분을하는 작동하지 않습니다는 주석으로 표시됩니다. 클릭 한 탭을 SetActiveNavTab 숨겨진 필드에 저장할 수 없습니다. 스크립트에 문제가 있습니까?

더 좋은 방법이 있는지 잘 모르겠습니까?

+0

전체 페이지 새로 고침 새롭게 서버에서 모든 요청 - 페이지에 아무것도 저장되지 않습니다 (HTML은 좋은 또는 나쁜, 디자인에 의한 무 상태입니다). 로컬 변수 이외의 것을 업데이트하여 페이지 상태를 수동으로 저장할 수 있습니다 (예 : 쿠키에 표시/숨기기 필드 상태 저장 또는 ajax를 사용하여 웹 서버에 중요한 상태 변경 사항을 알리는). 페이지가 새로 고쳐지면 저장된 정보를 사용하여 페이지의 상태를 재구성 할 수 있습니다. –

답변

0

전체 페이지 게시물보다는 일부 페이지를 게시해야합니다. I-전자 AJAX

AJAX는 웹 페이지 뒤에서 서버와 적은 양의 데이터를 교환하여 비동기 적으로 업데이트 할 수 있습니다. 즉, 전체 페이지를 다시로드하지 않고도 웹 페이지의 일부를 업데이트 할 수 있습니다.

는 IT가 ASP.NET Web에서 AJAX위한

Working Source

를 작동 원리는 업데이트 패널

을 둘 필요가 asp.net 웹 형태로

양식들

Introduction to the UpdatePanel Control

Understanding ASP.NET AJAX UpdatePanel Triggers

관련 문제