JQuery postback, поддерживает та же вкладка после обратной передачи

Question

Я использую вкладку jquery и следующий метод js, как и что я могу изменить для поддержания состояния вкладки между postbacks? (Это сбрасывает вкладки на первую вкладку после 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

Вы можете отслеживать активную вкладку в скрытом поле с помощью Javascript, а затем проверить скрытое поле при загрузке страницы. (Также в Javascript)

В качестве альтернативы вы можете использовать UpdatePanels с ASP.Net AJAX для устранения обратных передач. (Обратите внимание, что если вкладки в панели обновления, они не будут работать правильно)

Answer 2

Альтернативой использования скрытого поля является использование свойства печенья на вкладке управления

$ ("# вкладки "). tabs ({ cookie: { expires: 1 } });

Вы должны ссылаться на jquery.cookie.js файл для этой работы

jQuery tabs cookie

Answer 3

Попробуйте следующее:

<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

Вы сказали

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

Я бы загрузил это с помощью css, так как это быстрее. Скрыть, вероятно, делает отображение: none;

одно решение написано javascript из codebehind.
и пример с 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); 

или вы могли бы добавить атрибут к #search тега с C# и читать его с JS

C#

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

JS

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

, а другое решение - с запросом.
вы можете прочитать значение из строки запроса.

Я лично выбрал бы первый или второй.

Answer 5

Скрытый подход к полям подходит для меня. С .aspx, содержащий

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

и Js готовой функции, содержащей

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

активной вкладки будут установлены в скрытом поле. (Это свойство jQuery UI v1.9, 'active' f.k.a.'selected'.) Различные элементы управления, которые могут быть отправлены, позволяют установить hfLastTab.Value в соответствующий индекс.

Я также хотел, чтобы указать конкретную вкладку с URL-адресом с другой страницы, и потратил много времени на то, чтобы добавить и попытаться разобрать хеш-код конца, прежде чем перейти к параметру querystring,? т = N. Я разбираю это в ветке Page.IsPostback страницы_Load(). Для новых загрузок страниц мы переходим на вкладку 0, если ничего не указано, или вкладка N, если параметр запроса имеет параметр. Множество способов обработки этого разбора. Вот один из них:

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