ASP.NET postbacks потеряет хэш в URL-адресе

На странице ASP.NET с вкладкой, я использую хеш-код в URL-адресе, чтобы отслеживать, на какой вкладке я нахожусь (с помощью Плагин jQuery для BBQ). Например:

http://mysite.com/foo/home#tab=budget

К сожалению, я только что понял, что на странице есть несколько мест, на которых я использую старомодный ретранслятор ASP.NET, и когда посылка завершена, хеш отсутствует:

http://mysite.com/foo/home

... поэтому я убираюсь на другую вкладку. Не хорошо.

Это веб-сайт (не MVC) с использованием .NET 4.0. Однако, как вы можете видеть, я использую маршрутизацию URL.

Есть ли способ сообщить ASP.NET сохранить хэш в URL-адресе после обратной передачи?

Ответ 1

Проблема заключается в том, что обратная передача переходит к URL-адресу текущей страницы, которая задается в действии формы на странице. По умолчанию этот URL-адрес не содержит #hash в asp.net, и он автоматически устанавливается asp.net, у вас нет контроля над ним.

Вы можете добавить #hash к атрибуту action с помощью javascript:

document.getElementById("aspnetForm").action += location.hash

или, если обновить действие с уже имеющимся хешем:

var form = document.getElementById("aspnetForm");
form.action = form.action.split('#')[0] + location.hash

просто убедитесь, что вы выполняете этот код на window.load, и вы нацеливаете правильный идентификатор

Ответ 2

Я попытался поместить код Willem answer в функцию JS, которая вызывалась каждый раз, когда была активирована новая вкладка. Это не сработало, потому что при каждом включении вкладок он добавлял дополнительную часть #hash в URL.

Мой URL-адрес оказался похож на http://myurl.example.com/home#tab1#tab2#tab3#tab2 (и т.д.)

Я немного изменил код, чтобы удалить существующий компонент #hash из URL-адреса в атрибуте <form> action, перед добавлением нового. Он также использует jQuery для поиска элемента.

$('.nav-tabs a').on('shown', function (e) {
    // ensure the browser URL properly reflects the active Tab
    window.location.hash = e.target.hash;

    // ensure ASP.NET postback comes back to correct tab
    var aspnetForm = $('#aspnetForm')[0];
    if (aspnetForm.action.indexOf('#') >= 0) {
        aspnetForm.action = aspnetForm.action.substr(0, aspnetForm.action.indexOf('#'));
    }
    aspnetForm.action += e.target.hash;
});

Надеюсь, это поможет кому-то!

Ответ 3

У меня есть другое решение, реализованное и протестированное с помощью chrome, IE и safari.

Я использую объект localStorage и предполагаю, что он будет работать со всеми браузерами, поддерживающими localStorage.

В событии click вкладки я сохраняю значение currentTab в локальном хранилище.

$(document).ready(function() {
        jQuery('.ctabs .ctab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
            localStorage["currentTab"] = currentAttrValue;

            // Show/Hide Tabs
            jQuery('.ctabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
        if (localStorage["currentTab"]) {
            // Show/Hide Tabs
            jQuery('.ctabs ' + localStorage["currentTab"]).show().siblings().hide();
            // Change/remove current tab to active
            jQuery('.ctabs .ctab-links a[href$="' + localStorage["currentTab"] + '"]').parent('li').addClass('active').siblings().removeClass('active');
        }
    });