Postback Jquery, mantiene la stessa scheda dopo il postback

Question

Sto usando la scheda jquery e seguendo il metodo js, ​​come e cosa posso modificarlo per mantenere lo stato di tabulazione tra i postback? (Questo reimposta schede a prima scheda dopo Page Load)

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

Answer 1

Potete seguire la scheda attiva in un campo nascosto utilizzando Javascript, quindi controllare il campo nascosto quando la pagina viene caricata. (Anche in Javascript)

In alternativa, è possibile utilizzare UpdatePanels con ASP.Net AJAX per eliminare i postback. (Si noti che se le schede sono in un pannello di aggiornamento, che non funziona correttamente)

Answer 2

Un'alternativa all'utilizzo di un campo nascosto è quello di utilizzare la proprietà cookie sul controllo a schede

$ ("# schede "). schede ({ cookie: { scade: 1 } });

è necessario fare riferimento al file jquery.cookie.js per far funzionare tutto

jQuery tabs cookie

Answer 3

Provare quanto segue:

<p class="hiddenData"><asp:HiddenField ID="hdnData" runat="server" /></p> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.tabs li a').click(function() { }); 
     $('.tabs li').hover(function() { 
      var liData = $(this); 
      $('.hiddenData input:hidden').val(liData.find('span').text()); 
     }); 
     if ($('.hiddenData input:hidden').val() != '') { 
      var liList = $('.tabs li'); 
      var hiddenData = $('.hiddenData input:hidden').val(); 
      liList.each(function() { 
       if ($(this).find('span').text() == hiddenData) { 
        $(this).find('a').click(); 
       } 
      }); 
     } 
    }); 
</script> 

Answer 4

Lei ha detto

//When page loads... 
$(".tab_content").hide(); //Hide all content 

Vorrei caricare questo con CSS poiché è più veloce. hide sta probabilmente facendo un display: none;

una soluzione sta scrivendo javascript da codebehind.
ed esempio con C#

var selectedTab = IsAdvancedSearch ? "{'selected':1}" : String.Empty; 
ScriptManager.RegisterClientScriptBlock(this, GetType(), "search", String.Format(@"jQuery(document).ready(function() {{ jQuery('#search').tabs({0}); }});", selectedTab), true); 

o si potrebbe aggiungere un attributo al tag #search con C# e leggerlo con js

C#

search.Attributes.Add("selectedtab", "1"); 

JS

jQuery("#search").attr("selectedtab"); 

e un'altra soluzione è con querystring.
è possibile leggere il valore dalla querystring.

sceglierei personalmente il primo o il secondo.

Answer 5

L'approccio sul campo nascosto funziona bene per me. Con l'aspx contenente

<asp:HiddenField runat="server" ID="hfLastTab" Value="0" /> 

e la funzione pronta js contenente

$("#tabs").tabs({ active: <%= hfLastTab.Value %> }); 

scheda attiva viene impostato per il campo nascosto. (Questa è la proprietà jQuery UI v1.9, 'active' f.k.a.'selezionato'.) I vari controlli che il postback può fornire per impostare hfLastTab.Value all'indice appropriato.

Volevo anche essere in grado di puntare a una determinata scheda con un URL da un'altra pagina, e ho trascorso un sacco di tempo a battere aggiungendo e cercando di analizzare un hash ref alla fine, prima di passare a un parametro querystring,? t = N. Lo analizzo in un ramo Page. IsPostback di Page_Load(). Per i nuovi carichi di pagina, andiamo alla scheda 0 se non è specificato nulla, o tab N se la querystring ha il parametro. Un sacco di modi per gestire l'analisi. Eccone uno:

 if (!Page.IsPostBack) { 
      string pat = @"t=(\d)"; 
      Regex r = new Regex(pat, RegexOptions.IgnoreCase); 
      Match m = r.Match(Request.Url.Query); 
      if (m.Success) hfLastTab.Value = m.Groups[0].ToString(); 
     }