Jquery postback, сохранить ту же вкладку после обратной передачи

Question

Я использую вкладку jquery и следующий метод js, как и что я могу изменить, чтобы поддерживать состояние вкладки между постбэками? (Это сбрасывает вкладки на первую вкладку после загрузки страницы)

$(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

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

$ ( "# язычки"). Вкладки ({ cookie: { истекает: 1 } });

Вам нужно обратиться к файлу jquery.cookie.js, чтобы это работало

jQuery вкладки cookie

Answer 2

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

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

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

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

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

и функция js ready, содержащая

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

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

Я также хотел иметь возможность указывать на конкретную вкладку с URL-адресом с другой страницы, и тратил много времени на то, чтобы добавить и попытаться проанализировать хэш-ссылку до конца, прежде чем перейти к параметру строки запроса: = N. Я разбираю это в! Page.IsPostback ветке Page_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();
        }

Answer 5

Вы сказали

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

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

Одним из решений является написание javascript из кода.
и пример с 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");

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

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